Descubre en este tutorial cómo introducir con código un overlay de distinto color sobre la imagen destacada del query loop dependiendo de la categoría de la entrada en WordPress.
El bloque nativo de WordPress que permite mostrar un listado de entradas, ahora denominado «bucle de consulta» (query loop), cada vez es más versátil.
Ya sabes que soy un apasionado de este bloque, de hecho, en este tutorial repaso todas las opciones que ofrece en su interfaz de usuario.
Además de todas opciones de personalización que te he explicado en tutoriales anteriores mediante PHP hoy te traigo uno en el que solo tendrás que aplicar un poco de CSS.
Si muestras las últimas entradas en la página principal o el blog de tu web y quieres que se distingan por categoría, tienes varias posibilidades de hacerlo.
¿Por ejemplo?
Que según la categoría a la que pertenezca la entrada, esta contenga una capa de color distinta sobre la imagen destacada.
En este caso, seguro que una imagen vale más que mil palabras. 😉
Este sería el resultado final:
Y esto solo es un ejemplo, tú puedes personalizarlo con las categorías y los colores que desees.
¿Te interesa? Vamos allá.
Instrucciones para añadir un overlay de distinto color sobre la imagen destacada dependiendo de la categoría de la entrada
1. Añade una plantilla de entrada del query block que contenga el bloque de fondo
En primer lugar, elige el bloque de bucle de consulta y el diseño que desees. Para este ejemplo, estas usando un bloque de fondo que muestre la foto destacada con cierta opacidad:
2. Personaliza el CSS del overlay
Ahora introduce este bloque al final de style.css:
Para ver este código y los otros 2107 snippets de esta web,
identifícate o suscríbete aquí.
Al insertar estas líneas de CSS consigues que se aplique el color de overlay que deseas para cada categoría en el bloque de fondo.
En este ejemplo asignas 3 colores distintos a 3 categorías:
- Proyectos: color rojo (clase CSS
category-cat-a) - Tutoriales: color azul (clase CSS
category-cat-b) - Noticias: color verde (clase CSS
category-cat-c)
Puedes modificar el CSS para que use las categorías que tú tengas definidas (category-categoria-deseada) y asignar el color de fondo deseado (background-color).
Conclusiones
Ahora ya conoces el código para mostrar un overlay con distinto color dependiendo la categoría de la entrada cuando introduces el bloque de bucle de consultas o Query Loop de WordPress.
¿Alguna duda? Te leo en los comentarios.
Y si quieres darme una sugerencia para próximos tutoriales, déjamela en el formulario de contacto. Ventajas de ser suscriptor. 😉
