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

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&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