Instalar WordPress

Guía de Instalación

Optimizar WordPress

Optimización y Velocidad

Seguridad de WordPress

Guía de Protección

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.

Deja un comentario

Este sitio usa Akismet para reducir el spam. Aprende cómo se procesan los datos de tus comentarios.

Si continúas utilizando este sitio significa que aceptas el uso de cookies. más información

Los ajustes de cookies de esta web están configurados para "permitir cookies" y así ofrecerte la mejor experiencia de navegación posible. Si sigues utilizando esta web sin cambiar tus ajustes de cookies o haces clic en "Aceptar" estarás dando tu consentimiento a esto.

Cerrar