Estilo CSS diferente por categoría en WordPress

Una de las ventajas de CSS es que, para un mismo código HTML podemos tener distintos estilos.

Esto nos permite, junto a algunas de las funciones que nos proporciona WordPress, dinamizar nuestro tema de WordPresspara, por ejemplo, diferenciar nuestras categorías.

Si eres visitante de Katharsix, notarás que cada categoría tiene su propio color y cabecera. Esto lo hacemos mediante CSS; en concreto cambiando la imágen de fondo para cada categoría.

Lo primero que tenemos que hacer es editar nuestro index.php (donde tenemos el loop de WordPress) y buscar dentro de él la cabecera de nuestras entradas:

<h2 class="titulo-<?php the_category_ID(); ?>"><a href="<?php the_permalink() ?>" rel="bookmark" title="Enlace permanente para <?php the_title_attribute(); ?>"><?php the_title(); ?></a></h2>

Si troceamos esto, podemos ver que lo único que hemos añadido diferente es la clase del H2:

<h2 class="titulo-<?php the_category_ID(); ?>">Título aquí</h2>

Esto nos asignará la clase titulo-numero donde numero será el identificador de la categoría (un número).

De esta manera podemos asignar un estilo CSS a cada clase de las categorías, por ejemplo:

h2.titulo-3>a {
	color:#3158bd;
	text-shadow: 2px 2px 2px #eff0ef;
}
h2.titulo-5>a {
	color:#2438bd;
	text-shadow: 2px 2px 2px #eff0ef;
}

En este ejemplo estamos asignando el color #eff0ef a la categoría con ID 3 y el #2438bd a la categoría cuyo ID es 5.

Esto es algo muy básico, pero se pueden hacer auténticas rarezas con utilizando las funciones básicas de WordPresscomo indico en este ejemplo.

¿Nos enseñas qué has hecho tú?

¡MANTENME INFORMADO!

¡Gracias por tu interés en estar informado del próximo lanzamiento de mis cursos! 😎

¡No hago spam! Lee la política de privacidad para tener más información.

5 comentarios en “Estilo CSS diferente por categoría en WordPress”

  1. Hola, yo quisiera poner una imagen adelante del titulo segun la categoria, como tendria que hacer.. gracis buen aporte :D

    Responder

Deja una respuesta

Tu dirección de correo electrónico no será publicada. Los campos obligatorios están marcados con *

*

*

DARÍO BALBONTÍN FERNÁNDEZ es el Responsable del tratamiento de los datos personales del usuario y le informa que estos datos serán tratados de conformidad con lo dispuesto en el Reglamento (UE) 2016/679 de 27 de abril (GDPR) y la Ley Orgánica 3/2018 de 5 de diciembre (LOPDGDD), por lo que se le facilita la siguiente información del tratamiento: Fin del tratamiento: mantener una relación comercial y el envío de comunicaciones sobre nuestros productos y servicios. Criterios de conservación de los datos: se conservarán mientras exista un interés mutuo para mantener el fin del tratamiento y cuando ya no sea necesario para tal fin, se suprimirán con medidas de seguridad adecuadas para garantizar la seudonimización de los datos o la destrucción total de los mismos.Comunicación de los datos: No se comunicarán los datos a terceros, salvo obligación legal. Derechos que asisten al usuario: Derecho a retirar el consentimiento en cualquier momento. Derecho de acceso, rectificación, portabilidad y supresión de sus datos y a la limitación u oposición al su tratamiento. Derecho a presentar una reclamación ante la Autoridad de control (agpd.es) si considera que el tratamiento no se ajusta a la normativa vigente. Datos de contacto para ejercer sus derechos: contacto@dariobf.com.