• 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

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

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

css

¿Me ayudas a llegar a más gente?

Twittear Compartir LinkedIn WhatsApp

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.

 
¿Aún con dudas?, en el siguiente artículo se detallan los puntos anteriores.

Suscríbete a DecodeCMS:  

 

¿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
  • Eliminar Opciones de Pantalla en WordPressEliminar Opciones de Pantalla en WordPress
  • Eliminar campo url comentarios WordPressEliminar campo URL de los comentarios de WordPress
  • Subir archivos en WordPress a través de códigoSubir archivos en WordPress a través de código
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

Presentación

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

Jooble
Alojamiento Wordpress

Niveles

Básico Intermedio Avanzado

Etiquetas

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

Populares

Contenido de relleno para probar Gutenberg

Depurar código PHP en WordPress

Eliminar el slug de la URL de un Custom Post Type

Subir archivos en WordPress a través de código

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