WordPress : clase body_class()
Dentro del archivo header.php agregamos en la etiqueta body la clase body_class() que nos servira para que wordpress añada en forma automatica las clases de las paginas donde nos encontremos.
Por ejemplo:
- Si estamos en la pagina de Inicio la agregara la
clase Home. - Si estamos en la pagina de Category le agragara la
clase archive. - Si estamos en un articulo le agragara la
clase single. - Si estamos en la pagina de le agragara la
clase page.
<!-- dentro de header.php agregamos en la etiqueta body la clase body_class()-->
<body <?php body_class(); ?>>Por ejemplo estamos en la categoria recetas , nos ha agregado la clase archive ademas la clase category-5 donde 5 es su identificador(ID) de la categoria recetas.
La función body_class() en WordPress nos facilita mucho esto añadiendo automáticamente un montón de clases apropiadas a la etiqueta body de nuestro sitio web.
WordPress de forma predeterminada incluye varias clases en la etiqueta body_class() que los usuarios pueden utilizar para estilizar el contenido del cuerpo de su sitio web de forma sencilla, pero no todos los usuarios se contentan las clases CSS generales que trae WordPress consigo, sino quieren más personlización. Por eso hoy veremos cómo añadir o agregar clases personalizadas e la etiqueta body_class() en WordPress.
¿Qué es Etiqueta body_class() en WordPress?
Es básicamente un función PHP que incluye WordPress de forma predeterminada, que añade clases estáticas y otras variables al elemento de <body> en HTML del sitio web, y que permite estilizar la presentación del contenido. Normalmente aparece así:
body <?php body_class(); ?>>De forma predeterminada, las clases que incluye esta función en el nuevo tema de WordPress Twentyseventeen en la página principal del sitio son las que aparecen en este código html:
<body class="home blog group-blog hfeed has-header-image has-sidebar colors-light">Para estiliar las clases predeterminadas que incluye WordPress en el elemento <body> de tu sitio web, es necesario ir al archivo style.css de tu tema activo, ahí entonces agregas las clases con la estilización CSS que quieres darle a tu página, de esta forma:
.home {
/* Estilos para la página principal */
}
.home .group-blog {
/* Estilo solo para conjunto del blog */
}Agregar Clases Personalizadas
Ahora que sabes lo que es la etiqueta body_class() y las clases que contiene, vamos a ver cómo añadir o agregr clases a esta función, mediante un código que agregaas en el archivo de functions.php de tu tema actual.
function agregar_clases_body( $clases ) {
// Agrega clase si entrada destacada es ID 3
if ( is_sticky( '3' ) ) {
$clases[] = 'color-preferido';
}
// Agrega clase cuando usuario es admin
if ( current_user_can( 'manage_options' ) ) {
$clases[] = 'editar-entrada';
}
// Agrega clase si entrada es tipo producto
if ( is_singular('producto') ) {
$clases[] = 'contenido-producto';
}
return $clases;
}
add_filter( 'body_class', 'agregar_clases_body' );Con este código asignamos tres nuevos valores de clases a la matriz para agregar clases a la etiqueda del cuerpo de WordPress, y estilizar de forma personalizada cada elemento que cumpla con la condición.
Referencia :