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 Comments

  1. 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.

  2. 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?????»

  3. 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.

    1. 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.

Deja una respuesta

Tu dirección de correo electrónico no será publicada. Los campos obligatorios están marcados con *

©2024 Teofilo Israel WordPress Video Theme by WPEnjoy