Seleccionar página

images-categoriesHace ya un tiempo expliqué en el blog cómo asociar campos personalizados a Categorías de WordPress, lo cual también se extiende a cualquier tipo de Taxonomías personalizadas que hayamos creado.

En su día, el ejemplo que puse era muy básico. Se asoció un campo de texto y un campo de Imagen. Este campo de Imagen era, en realidad, otro campo de texto, y el usuario final se veía obligado a introducir la URL de la imagen que quisiera asignar a la categoría.

Esto es bastante molesto. El usuario tiene que subir la imagen mediante la libreria de medios, copiar la URL, volver a la categoría, pegar la URL y guardar. Bueno, en el caso en que se usaba una imagen externa a WordPress, era útil, puesto que la URL ya la traíamos desde fuera. Pero lo realmente interesante es establecer un botón de “Subir Imagen”, para que se abra un cuadro de diálogo de subir imágenes, al igual que cuando pulsamos en Añadir Objeto en una entrada. Esto no inhabilita la segunda opción, puesto que también nos permite copiar URLs de imágenes externas.

Hace también pocos días expliqué cómo implementar el Media Uploader de WordPress en nuestros plugins y themes. Lo hice en dos versiones: la versión del Media Uploader antigua, y la nueva versión de WordPress 3.5.

Es hora de poner en práctica lo aprendido con los ejemplos básicos. Refresquemos la memoria.

Para añadir un campo a una categoría, necesitamos tres funciones en nuestro plugin o en nuestro functions.php:

  1. La primera añade los campos que queramos a la pantalla de creación de categoría.
  2. La segunda añade los campos a la pantalla de edición de categoría.
  3. La tercera guarda el contenido de ambas pantallas.

Y para añadir un botón de Subir Imagen, también lo dividiamos en 3 pasos: HTML, PHP y JavaScript.

Al combinar todo esto, obtenemos que la parte HTML se corresponde con las funciones 1 y 2; la parte PHP se añade a las funciones del plugin o al archivo functions.php del Theme; y el JavaScript es un archivo que simplemente hay que añadir. En definitiva, lo único que cambia son las funciones 1 y 2.

Sería muy interesante que antes de empezar leyérais y pusiérais en práctica lo visto en la asociación de campos personalizados a categorías, así como la integración de los media uploaders de WordPress, tanto el antiguo como el nuevo. Vamos a partir de lo que ya vimos en el primer artículo, y a añadirle el Media Uploader de WordPress 3.5, aunque el procedimiento es igual para los dos y sólo varía en la parte de PHP y JavaScript, que hay que añadir cosas distintas dependiendo del Media Uploader que utilicemos. El HTML, es decir, las funciones de creación, modificación, y también la de guardado aunque no es parte de lo que yo llamaría el HTML, son las mismas en ambos casos.

Las funciones de creación, modificación y guardado del nuevo campo Imagen de las categorías

category-images-2

Formulario de creación de categorías

Es interesante recordar que cuando decimos “Categorías” también nos referimos a cualquier taxonomía que hayamos creado nosotros. Simplemente habrá que sustituir la palabra “category” por el slug de la taxonomía correspondiente, eso lo veremos luego.

Dos cositas.

La primera, lo que apuntaba antes. Si estamos editando otra taxonomía distinta a las categorías, en el add_action debemos sustituir ‘category_add_form_fields’ por ‘slugdetaxonomia_add_form_fields’, donde slugdetaxonomia es el slug de vuestra taxonomía, claro.

La segunda, hay varios cambios con respecto al artículo original de asociación de campos personalizados a categorías. Por supuesto, he eliminado el campo de texto, puesto que no nos interesaba en este ejemplo. El primer input que vemos tiene dos campos, id y name, que son diferentes. Recordemos que es importante para guardar los datos que name se llame term_meta[imagen], puesto que todos los campos personalizados (campos meta) del término se guardan en term_meta, como veremos después. El segundo input es nuevo, es el botón que abrirá el cuadro de diálogo del Media Uploader.

Vamos con la función de la vista de edición de categoría.

Por supuesto, también hay mucha diferencia con el código visto en el artículo original. Una vez más, he eliminado el campo de texto porque no lo necesitamos para el ejemplo. Igual que en la primera función, el primer input tiene dos atributos, id y name, con valores distintos, por la misma razón que antes. Ahora rellenaremos value en caso de que anteriormente hayamos guardado una imagen. También se ha añadido el botón para subir la imagen.

Además, he añadido una pequeña tabla dentro de la estructura, solo si había una imagen guardada. Si hay imagen, se muestra la imagen actual asociada a la categoría.

Cuidado con el add_action: al igual que antes, hemos de cambiar ‘category’ por el slug de nuestra taxonomía, si es el caso.

Y finalmente, la función de guardado, que se mantiene intacta.

Aquí no hay cambios con respecto al artículo original. Cambiamos la palabra ‘category’ de los add_action, y seguimos.

¿Qué estamos haciendo, en realidad?

Con el botón Subir Imagen damos al usuario la opción de subir una imagen a la librería multimedia de WordPress. Luego, el botón Usar Imagen copia la URL de la imagen subida, y la establece como valor del campo de texto “upload_image”. Por lo tanto, dentro de term_meta[imagen], lo que guardamos es la URL de la imagen asociada a la categoría.

Añadiendo los scripts

Ahora vienen las partes PHP y JavaScript de los artículos de Media Uploader que escribí hace unos días. Dependiendo de si quieres usar el nuevo o el antiguo, sigue un tutorial u otro. Se mantienen intactos, no hay que hacer cambios con respecto al código visto en ellos. Yo voy a copiar lo visto en el tutorial del nuevo Media Uploader de WordPress 3.5.

A nuestras funciones del plugin, o nuestro archivo functions.php del Theme, añadimos lo siguiente…

Y luego, creamos el archivo admin.js:

Obteniendo la URL de la imagen asociada

Claro, ahora querremos obtener en nuestro Theme la imagen asociada a la categoría, ¿No?

Para ello, debemos conocer la ID de nuestra categoría (o del término, si estamos hablando de una taxonomía personalizada). Por ejemplo, podemos obtener un listado de las categorías y recorrerlo con un foreach:

Y listo, con esto ya sabemos asociar una imagen a una categoría o taxonomía con Media Uploader. ¿Os ha parecido útil? ¿Tenéis alguna duda? ¡Usad nuestro cuadro de comentarios, que para eso está! 🙂

“Cuando se está depurando, el programador novato introduce código correctivo;
el experto elimina el código defectuoso”
     .- Richard Pattis