Nombre de la categoría en las clases del body de una entrada

[ 8 junio 2021 ] [ Autor: Jhon Marreros Guzmán ][ Core - Intermedio] [ ]

css

En un artículo anterior vimos los estilos CSS que WordPress genera por defecto, sin embargo a veces es necesario agregar nuevos estilos a los ya existentes. En este artículo veremos cómo agregar estilos CSS que identifiquen a una categoría cuando se visualiza una entrada.

Generalidades

Para ver el efecto de la clase CSS de nombre de categoría agregada, agregaremos un color de fondo diferente por cada categoría, de manera que al consultar la categoría y los artículos de esa categoría, ambos tendrán el mismo color de fondo.

Al final lo que queremos obtener es algo similar a lo que se muestra en la siguiente imagen:

 
En la entrada se reflejará el nombre de la categoría como una clase CSS a nivel del body.

Código para agregar el nombre de la categoría en las clases CSS de las entradas

El siguiente código agrega la categoria o categorías como nombre de clase a nivel del body del detalle de una entrada. El nombre de la clase de categoría va precedido con el texto "category-".

add_filter('body_class','dcms_add_category_class');
function dcms_add_category_class( $classes ) {
	if ( is_single() ) {
	  foreach(get_the_category(get_the_ID()) as $category) {
	    $classes[] = 'category-' . sanitize_title($category->category_nicename);
	  }
	}
	return $classes;
}

En el código anterior:

• Usamos el Hook de filtro body_class el cual nos permitirá agregar clases adicionales, este hook hace referencia a la función dcms_add_category_class()
• La función tiene el argumento $classes que almacena todas las clases que se mostrarán en la página a nivel del body
• Dentro de la función comprobamos si estamos viendo una entrada y recuperamos las categorías de la entrada y las recorremos en el bucle foreach
• Por cada categoría la concatenamos con el texto «category-» y la agregamos como parte del array de $clasess
• Finalmente retornamos el argumento $classes modificado

Conclusión

A pesar de que body_class incluye muchas clases que son útiles, por alguna razón, al menos en las versiones actuales, no se incluye el nombre de la categoría cuando se visualiza una entrada individual, en este artículo hemos aprendido cómo agregar el nombre de la categoría como clases CSS a través de código.

Valora este artículo : (1 votos, promedio: 5,00 de 5)

Cargando...