web-dev-qa-db-ger.com

WordPress 3.5 Upload von benutzerdefinierten Medien für Ihre Designoptionen

WordPress 3.5 wurde vor kurzem veröffentlicht. Ich habe das WordPress Media Upload System via Thickbox und window.send_to_editor] Für einige Optionen in meinem WordPress Thema (Hintergründe) verwendet , Logos etc ...).

Aber wie Sie wissen WordPress hat einen neuen Medien-Manager integriert, ich wollte diese neue Funktion verwenden, um Bilder/Dateien als benutzerdefinierte Felder hochzuladen. Also habe ich den Morgen damit verbracht, einen Weg zu finden, das Gewünschte zu erreichen Ergebnis.

Ich fand mit dieser Lösung, die für einige von Ihnen nützlich sein kann. Vielen Dank für Ihr Feedback zum Code oder zu den Verbesserungen, die Sie sich vorgenommen 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 in der Variablen attachment enthaltenen Einstellungen anzeigen möchten, können Sie eine console.log(attachment) oder alert(attachment) ausführen.

66
Mattpx

Vergessen Sie nicht, wp_enqueue_media (Neu in 3.5) zu verwenden, wenn Sie sich nicht auf der Nachbearbeitungsseite befinden

So verwenden Sie die alte Medien-Upload-Box:

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

Sie gehen es auf eine Weise an, 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();
});
34

Ich habe diesen Code etwas weiter modifiziert, damit er für mehrere Felder gleichzeitig verwendet werden kann:

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

});
7
Phil Johnston

Ich habe nichts gefunden, um eine benutzerdefinierte Funktion auszulösen, wenn der Editor geschlossen wird. Ich benutze 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
    });
}
4
Xaver

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

Es ist nur ein Anfangspunkt - es enthält 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 (mithilfe der neuen Drag & Drop-Funktion).

Die Funktion erwartet, dass der Shortcode zur Platzierung im Haupteditor zurückgesendet wird. Wir möchten dies jedoch nicht tun. Daher 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 Bilds wie oben beschrieben ermöglicht, sondern nur das Einfügen in den Post-Editor. Versuchen Sie also, die beiden Listener zu kombinieren, oder entfernen Sie die entsprechenden Registerkarten.

[~ # ~] edit [~ # ~]

Nachdem ich einige Zeit mit dem Blick auf den Kern verbracht habe, denke ich, dass dieser gesamte Prozess mit der beschriebenen Technik einfacher durchgeführt werden kann hier , aber wie Sie gleich lesen werden, habe ich noch nicht herausgefunden, wie ich ihn vorbereiten soll. Wählen Sie die Bilder aus, wenn Sie den Medienmanager erneut öffnen.

3
Mark