Visualizzare il Media Uploader nel proprio plugin su WordPress 3.5

Solo Uploader

Di seguito un esempio di codice, funziona solo nella pagina di modifica degli articoli. Se vuoi utilizzarlo anche su altre pagine, includi la funzione wp_enqueue_media(), vedi il prossimo titolo.

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

  var _custom_media = true,
      _orig_send_attachment = wp.media.editor.send.attachment;

  $('.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', '');

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

      if ( _custom_media ) {
        $("#"+id).val(attachment.url);
      } else {
        return _orig_send_attachment.apply( this, [props, attachment] );
      };

    }

    wp.media.editor.open(button);

    return false;
  });

  $('.add_media').on('click', function() {
    _custom_media = false;
  });

});

Breve spiegazione del Media Manager

1. Per prima cosa includi gli script rilevanti, usa la funzione core: wp_enqueue_media(); La funzione configura tutte le impostazioni necessarie, localizza i testi del menu e carica tutti i file javascript appropriati.

   Puoi aggiungere script personalizzati tramite wp_enqueue_script().

   // Aggiunge anche un controllo per assicurarsi che `wp_enqueue_media` sia stato chiamato una sola volta.
   // @see: http://core.trac.wordpress.org/ticket/22843
   if ( ! did_action( 'wp_enqueue_media' ) )
       wp_enqueue_media();
   

   Aggiungi anche uno script predefinito per l'header personalizzato: wp_enqueue_script( 'custom-header' ); Questo crea un frame di selezione immagini e lo collega a un elemento dell'interfaccia, come un pulsante o un link. Poi chiama un URL a nostra scelta con l'ID dell'immagine selezionata. Questo è lo stesso script utilizzato quando si selezionano le immagini personalizzate per l'header del tema.

2. Aggiungi il pulsante al media manager:

   <?php
   $modal_update_href = esc_url( add_query_arg( array(
       'page'     => 'my_media_manager',
       '_wpnonce' => wp_create_nonce( 'my_media_manager_options' ),
   ), admin_url( 'upload.php' ) ) );
   ?>
   
   <p>
   <a id="choose-from-library-link" href="#"
       data-update-link="<?php echo esc_attr( $modal_update_href ); ?>"
       data-choose="<?php esc_attr_e( 'Scegli un\'immagine predefinita' ); ?>"
       data-update="<?php esc_attr_e( 'Imposta come immagine predefinita' ); ?>"><?php _e( 'Imposta immagine predefinita' ); ?>
   </a> |
   </p>
   

3. Definisci la Funzione di Azione Infine, devi aggiungere del codice per elaborare l'ID dell'immagine che passeremo all'URL data-update-link.

   // Aggiungi all'inizio della nostra pagina data-update-link
   if ( isset($_REQUEST['file']) ) { 
       check_admin_referer( 'my_media_manager_options' );
   
           // Elabora e salva l'ID dell'immagine
       $options = get_option( 'my_media_manager_options', TRUE );
       $options['default_image'] = absint( $_REQUEST['file'] );
       update_option( 'my_media_manager_options', $options );
   }
   

Fonti e suggerimenti:

• http://codestag.com/how-to-use-wordpress-3-5-media-uploader-in-theme-options/
• http://mikejolley.com/2012/12/using-the-new-wordpress-3-5-media-uploader-in-plugins/
• https://github.com/AgencyPMG/PMG-WP-Core/commit/6a5a1ee818b9a8f03bf7df6e9f16b118f999355c
• Filter e Action Hooks: http://core.trac.wordpress.org/ticket/22186#comment:46

Ho pubblicato una risposta anche sul sito stackoverflow.com che potrebbe essere d'aiuto.

Sto utilizzando questo metodo per integrare il media uploader nel mio plugin personalizzato. Forse potrebbe esserti utile.

Nel file principale del tema (index.php) aggiungi questi elementi.

wp_enqueue_style('thickbox'); // carica i file media in WordPress
wp_enqueue_script('thickbox');
wp_enqueue_script( 'media-upload'); 


// carica lo script nell'area amministrativa
function wpss_admin_js() {
     $siteurl = get_option('siteurl');
     $url = $siteurl . '/wp-content/plugins/' . basename(dirname(__FILE__)) . '/js/admin_script.js';
     echo "<script type='text/javascript' src='$url'></script>"; 
}
 add_action('admin_head', 'wpss_admin_js');

Nel file admin_script.js,

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

window.send_to_editor = function(html) {
 imgurl = jQuery('img',html).attr('src');
 jQuery('#wpss_upload_image').val(imgurl);
 tb_remove();

 jQuery('#wpss_upload_image_thumb').html("<img height='65' src='"+imgurl+"'/>");
}

Nel file di amministrazione (admin_settings.php),

<div id="wpss_upload_image_thumb" class="wpss-file">
    <?php if(isset($record->security_image) && $record->security_image !='') { ?>
       <img src="<?php echo $record->security_image;?>"  width="65"/><?php } else {    echo $defaultImage; } ?>
</div>
<input id="wpss_upload_image" type="text" size="36" name="wpss_upload_image" value="" class="wpss_text wpss-file" />
<input id="wpss_upload_image_button" type="button" value="Carica Immagine" class="wpss-filebtn" />

Maggiori dettagli sul mio blog

Ulteriori informazioni http://webexplorar.com/how-to-use-media-uploader-in-wordpress-custom-plugin/

Utilizza questo codice per il selettore di file multimediali. Riceverai il link nella risposta jQuery.

<label for="upload_image">
    <input id="upload_image" type="text" size="36" name="ad_image" value="http://" /> 
    <input id="upload_image_button" class="button" type="button" value="Carica Immagine" />
    <br />Inserisci un URL o carica un'immagine
</label>

<?php
add_action('admin_enqueue_scripts', 'my_admin_scripts');

function my_admin_scripts() {
    if (isset($_GET['page']) && $_GET['page'] == 'my_plugin_page') {
        wp_enqueue_media();
        wp_register_script('my-admin-js', WP_PLUGIN_URL.'/my-plugin/my-admin.js', array('jquery'));
        wp_enqueue_script('my-admin-js');
    }
}

?>

<script>
    jQuery(document).ready(function($){


    var custom_uploader;


    $('#upload_image_button').click(function(e) {

        e.preventDefault();

        //Se l'oggetto uploader è già stato creato, riapri la finestra di dialogo
        if (custom_uploader) {
            custom_uploader.open();
            return;
        }

        //Estendi l'oggetto wp.media
        custom_uploader = wp.media.frames.file_frame = wp.media({
            title: 'Scegli Immagine',
            button: {
                text: 'Scegli Immagine'
            },
            multiple: true
        });

        //Quando un file viene selezionato, prendi l'URL e impostalo come valore del campo di testo
        custom_uploader.on('select', function() {
            console.log(custom_uploader.state().get('selection').toJSON());
            attachment = custom_uploader.state().get('selection').first().toJSON();
            $('#upload_image').val(attachment.url);
        });

        //Apri la finestra di dialogo dell'uploader
        custom_uploader.open();

    });


});
    </script>