Cómo utilizar el cargador de archivos de WordPress en tu Plugin o Tema

Wordpress uploader dialog

WordPress posee un excelente cuadro de diálogo cargador de media que es utilizado en las páginas del editor. ¿No sería exitante el poder utilizarlo para manejar las subidas de imágenes en un plugin o tema que estás desarrollando?

Es ridículamente simple implementarlo. Primero pon el siguiente código en la página de administración de tu plugin o tema. Esto de da un texto para la URL de la imagen, y un botón que abrirá el cuadro de diálogo del cargador de media.

<tr valign="top">
<th scope="row">Upload Image</th>
<td><label for="upload_image">
<input id="upload_image" type="text" size="36" name="upload_image" value="" />

<input id="upload_image_button" type="button" value="Upload Image" />
<br />Enter an URL or upload an image for the banner.
</label></td>
</tr>

Ahora necesitamos poner en cola algunos scripts y estilos. Para hacerlo incluimos el siguiente código en nuestro plugin o tema:

function my_admin_scripts() {
wp_enqueue_script('media-upload');
wp_enqueue_script('thickbox');
wp_register_script('my-upload', WP_PLUGIN_URL.'/my-script.js', array('jquery','media-upload','thickbox'));
wp_enqueue_script('my-upload');
}

function my_admin_styles() {
wp_enqueue_style('thickbox');
}

if (isset($_GET['page']) && $_GET['page'] == 'my_plugin_page') {
add_action('admin_print_scripts', 'my_admin_scripts');
add_action('admin_print_styles', 'my_admin_styles');
}

Necesitamos primero los scripts media-upload y thickbox, así también como jQuery, que ya está incluido. Necesitamos registrar nuestro propio archivo JavaScript, my-script.js, el cual manejará la funcionalidad del cargador de media. También necesitamos cargar la hoja de estilos de thickbox en la próxima función.

El bloque if (…) se asegura de que los scripts y estilos sólo serán incluidos si el usuario se encuentra en una página de administración específica. Si te fijas en la página de administración de tu plugin o tema, la URL debe mostrar una cadena ?page=un_nombre al final. Sustituye my_plugin_page por ese nombre.

Ahora para la parte que llama el cargador: el JavaScript. El siguiente código debe ser colocado en el archivo my-script.js que incluimos anteriormente.

jQuery(document).ready(function() {

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

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

});

El primer evento click() abre un diálogo ThickBox cuando el botón “Upload Image” es cluiqueado, y carga la página del cargador dentro de él. También almacena el nombre del campo de entrada URL en una variable, para su posterior uso.

La segunda función sustituye la función send_to_editor() del media-upload. Cuando el botón “Insert into Post” es cliqueado en el diálogo del cargador, se llama esta función. Colecta la URL de la imagen que fue subida, la pasa al campo del formulario que la está esperando, y cierra el diálogo ThickBox.

Vía

14 Respuestas a Cómo utilizar el cargador de archivos de WordPress en tu Plugin o Tema

  1.  

    He estado buscando informacion relacionada con inversiones y encontre esta
    pagina. Esta muy buena.

  2.  

    Tengo una pregunta no se que no nombre insertar en vez de my_plugin_page para que trabaje el upload.

    Saludos

  3.  

    Yo tengo un formulario de subida de archivos e imágenes que funciona bien, pero bueno, tiene el típico botón “examinar” que no me agrada mucho y el media uploader de wordpress si, y este código en particular parece realizar lo que deseo, pero lo que quisiera saber es como agregarlo por ejemplo en una página personalizada, no en la administración de wordpress, si no en una página que cree para que el usuario pueda publicar desde allí. Muchas gracias.

    • Estaba tratando de utilizar jQuery desde una página, pero me dio muchos problemas.

       
  4.  

    me funciono a la perfeccion el codigo, pero solo lo hace en firefox, en los otros navegadores no!, verifque el codigo fuente genereado y no recnoce la ruta del script media-upload ni del jquery, porque crees que pase eso?????”

    • Revisá bien cómo PHP está generando la ruta.

       
  5.  

    Sabes como utilizarlo con varios campos de texto (para varias imágenes)?

    Un saludo y gracias!

  6.  

    Vale, ya lo solucioné cambiando el nombre de las funciones. ;P

  7.  

    Hola, utilicé este sistema en un nuevo plugin, el problema es que no funciona si ya hay otro plugin instalado utilizando el mismo sistema.

    Como podria solucionar esto?

    Gracias.

  8.  

    agregue este upload en mi theme, el problema es que tengo wordpress en espanol y no funciona, cuando lo uso en ingles si, alguien puede ayudarme con eso?

    • El idioma de la instalación no debería ser inconveniente. ¿Algún mensaje de error?. Si no tienes mensajes de errores verifica a través de tu navegador el código fuente de la página donde lo estás utilizando en busca de algún Warning o Error.

       
  9.  

leave your comment