Utilizarea încărcătorului media WordPress 3.5 în meta box-uri?

Iată un mic tutorial despre cum să utilizezi încărcătorul media din WP 3.5 în opțiunile temei. Aceasta este soluția la care am ajuns și funcționează perfect pentru mine. Spune-mi dacă găsești o soluție mai bună.

Iată cum am implementat codul în opțiunile temei mele:

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;

  });
});

Actualizare

Acest cod funcționează doar pe pagina de editare a articolului. Pentru a-l face să funcționeze și pe pagina de opțiuni a temei, trebuie să adaugi wp_enqueue_media();

Fac aproape același lucru, nu este încă gata, dar funcționează:

În 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' ); // al doilea argument este același cu id-ul `<input>`

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);
    // setează URL-ul ca valoare
    jQuery('#default_featured_image').val(imgurl);
    tb_remove();
};

Aceasta vă va permite să încărcați și să trimiteți URL-ul imaginii (de orice dimensiune) către elementul <input>.
Încerc să fac asta ca o setare și funcționează. Singurul lucru de care am nevoie acum este o metodă sigură de a trimite ID-ul atașamentului către <input>.

Cred că @janw a rezolvat acest lucru complet corect, dar nu am reușit să fac să funcționeze un anumit aspect. Jan inserează butonul bibliotecii de media folosind:

do_action( 'media_buttons', 'default_featured_image' );

și apoi interceptează acțiunea implicită folosind:

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

Problema cu care m-am confruntat este că inserarea unui buton de media în acest fel nu atribuie un id de "default_featured_image_button" linkului. De fapt, nu adaugă niciun id pe linkul inserat. Așa că iată ce am făcut pentru a rezolva problema.

Am adăugat această linie în funcția mea de callback pentru meta box, imediat după câmpul de input:

<input id="upload_logo_button" type="button" value="Imagine din Biblioteca Media" class="button-secondary" />

Apoi am încărcat fișierul meu jQuery personalizat și fișierul CSS thickbox, tot în fișierul functions.php, folosind:

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

În final, fișierul meu image-set.js a inclus următoarele:

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

    // utilizatorul inserează fișierul în post.
    // rulează doar personalizarea dacă utilizatorul a pornit procesul folosind procedura de mai sus
    // window.send_to_editor(html) este modul în care wp gestionează în mod normal datele primite

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

Veți observa că am folosit variabile pentru a stoca numele și id-ul câmpului de input care este chiar înaintea linkului care apelează jQuery. În acest fel, acest cod poate fi folosit în mod repetat pe aceeași pagină. Va trebui doar să atribuiți o clasă tuturor butoanelor sau să folosiți id-uri individuale pentru butoane în jQuery, așa cum am făcut eu. Sper că acest lucru va ajuta pe cineva, așa cum răspunsul lui Jan m-a ajutat pe mine.

Știu că acesta este un post vechi, dar vreau doar să împărtășesc descoperirile mele:

Pentru a deschide editorul media, apelăm această funcție

wp.media.editor.open();

editorul media va verifica în mod esențial editorul tinyMCE (window.tinymce), apoi Quicktags (window.QTags), pentru a transmite conținutul.

Pentru abordarea mea de a obține conținutul, am atribuit window.QTags cu un obiect personalizat, care are o metodă insertContent():

var newObject = {
  insertContent: function(html){
    // pentru a extrage sursa imaginii
    $(html).find('img').attr('src');
  }
}

// atribuie newObject proprietății window.QTags
window.QTags = newObject;

Referință: phpxref