Wordpress 3.5 benutzerdefinierte Medien-Upload für Ihre Themenoptionen

Question

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

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

Ich fand mit dieser Lösung, die für einige von Ihnen nützlich sein kann. Vielen Dank für Ihre Rückmeldung zum Code oder zu Ihren Verbesserungen!

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 in der attachment Variablen enthalten ist, um zu sehen möchten, dass Sie ein console.log(attachment) oder alert(attachment) tun können.

Answer 1

Vergessen Sie nicht wp_enqueue_media (neu in 3.5) zu verwenden, wenn you'r nicht auf der Post bearbeiten Seite

die alten Medien Uploadbox und nutzen Sie dies tun können:

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

Answer 2

I Nichts gefunden, um eine benutzerdefinierte Funktion auszulösen, wenn der Editor geschlossen wird. Ich verwendet dieses:

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 
    }); 
} 

Answer 3

Ich habe nicht viel Chance zu spielen mit diesem gehabt, aber für diejenigen, die Galerie-Element zu nutzen, sollte dieser Code setzen Sie auf Ihrem Weg.

Es ist nur ein Startpunkt - es bietet nur eine durch Kommas getrennte Liste von Bild-IDs, aber das sollte genug sein, um kreativ zu sein.

<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> 

Dies wird das Eingabefeld mit einer durch Kommata getrennte Liste der Bild-IDs in der Reihenfolge, wie sie im Editor gesetzt wurden bevölkern (die neuen Drag-and-Drop-Funktionalität).

Die Funktion erwartet, dass der Shortcode für die Platzierung im Haupteditor zurückgesendet wird. Dies wollen wir jedoch nicht tun. Daher erstellen wir ein neues Objekt, das eine leere Zeichenfolge zum Einfügen zurückgibt.

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

EDIT

einige Zeit Blick auf dem Kern verbracht hat, ich denke, der ganze Prozess kann tatsächlich einfacher gemacht werden, um die Technik here angelegt, aber wie Sie lesen habe ich noch nicht herausgefunden wie Sie die Bilder beim erneuten Öffnen des Medienmanagers auswählen

Answer 4

Ich änderte den Code ein bisschen mehr, um es auf einmal für mehrere Felder verwendbar:

HTML:

<!-- 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;  
    }); 

}); 

Answer 5

Sie geht darüber in einer Art und Weise das war nicht beabsichtigt. Ihr JavaScript Code sollte wahrscheinlich in etwa 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(); 
});