Usar el cargador de archivos de WordPress en plugins para el panel de administración

Póngamonos en situación. Tenemos un plugin para el panel de administración de WordPress, y queremos añadirle la posibilidad de insertar imágenes, o cualquier otro archivo, mediante el cargador multimedia de WordPress en plugins,que para eso está. Quedaría mucho más profesional que usar php, ahorraríamos tiempo, y además, todo lo que subamos se almacenaría según el sistema de subida de archivos de WordPress, es decir, en wp-contents/uploads/año/mes. Todo son ventajas.

Si esto es lo que quieres, y no lo has conseguido aun, no te preocupes, torres más altas han caído, y nosotros te vamos a contar el secreto. Es muy sencillo de hacer.

Lo vamos a dividir en tres pasos: HTML, PHP y JS.

1. HTML

Empecemos por lo fácil. Lo que vamos a hacer básicamente es un cuadro de texto y un botón mediante inputs.

<input type="text" name="upload_image" id="upload_image" value="" size='40' />
<input type="button" class='button-secondary' id="upload_image_button" value="Subir imagen" />

No nos hace falta más, aunque siempre podemos adornarlo con etiquetas, tablas, estilos, etc. Lo importante para la funcionalidad van a ser los id de cada input: upload_image y upload_image_button. Podemos cambiar esto, pero luego tendréis que cambiarlo en el script js, que no se nos olvide. [Detalle extra: en el botón, hemos añadido la clase “button-secondary”. Esto hace que los botones se vean redondeados y mas bonitos, ¿Lo sabías?]

2. PHP

Tenemos que añadir esto en el archivo principal de nuestro plugin (por si tienes alguno más). Lo que hace es añadir los scripts necesarios para que el cargador se muestre: jQuery, thickbox, media-upload y un my-script.js que luego crearemos a nuestro gusto. Salvo este último, no tienes que preocuparte de buscar o instalar los scripts: ya vienen de serie.

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

Y ahora, hacemos un cambio importante:

– Donde pone $_GET[‘page’] == ‘my_plugin_page‘, cambiaremos “my_plugin_page” por la pagina de nuestro plugin. Los plugins en el panel de administración de WordPress funcionan normalmente bajo la ruta http://urldeejemplo.com/wp-admin/admin.php?page=mi_plugin. Bien, el valor del parámetro page, que en este ejemplo es “mi_plugin“, es lo que tenemos que escribir en lugar de “my_plugin_page“.

Al haber añadido esto al archivo principal de nuestro plugin, podemos usarlo donde queramos. Como en todas las páginas de nuestro plugin se cumple la condición de que $_GET[‘page’] == ‘mi_plugin‘, tendremos la funcionalidad disponible donde queramos.

Hecho esto, pasemos al último paso.

3. Javascript

Vamos a crear un archivo .js. Podemos llamarlo como queramos, pero luego recordad cambiar la linea del bloque PHP:

wp_register_script(‘my-upload’, WP_PLUGIN_URL.’/my-script.js‘, array(‘jquery’,’media-upload’,’thickbox’));

sustituyendo ‘/my-script.js‘ por el nombre de nuestro script. Dentro, escribimos el siguiente bloque de código:

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 bloque es el que dota de funcionalidad al botón y muestra el cargador de WordPress cuando lo llamamos. El segundo envía la ruta de la imagen al campo de texto cuando pulsamos en “Insertar en la entrada”.

Si ahora probamos nuestro nuevo botón… Voilà! Aparece el cargador de archivos de WordPress. Ahora probemos a subir una imagen. Se subirá a wp-content/uploads/año/mes, y cuando pulsemos en el botón “Insertar en la entrada”, la URL de la imagen pasará a nuestro input de texto.

Esto está muy bien si sólo queremos subir imágenes… ¿Y si queremos subir cualquier tipo de archivo?

Entonces tenemos que sustituir una línea en el segundo bloque js:

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

Con esto, la URL de cualquier archivo que subamos pasará al campo de texto cuando pulsemos “Insertar en la entrada”.

Vamos un poco más allá. Supongamos que queremos dos (o más) cargadores en nuestra web, uno para imagenes y otro para PDFs, por poner un ejemplo práctico. Entonces debemos añadir más inputs, con ids diferentes, copiar el primer bloque de javascript cambiando las id, y editar un poco el segundo bloque para hacerlo automático. Siguiendo el ejemplo:

