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

WordPress   |   9 Comentarios

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&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&TB_iframe=true');
return false;
});

jQuery('#upload_pdf_button').click(function() {
formfield = jQuery('#upload_pdf').attr('name');
tb_show('', 'media-upload.php?type=image&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?

(7 votos, promedio: 4,29 sobre 5)

Loading...

Suscríbete. Déjanos tu email y recibe contenido genial cada mes