Seleccionar página

wordpress-uploader-dialog

Seguro que alguna vez has necesitado establecer un campo “Imagen” en un panel de opciones, un tipo de entrada personalizado, una taxonomía… Si hasta ahora obligabas al usuario final a introducir la URL de la imagen, en lugar de utilizar el cómodo Media Uploader, tranquilo, que hoy vas a aprender a implementar el Media Uploader de WordPress.

WordPress tiene dos modelos de Media Uploader. El primero, el más antiguo, es menos ancho y menos “bonito”. El segundo, introducido en WordPress 3.5, ocupa toda la pantalla, y es más útil. Hoy aprenderemos a implementar el primero, pero muy pronto escribiré una entrada dedicada al segundo.

La implementación consta de 3 partes: el HTML, las funciones PHP, y la integración JavaScript. Aunque puede resultar muy sencillo explicarlo con un ejemplo simple, realmente, la cosa se difumina bastante cuando lo aplicamos a un caso práctico real. Así que voy a procurar explicarlo de forma que se entienda, y que podáis luego replicar en casos reales.

HTML

Pongamos un ejemplo básico.

Vamos a entender que aquí tenemos dos elementos muy importantes, los dos input.

El primero es un input de tipo texto. Cuenta con un atributo id y un atributo name. En este caso, ambos atributos tienen el mismo valor, “upload_image”, pero esto no es obligatorio.

El atributo id lo usaremos luego, en la parte JavaScript, para reconocer el campo de texto al que enviaremos la URL de la imagen subida. El atributo name lo usaremos en nuestro sistema de guardado de información, que no cubrimos en este tutorial. Lo que quiero decir es que, si en vuestro método save, este campo se reconoce con otro nombre (como por ejemplo, si lo asignamos a una taxonomía, term_meta[imagen]), estableced en el atributo name ese otro nombre, y dejad el atributo id con el valor “upload_image”.

El segundo input es el botón de subir imagen. Con nuestro JavaScript abriremos el Media Uploader al pulsarlo.

PHP

Si estamos trabajando con un plugin, esto debemos escribirlo en el archivo principal de funciones del plugin. Si estamos en un Theme, en functions.php. Básicamente, lo que vamos a hacer es llamar a los scripts que necesitamos para que el Media Uploader funcione.

Resumiendo, agregamos a WordPress los scripts media-upload, thickbox, y un script propio que es el siguiente paso del plugin. Agregamos el estilo de thickbox. Por último, si estamos en la página correcta (la de nuestro plugin en la que queremos que aparezca el botón de Subir Imagen), añadimos las acciones a admin_print_scripts y admin_print_styles.

JavaScript

Vamos a darle contenido al archivo media-uploader-script.js que hemos declarado antes.

Queda todo explicado en los comentarios. Como veis, es importante mantener #upload_image y #upload_image_button (o cualquier otra id que queramos, sí, pero en el HTML y en el JavaScript deben llamarse igual).

Todo listo. Ahora deberíais comprobar que, al pulsar el botón de Subir Imagen, se abre una ventana modal con el Media Uploader.

“Copiar código de internet y pegarlo en un sistema para producción
es como usar un chicle encontrado en la calle”
.- Mike Johnson