1- HTML

<input type="text" name="upload_image" id="upload_image" value="" size='40' />
<input type="button" class='button-secondary' id="upload_image_button" value="Subir imagen" />
<br/>
<input type="text" name="upload_pdf" id="upload_image" value="" size='40' />
<input type="button" class='button-secondary' id="upload_pdf_button" value="Subir PDF" />

2- PHP (No se modifica)

3- JS

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;
});

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

window.send_to_editor = function(html) {
imgurl = jQuery(html).attr('href');
jQuery('#'+formfield).val(imgurl);
tb_remove();
}

});

Si os fijáis, hemos:

– Añadido otro input text y otro input button, con ids distintas a las que teniamos (“upload_pdf” y “upload_pdf_button”).
– Copiado el primer bloque del .js, cambiando los ids.
– En el bloque de window.send_to_editor, hemos cambiado la tercera línea. En lugar de establecer a mano a qué input se va el contenido, hemos escrito ‘#’+formfield. formfield es un valor que se establece en la funcionalidad .click, y guarda el ‘name’ del campo que estamos modificando.

¡Ya está! Ya hemos añadido a nuestro plugin las posibilidades de subida y almacenamiento de archivos de la libreria multimedia de WordPress. Como véis, es muy simple. Nos ha ahorrado tener que gestionarlo todo a mano con php, y por tanto, muchísimo tiempo.

¡Espero que os haya sido útil!

Fuente original: Webmaster-Source.com

¿Te ha gustado el artículo?
Sé el primero en calificar esta publicación.
1 Star2 Stars3 Stars4 Stars5 Stars
Loading...
Artículo escrito por

¡Exprésate! Dejanos tu comentario

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

9 Comentarios

arian ledo

se me keda en negro el dashboard, que pudiera estar sucediendo? gracias

Alberto

Le hice una pequeña modificación y funciono a la perfección, muchas gracias comparto mi código <div class="content-gallery"> <!-- Aquí se añadirán las etiquetas img que devuelve el upload --> </div> <input type="text" name="upload_image" id="upload_image" value="" size='40' /> <input type="button" class='button-secondary' id="upload_image_button" value="Subir imagen" /> <script type="text/javascript"> jQuery(document).ready(function() { var json = [], url_img, upload_image; jQuery('#upload_image_button').click(function() { tb_show('', 'media-upload.php?type=image&amp;TB_iframe=true'); return false; }); // el parametro html contiene la etiqueta img con la imagen window.send_to_editor = function(html) { // en la variable url_img obtenemos la url de la imagen url_img = jQuery(html).attr("src"); // recuperamos el valor del input donde guardaremos las nuevas imagenes upload_image = jQuery("#upload_image").val(); // Insertamos la etiqueta imagen en el div content-gallery para que podamos visualizarlo jQuery(".content-gallery").append( html ); // comprobamos que el input upload_image tenga algún valor if( upload_image != '' ){ // el valor que tenga el input será una cadena en formato json json = JSON.parse( upload_image ); // aquí convertimos la cadena en un json javascript } // la url recuperada lo añadimos al json como un valor nuevo json.push({ "url_img": url_img }); // tenemos un json js ahora lo convertimos a cadena para guardarlo en el input jQuery('#upload_image').val( JSON.stringify(json) ); tb_remove(); } }); </script>

Daniel P Z

a mi si  me funciona a la perfección, pero yo no lo use para complementar un plugin, sino como parte del panel de las opciones de un theme que estoy desarrollando, gracias amigo.!

carlos

Hola muy bueno el tutorial me sube la imagen pero no me la muestra solo me sale la ruta de la imagen no la imagen como lo podría poner gracias y un  saludo

Francisco Villen

Gran artículo. Me ha resultado muy útil. Muchas gracias.

pablo llanos

Alguna manera para poder cargar varias imagenes y guardarlas

Juan Viñas

¿Usas Firebug? Es un complemento para Firefox . Tenlo abierto cuando pulses el botón, en la pestaña "consola". Seguramente tengas algun conflicto con JavaScript, y con Firebug puedes ver qué está fallando.

Carlos

no funca e_e al darle click al campo para subir imagenes no pasa nada, no aparece el administrador de ficheros de wordpress

juanjedi

Usar el cargador de archivos de WordPress en plugins para el panel de administración http://t.co/G7LrYzEG >> via @codigonexo