Seleccionar página

about-media

Ayer os hablaba de cómo implementar el Media Uploader de WordPress en nuestros plugins. Bien, como ya os comentaba, es un Media Uploader antiguo, pequeño, y menos vistoso. WordPress actualmente ya casi no utiliza este Media Uploader, que se mantiene por motivos de compatibilidad. Generalmente utiliza uno nuevo, más grande, más usable. Hoy os explico cómo implementar el nuevo Media Uploader de WordPress 3.5. ¿Por qué digo de WordPress 3.5, si vamos por la 3.8.1? Porque este nuevo sistema se implementó con la versión 3.5, fue uno de los cambios más destacados de WordPress en esa versión.

Vamos a partir del mismo supuesto que con el Media Uploader antiguo. Son tres pasos, HTML, PHP y JavaScript, pero vosotros decidís dónde lo implementáis: en una página de un plugin, de un theme, en una taxonomía…

HTML

No hay nada que cambiar en este punto, lo dejaré igual que en el ejemplo de ayer.

Por si habéis accedido directamente a esta entrada sin ver la anterior, voy a volver a explicar lo que tenemos aquí. Lo más importante son los dos elementos 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

Los requisitos PHP se simplifican con respecto al Media Uploader antiguo. El código a añadir se queda así:

Como podemos comprobar, es mucho más simple que en lo visto con el Media Uploader antiguo, donde teníamos que añadir thickbox y media-upload por separado. Aquí añadimos la parte de media upload con una función dedicada a ello, la primera, wp_enqueue_media. Luego registramos y agregamos nuestro script propio, que llamaremos admin.js. Podeis llamarlo como queráis, en realidad.

JavaScript

El archivo admin.js también es bastante diferente. Tenemos que crearlo en la carpeta especificada anteriormente, y copiar este código:

Es muy diferente a lo que ya hemos visto anteriormente, pero también mucho más potente. Ahora podemos establecer ciertas opciones, como las de título y texto del botón.

Y con esto, ya hemos aprendido a implementar el nuevo Media Uploader de WordPress 3.5. Si os queda alguna duda, utilizad el formulario de comentarios aquí abajo.

“Ley de Alzheimer de la programación: si lees un código que escribiste
hace más de dos semanas es como si lo vieras por primera vez”

.- Via Dan Hurvitz