WordPress 3.5 benutzerdefinierter Medien-Upload für Ihre Theme-Optionen

WordPress 3.5 wurde vor kurzem veröffentlicht, ich habe das WordPress Media Upload-System über Thickbox verwendet und window.send_to_editor für einige Optionen in meinem WordPress-Theme (Hintergründe, Logos etc…).

Aber da WordPress einen neuen Media Manager integriert hat, wollte ich diese neue Funktion nutzen, um Bilder/Dateien als benutzerdefinierte Felder hochzuladen. Also verbrachte ich den Morgen damit, einen Weg zu finden, um das gewünschte Ergebnis zu erzielen.

Ich habe mit dieser Lösung gefunden, die für einige von Ihnen nützlich sein kann. Vielen Dank, dass Sie mir Ihr Feedback zum Code oder zu Verbesserungen geben, die Sie im Sinn haben!

HTML-Beispiel:

<a href="#" class="custom_media_upload">Upload</a>
<img class="custom_media_image" src="" />
<input class="custom_media_url" type="text" name="attachment_url" value="">
<input class="custom_media_id" type="text" name="attachment_id" value="">

jQuery-Code:

$('.custom_media_upload').click(function() {

    var send_attachment_bkp = wp.media.editor.send.attachment;

    wp.media.editor.send.attachment = function(props, attachment) {

        $('.custom_media_image').attr('src', attachment.url);
        $('.custom_media_url').val(attachment.url);
        $('.custom_media_id').val(attachment.id);

        wp.media.editor.send.attachment = send_attachment_bkp;
    }

    wp.media.editor.open();

    return false;
});

Wenn Sie alle Einstellungen sehen möchten, die in der attachment variabel kannst du a console.log(attachment) oder alert(attachment).

Sie gehen auf eine Weise vor, die nicht beabsichtigt war. Ihr Javascript-Code sollte wahrscheinlich so aussehen:

$('.custom_media_upload').click(function(e) {
    e.preventDefault();

    var custom_uploader = wp.media({
        title: 'Custom Title',
        button: {
            text: 'Custom Button Text'
        },
        multiple: false  // Set this to true to allow multiple files to be selected
    })
    .on('select', function() {
        var attachment = custom_uploader.state().get('selection').first().toJSON();
        $('.custom_media_image').attr('src', attachment.url);
        $('.custom_media_url').val(attachment.url);
        $('.custom_media_id').val(attachment.id);
    })
    .open();
});

Vergiss nicht zu verwenden wp_enqueue_media (neu in 3.5) wenn du nicht auf der Beitragsbearbeitungsseite bist

Um die alte Medien-Upload-Box zu verwenden, können Sie dies tun:

if(function_exists( 'wp_enqueue_media' )){
    wp_enqueue_media();
}else{
    wp_enqueue_style('thickbox');
    wp_enqueue_script('media-upload');
    wp_enqueue_script('thickbox');
}

Ich habe diesen Code noch etwas modifiziert, um ihn für mehrere Felder gleichzeitig nutzbar zu machen:

HTML-Code:

<!-- Image Thumbnail -->
<img class="custom_media_image" src="" style="max-width:100px; float:left; margin: 0px     10px 0px 0px; display:inline-block;" />

<!-- Upload button and text field -->
<input class="custom_media_url" id="" type="text" name="" value="" style="margin-bottom:10px; clear:right;">
<a href="#" class="button custom_media_upload">Upload</a>

jQuery:

jQuery(document).ready(function($){

$('.custom_media_upload').click(function() {

        var send_attachment_bkp = wp.media.editor.send.attachment;
        var button = $(this);

        wp.media.editor.send.attachment = function(props, attachment) {

            $(button).prev().prev().attr('src', attachment.url);
            $(button).prev().val(attachment.url);

            wp.media.editor.send.attachment = send_attachment_bkp;
        }

        wp.media.editor.open(button);

        return false;       
    });

});

Ich habe nichts gefunden, um eine benutzerdefinierte Funktion auszulösen, wenn der Editor geschlossen wird. Ich verwende das:

wp.media.editor.open();
$('.media-modal-close, .media-modal-backdrop').one('click', function(){
    //do some stuff
});

oder besser:

var id = wp.media.editor.id();
var editor = wp.media.editor.get( id );
if('undefined' != typeof( editor )) editor = wp.media.editor.add( id );

if ( editor ) {
    editor.on('close', function(){
        //do some stuff
    });
}

Ich hatte nicht viel Gelegenheit, damit zu spielen, aber für diejenigen, die das Galerie-Element nutzen möchten, sollte dieser Code Sie auf den Weg bringen.

Es ist nur ein Ausgangspunkt – es bietet nur eine durch Kommas getrennte Liste von Bild-IDs, aber das sollte ausreichen, um kreativ zu werden.

<input id="custom_media_id" type="text" name="attachment_id" value="">
<a href="#" class="button custom_media_upload" title="Add Media">Add Media</a>

<script type="text/javascript">
  jQuery('.custom_media_upload').click(function() {
    var clone = wp.media.gallery.shortcode;
    wp.media.gallery.shortcode = function(attachments) {
    images = attachments.pluck('id');
    jQuery('#custom_media_id').val(images);
    wp.media.gallery.shortcode = clone;
    var shortcode= new Object();
    shortcode.string = function() {return ''};
    return shortcode;
  }
jQuery(this).blur(); // For Opera. See: http://core.trac.wordpress.org/ticket/22445
wp.media.editor.open();
return false;       
});
</script>

Dadurch wird das Eingabefeld mit einer durch Kommas getrennten Liste der Bild-IDs in der Reihenfolge gefüllt, in der sie im Editor festgelegt wurden (unter Verwendung der neuen Drag-and-Drop-Funktionalität).

Die Funktion erwartet, dass der Shortcode zur Platzierung im Haupteditor zurückgesendet wird, aber wir möchten dies nicht tun, also erstellen wir ein neues Objekt, das eine leere Zeichenfolge zum Einfügen zurückgibt.

Beachten Sie auch, dass dies nicht das Einfügen eines einzelnen Bildes wie oben beschrieben behandelt – es wird nur in den Post-Editor eingefügt. Versuchen Sie also, die beiden Listener zu kombinieren, oder entfernen Sie die entsprechenden Registerkarten.

BEARBEITEN

Nachdem ich einige Zeit damit verbracht habe, den Kern zu betrachten, denke ich, dass dieser ganze Prozess mit der hier beschriebenen Technik tatsächlich einfacher durchgeführt werden kann, aber wie Sie lesen werden, habe ich noch nicht herausgefunden, wie Sie die Bilder beim erneuten Öffnen vorselektieren Medien-Manager.