gestor de media para wordpress

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.

0 Comentarios
Escribe un comentario

Uso de cookies

Este sitio web utiliza cookies para que usted tenga la mejor experiencia de usuario. Si continúa navegando está dando su consentimiento para la aceptación de las mencionadas cookies y la aceptación de nuestra política de cookies, pinche el enlace para mayor información.

ACEPTAR
Aviso de cookies