• Saltar a la navegación principal
  • Saltar al contenido principal
  • Saltar a la barra lateral principal

DecodeCMS

Tu WordPress a otro Nivel ...

  • Acerca de
  • Contacto
  • Inicio
  • Tutoriales
    • Themes
    • Plugins
    • Core
    • Recursos
  • Cursos
  • Acceder
    • Mis cursos
    • Mi Cuenta
    • Acceder
Inicio / Tutoriales / Core / Nombre de la categoría en las clases del body de una entrada

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

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

css

Suscríbete a DecodeCMS:  

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:

CSS nombre categoría aplicado

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

Agregar clase CSS

 

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;
}
Puedes agregar este código al final de tu archivo functions.php de tu tema hijo.

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.

 

¿Me ayudas a llegar a más gente?

Twittear Compartir LinkedIn WhatsApp

Artículos Relacionados

  • Agregar CSS en WordPressAgregar CSS en WordPress de manera correcta
  • Listar todos los Shortcodes en un sitio WordPressListar todos los Shortcodes en un sitio WordPress
  • nube de etiquetas en WordPressPersonalizar nube de etiquetas en WordPress
  • Deshabilitar el editor de bloques para Widgets en WordPressDeshabilitar el editor de bloques para Widgets en WordPress
Valora este artículo : 1 barra2 barras3 barras4 barras5 barras (1 votos, promedio: 5,00 de 5)
Cargando...

Interacciones con los lectores

Para escribir código envolver con: <pre class="language-xxx"><code> </code></pre> ,reemplaza las xxx (php, css, html)

*

* Gravatar habilitado

Barra lateral principal

Curso Decodifica WordPress

Únete a DecodeCMS

Recibirás como regalo:

Guia práctica con video:
¿Quieres agregar código a WordPress? Revisa las diferentes opciones que tienes.Ver más

Omnisend
Alojamiento Wordpress

Niveles

Básico Intermedio Avanzado

Etiquetas

accesibilidad css dashboard editor error funcionalidad herramientas imagen js librería mejoras optimización seguridad SEO social woocommerce

Populares

Productos de ejemplo en WooCommerce

Letra capital en párrafos en WordPress

Mostrar lista de sub páginas en página padre en WordPress

Clases CSS basadas en el Rol de usuario en WordPress

© logo decode pie
Política de Privacidad | Política de devoluciones
Copyrigth 2023 Todos los derechos reservados