Cómo mostrar el Cargador de Medios en un plugin propio en WordPress 3.5

Solo Subidor de Archivos

A continuación un ejemplo de código, funciona solo en la página de edición de entradas. Si también lo usarás en otras páginas, entonces incluye la función wp_enqueue_media(), mira el siguiente encabezado.

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 explicación del Gestor de Medios

1. Primero incluye los scripts relevantes, usa la función del núcleo: wp_enqueue_media(); La función configura todos los ajustes relevantes, localiza el texto del menú y carga todos los archivos javascript apropiados.

   Puedes añadir un script personalizado mediante wp_enqueue_script().

   // También añade una comprobación para asegurarse de que `wp_enqueue_media` solo se ha llamado una vez.
   // @see: http://core.trac.wordpress.org/ticket/22843
   if ( ! did_action( 'wp_enqueue_media' ) )
       wp_enqueue_media();
   

   Añade también un script predeterminado para el encabezado personalizado: wp_enqueue_script( 'custom-header' ); Esto crea un marco de selección de imágenes y lo vincula a un elemento de la interfaz, por ejemplo un botón o enlace. Luego llama a una URL de nuestra elección con el ID de la imagen seleccionada. Este es el mismo script que se usa al seleccionar imágenes de encabezado personalizadas del tema.

2. Añade el botón al gestor de medios:

   <?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( 'Elige una Imagen Predeterminada' ); ?>"
       data-update="<?php esc_attr_e( 'Establecer como imagen predeterminada' ); ?>"><?php _e( 'Establecer imagen predeterminada' ); ?>
   </a> |
   </p>
   

3. Define la Función de Acción Finalmente, necesitas añadir algo de código para procesar el ID de la imagen que pasaremos a la URL data-update-link.

   // Añade al inicio de nuestra página data-update-link
   if ( isset($_REQUEST['file']) ) { 
       check_admin_referer( 'my_media_manager_options' );
   
           // Procesa y guarda el ID de la imagen
       $options = get_option( 'my_media_manager_options', TRUE );
       $options['default_image'] = absint( $_REQUEST['file'] );
       update_option( 'my_media_manager_options', $options );
   }
   

Fuentes y consejos:

• 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
• Filtros y Ganchos de Acción: http://core.trac.wordpress.org/ticket/22186#comment:46

He publicado una respuesta en el sitio stackoverflow.com que podría ser de ayuda.

Estoy utilizando este método para integrar el cargador de medios en mi plugin personalizado. Quizás esto pueda servir.

En el archivo principal del tema (index.php) añade lo siguiente:

wp_enqueue_style('thickbox'); // carga los archivos multimedia en WordPress
wp_enqueue_script('thickbox');
wp_enqueue_script( 'media-upload'); 


// carga el script en el área de administración
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');

En el archivo 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+"'/>");
}

En el archivo de administración (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="Subir imagen" class="wpss-filebtn" />

Más detalles en mi blog

Más información: http://webexplorar.com/how-to-use-media-uploader-in-wordpress-custom-plugin/

Simplemente usa este código para el cargador de medios. Obtendrás el enlace en la respuesta de 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="Subir imagen" />
    <br />Ingresa una URL o sube una imagen
</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();

        //Si el objeto uploader ya ha sido creado, reabre el diálogo
        if (custom_uploader) {
            custom_uploader.open();
            return;
        }

        //Extiende el objeto wp.media
        custom_uploader = wp.media.frames.file_frame = wp.media({
            title: 'Seleccionar imagen',
            button: {
                text: 'Seleccionar imagen'
            },
            multiple: true
        });

        //Cuando se selecciona un archivo, toma la URL y la asigna como valor del campo de texto
        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);
        });

        //Abre el diálogo del cargador
        custom_uploader.open();

    });


});
    </script>