Hoy vamos a ver como mostrar imágenes destacadas de categoría con el título y la descripción superpuestos en Genesis Sample. Lo haremos con código y nos ayudaremos de un sencillo plugin.
En principio, este tutorial trataba de como mostrar las imágenes destacadas de cada categoría en las páginas de archivo de dichas categorías. Pero no he querido que darme ahí. Evidentemente debía servir para algo más que adornar, así que he incluido el título y descripción de la categoría sobre la imagen. He quedado muy contento con el resultado final. Vamos a ello!
El plugin
Lo primero que necesitamos es un plugin que nos aporte esas imágenes destacadas para cada categoría. Existe uno, muy ligero y sencillo con el que he trabajado algunas veces.
Category Images es sencillo de usar y no pesa casi nada. De hecho no tiene página de ajustes dentro de WordPress. Una vez instalado, el único cambio visible es que añade un campo de imagen en las taxonomías. Tanto categorías, como etiquetas. Incluso en las taxonomías de los CPT’s.
Ya desde el listado de categorías podemos observar las miniaturas de las imágenes destacadas. Y una vez entramos en la categoría, tenemos el campo de selección de la imagen destacada.
Ahora que ya tenemos los campos de imagen de categoría creados y listos, pasamos a crear el snippet de código que nos mostrará las imágenes de fondo con el título y descripción.
El cogido
Este código lo pondremos al final del archivo functions.php de Genesis Sample.
Este contenido está sólo disponible para los suscriptores.
Puedes identificarte aquí o bien registrate en este enlace.
En la primera parte de la función definimos el HTML en el que irá envuelto el título y descripción de la categoría y llevará la imagen destacada de fondo.
Si bien mostramos la imagen destacada de fondo ¿que pasará si no hemos seleccionado una? Pues ningún problema! En la función he añadido una imagen de refuerzo. Se mostrará por defecto si no hay ninguna imagen destacada seleccionada para esa categoría. Deberás sustituir la URL por la imagen que tu elijas. Será la imagen por defecto.
Maquetamos todo con CSS
Hace falta aplicar un poco de estilo para maquetar todo y que quede como en la imagen al comienzo del tutorial.
Añade este código CSS al final del archivo styles.css de Genesis Sample.
Este contenido está sólo disponible para los suscriptores.
Puedes identificarte aquí o bien registrate en este enlace.
Notas finales
Este snippet sólo afectará a las categorías. Si quieres extenderlo a las etiquetas, tan sólo tendrás que cambiar el condicional de la función PHP y añadir is_tag() para que afecte a todo.
Si bien nos ayudamos de un plugin, es un plugin muy ligero que no supone ni siquiera un inapreciable aumento en la carga de la web.
Para cualquier duda con el código puedes dejar un mensaje abajo. Lo resolveré gustosamente. 🙂 Feliz día!