Como añadir el gestor de media de WordPress a nuestro plugin

El gestor de media de WordPress nos aporta varias funcionalidades enfocadas a la usabilidad, la más destacada probablemente sea el drag & drop, para subir con facilidad las imágenes tan sólo arrastrandolas al area del gestor.

Este gestor será de inclusión obligatoria si nuestro plugin da la posibilidad o requiere subir imágenes y queremos una buena integración con el aspecto y funcionalidades de WordPress.

Para integrar el gestor en la administación de nuestro plugin necesitaremos usar jquery, y por tanto registrar las funciones que usaremos en nuestro WordPress con nuestro plugin.

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

} }

Con esta función registramos el js en nuestro WordPress únicamente en la página de nuestro plugin, con slug “my_plugin_page” de manera que no se cargará en otras páginas.

El html sobre el que trabajaremos en este ejemplo será:

<label for="upload_image">
   <input id="upl_img" type="text" size="42" name="upl_img" value="" />
   <input id="upl_btn" type="button" value="<?php _e(”Upload image”,”my_plugin”); ?>" />
   <br /><?php _e(“Enter a URL or upload an image”,”my_plugin”); ?>
</label>

El código jquery para lanzar el gestor es:

jQuery(document).ready(function($){
   var custom_uploader;
   jQuery('#upl_btn').click(function(e) {
       e.preventDefault();
       //If the uploader object has already been created, reopen the dialog
       if (custom_uploader) {
           custom_uploader.open();
           return;
       }
       //Extend the wp.media object
       custom_uploader = wp.media.frames.file_frame = wp.media({
           title: '<?php _e(”Upload image”,”my_plugin”); ?>',
           button: {
               text: '<?php _e(”Upload image”,”my_plugin”); ?>'
           },
           multiple: false
       });
       //When a file is selected, grab the URL and set it as the text field's value
       custom_uploader.on('select', function() {
           attachment = custom_uploader.state().get('selection').first().toJSON();
           jQuery('#upl_img').val(attachment.url);
       });
       //Open the uploader dialog
       custom_uploader.open();
   });
});

De esta manera cuando se clicka sobre el botón crea una instancia nueva de wp.media y la configura para aceptar un único archivo (ya que el cmapo de texto acepta una única url). Entonces enlaza una función que se encargará de extraer la dirección de la imagen y ponerla en el input.