Utilizzare il caricatore multimediale di Wordpress 3.5 in una meta box?

Ecco un piccolo tutorial su come utilizzare il caricatore multimediale di WP 3.5 nelle opzioni del tema. Questa è la soluzione che ho trovato e funziona perfettamente per me. Fatemi sapere se trovate una soluzione migliore.

Ecco come ho implementato il codice nelle opzioni del mio tema:

jQuery(document).ready(function($){
  $('.stag-metabox-table .button').click(function(e){
  var send_attachment_bkp = wp.media.editor.send.attachment;
  var button = $(this);
  var id = button.attr('id').replace('_button', '');
  wp.media.editor.send.attachment = function(props, attachment){
    $("#"+id).val(attachment.url);
    wp.media.editor.send.attachment = send_attachment_bkp;
  }

  wp.media.editor.open(button);
  return false;

  });
});

Aggiornamento

Questo codice funziona solo nella pagina di modifica degli articoli. Per farlo funzionare nella pagina delle opzioni del tema è necessario aggiungere wp_enqueue_media();

Sto facendo quasi la stessa cosa, non è ancora pronto ma funziona:

nel php:

<input id="default_featured_image" type="text" size="100" name="default_featured_image" value="<?php echo esc_attr( $value ); ?>" />
<?php
do_action( 'media_buttons', 'default_featured_image' ); // il secondo argomento è lo stesso dell'id del `<input>`

Il javascript:

jQuery('#default_featured_image_button').click(function () {
    var formfield = jQuery('#default_featured_image').attr('name');
    tb_show('', 'media-upload.php?type=image&TB_iframe=true');
    return false;
});

window.send_to_editor = function (html) {
    var imgurl = jQuery('img', html).attr('src');
    console.log(jQuery('img', html));
    console.log(html);
    console.log(imgurl);
    // imposta l'URL come valore
    jQuery('#default_featured_image').val(imgurl);
    tb_remove();
};

Questo ti permetterà di caricare e inviare l'URL dell'immagine (di qualsiasi dimensione) all'elemento <input>.
Sto cercando di implementarlo come impostazione e funziona, l'unica cosa che mi serve ora è un modo affidabile per inviare l'ID dell'allegato al <input>

Penso che @janw abbia fatto un ottimo lavoro, ma non sono riuscito a far funzionare una cosa. Jan inserisce il pulsante della media library utilizzando:

do_action( 'media_buttons', 'default_featured_image' );

e poi previene l'azione predefinita con:

jQuery('#default_featured_image_button').click(function () {...

Il problema che ho riscontrato è che inserire un pulsante media in questo modo non assegna un id "default_featured_image_button" al link. In realtà non aggiunge alcun id al link inserito. Ecco cosa ho fatto per farlo funzionare.

Ho aggiunto questa linea alla mia funzione di callback del meta box, subito dopo il mio campo di input:

<input id="upload_logo_button" type="button" value="Immagine dalla Media Library" class="button-secondary" />

Poi ho caricato il mio file jQuery personalizzato e il file CSS thickbox, sempre nel file functions.php, usando:

add_action('admin_enqueue_scripts', 'jhsir_load_image_set_js');

function jhsir_load_image_set_js() {
    wp_enqueue_script( 'jhsir_image_set_script', get_stylesheet_directory_uri() . '/js/image-set.js', array('jquery','media-upload','thickbox') );
    wp_enqueue_style( 'thickbox' );
}

Infine, il mio file image-set.js conteneva il seguente codice:

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

    var formfield = null;

    $('#upload_logo_button, #upload_background_button').click(function() {

        $('html').addClass('Image');

        formfield = $(this).prev('input').attr('name');  
        formfield_id = $(this).prev('input').attr('id'); 

        tb_show( '', 'media-upload.php?type=image&TB_iframe=true' );
        return false;
    });

    // l'utente inserisce il file nel post.
    // esegui il codice personalizzato solo se l'utente ha avviato il processo con il metodo sopra
    // window.send_to_editor(html) è il modo normale con cui WordPress gestisce i dati ricevuti

    window.original_send_to_editor = window.send_to_editor;
    window.send_to_editor = function( html ) {
        var fileurl;

        if(formfield != null) {
            fileurl = $( 'img', html).attr('src');

            $( "#" + formfield_id ).val(fileurl);

            tb_remove();

            $('html').removeClass('Image');
            formfield = null;
        } else {
            window.original_send_to_editor(html);
        }
    };
});

Noterete che ho utilizzato delle variabili per memorizzare il nome e l'id del campo di input che si trova appena prima del link che richiama il jQuery. In questo modo, questo codice può essere utilizzato più volte nella stessa pagina. Basterebbe assegnare una classe a tutti i pulsanti o utilizzare id individuali per i pulsanti nel tuo jQuery, come ho fatto io. Spero che questo possa aiutare qualcuno come la risposta di Jan ha aiutato me.

So che questo è un post vecchio, ma voglio condividere le mie scoperte:

Per aprire l'editor multimediale, chiamiamo questa funzione

wp.media.editor.open();

l'editor multimediale fondamentalmente verificherà la presenza dell'editor tinyMCE (window.tinymce), poi i Quicktags (window.QTags), per passare il contenuto.

Per il mio approccio per ottenere il contenuto, ho assegnato window.QTags con un oggetto personalizzato, che ha un metodo insertContent():

var newObject = {
  insertContent: function(html){
    // per estrarre il percorso dell'immagine
    $(html).find('img').attr('src');
  }
}

// assegna il newObject alla proprietà window.QTags
window.QTags = newObject;

Riferimento: phpxref