blog banner

Agregar la categoría como clase css del post en WordPress

A veces necesitamos diferenciar los artículos en función de la categoría por css pero no tenemos una clase que nos lo facilite. ¡Pongamos una!

A menudo hay que personalizar elementos en el aspecto de los artículos en función de la categoría en la que estamos. Puede ser que la tipografía, colores de los botones, alineación u otros aspectos gráficos se deban mostrar de diferente manera en función de su categoría.

En las páginas de categoría no hay problema porque WordPress por defecto ya incluye el identificador de esta y su nombre. Pero para los posts es diferente. Pese a tener clases en el <body> que nos servirán para identificar al post en concreto, no tenemos ningúna en toda la página que nos indique a qué categoría pertenece.

Entonces, lo que haremos será agregar una clase identificadora en la etiqueta <body> que nos permita acceder a cualquier elemento desde la hoja de estilos.

Agregando una clase con la categoría al body

Lo que haremos será editar el fichero functions.php ubicado en la carpeta del tema activo en WordPress y agregar al final el siguiente código

add_filter('body_class','agregar_categoria_a_post');
function agregar_categoria_a_post($bodyClasses) {
  if (is_single() ) {
    global $post;
    foreach((get_the_category($post->ID)) as $category) {
      $bodyClasses[] = "cat-".$category->category_nicename;
    }
  }
  return $bodyClasses;
}

Para hacerlo usamos el filtro body_class, capturando el array de clases y mediante un bucle agregamos el nombre todas las categorías del post. Además le he agregado el prefijo «cat-» para tener un poco más de control por si hay categorías que puedan coincidir en nombre con algún otro elemento css.

De este modo, si queremos que los botones de todos los posts de la categoría «animales» estén en rojo podemos disponer de una clase css como esta:

body.cat-animales button{background:#a00;}

Debemos tener en cuenta que esto nos insertará el slug de la categoría por lo que la categoría «animales de compañía» seguramente tendrá slug «animales-de-compania» y la referencia clase será:

body.cat-animales-de-compania button{background:#a00;}

¡Y esto es todo!

Deja una respuesta

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