Agregar Clases Personalizadas a body_class() en WordPress

Agregar Clases Personalizadas a body_class() en WordPress

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.

Esperamos que este artículo te ayude a agregar clases a la etiqueta body_class() para darle una apariencia más única al tema de tu sitio web. Por favor comparte el artículo, y síguenos por Facebook y Twitter, también estamos disponibles por Google+ donde compartimos todo lo nuevo sobre WordPress.

DEJAR COMENTARIO

Favor escribir tu comentario!
Favor ingresar tu nombre aquí