¿Es usted un aspirante a diseñador de temas de WordPress que busca nuevas formas de usar CSS en sus temas?

Afortunadamente, WordPress agrega automáticamente clases de CSS que puede utilizar en sus temas. Varias de estas clases de CSS se agregan automáticamente al <body> sección de cada página en un sitio de WordPress.

En este artículo, explicaremos la clase de cuerpo de WordPress con consejos y trucos para que los aspirantes a diseñadores de temas los utilicen en sus proyectos.

Aquí hay una descripción general rápida de lo que aprenderá en este artículo.

¿Qué es WordPress Body Class?

Body class (body_class) es una función de WordPress que le permite asignar clases CSS al elemento body.

La etiqueta del cuerpo HTML normalmente comienza en el archivo header.php de un tema, que se carga en cada página. Esto le permite determinar dinámicamente qué página está viendo un usuario y luego agregar las clases CSS en consecuencia.

Normalmente, la mayoría de los temas y marcos de inicio ya incluyen la función de clase de cuerpo dentro de la etiqueta de cuerpo HTML. Sin embargo, si su tema no lo tiene, puede agregarlo modificando la etiqueta del cuerpo de esta manera:

<body <?php body_class($class); ?>>

Dependiendo del tipo de página que se muestra, WordPress agrega automáticamente las clases apropiadas.

Por ejemplo, si se encuentra en una página de archivo, WordPress agregará automáticamente una clase de archivo al elemento del cuerpo. Hace eso para casi todas las páginas.

Vea cómo funciona WordPress entre bastidores (infografía)

Aquí hay algunos ejemplos de clases comunes que WordPress podría agregar, según la página que se muestre:

.rtl {}
.home {}
.blog {}
.archive {}
.date {}
.search {}
.paged {}
.attachment {}
.error404 {}
.single postid-(id) {}
.attachmentid-(id) {}
.attachment-(mime-type) {}
.author {}
.author-(user_nicename) {}
.category {}
.category-(slug) {}
.tag {}
.tag-(slug) {}
.page-parent {}
.page-child parent-pageid-(id) {}
.page-template page-template-(template file name) {}
.search-results {}
.search-no-results {}
.logged-in {}
.paged-(page number) {}
.single-paged-(page number) {}
.page-paged-(page number) {}
.category-paged-(page number) {}
.tag-paged-(page number) {}
.date-paged-(page number) {}
.author-paged-(page number) {}
.search-paged-(page number) {}

Como puede ver, al tener un recurso tan poderoso a mano, puede personalizar completamente su página de WordPress usando solo CSS. Puede personalizar páginas de perfil de autor específicas, archivos basados ​​en fechas, etc.

Dicho esto, ahora echemos un vistazo a cómo y cuándo usaría la clase body.

Cuándo usar la clase de cuerpo de WordPress

Primero, debe asegurarse de que el elemento del cuerpo de su tema contenga la función de la clase del cuerpo como se muestra arriba. Si es así, automáticamente incluirá todas las clases CSS generadas por WordPress mencionadas anteriormente.

Después de eso, también podrá agregar sus propias clases CSS personalizadas al elemento del cuerpo. Puede agregar estas clases cuando las necesite.

Por ejemplo, si desea cambiar la apariencia de los artículos de un autor específico archivados en una categoría específica.

Cómo agregar clases de cuerpo personalizadas

WordPress tiene un filtro que puede utilizar para agregar clases de cuerpo personalizadas cuando sea necesario. Le mostraremos cómo agregar una clase de cuerpo usando el filtro antes de mostrarle el escenario de caso de uso específico para que todos puedan estar en la misma página.

Debido a que las clases corporales son específicas del tema, necesitaría agregar el siguiente código al archivo functions.php de su tema.

function my_class_names($classes) {
    // add 'class-name' to the $classes array
    $classes[] = 'wpb-class';
    // return the $classes array
    return $classes;
}

//Now add test class to the filter
add_filter('body_class','my_class_names');

El código anterior agregará una clase “wpb-class” a la etiqueta del cuerpo en cada página de su sitio web. Eso no es tan malo, ¿verdad?

Ahora puede utilizar esta clase CSS directamente en la hoja de estilo de su tema. Si está trabajando en su propio sitio web, también puede agregar el CSS utilizando la función CSS personalizada en el personalizador de temas.

Agregar CSS personalizado en el personalizador de temas

Agregar clase de cuerpo usando un complemento de WordPress

Si no está trabajando en un proyecto de cliente y no desea escribir código, este método le resultará más fácil.

Lo primero que debe hacer es instalar y activar el Clase de carrocería personalizada enchufar. Para obtener más detalles, consulte nuestra guía paso a paso sobre cómo instalar un complemento de WordPress.

Tras la activación, debe visitar Configuración »Clase de cuerpo personalizada página. Desde aquí puede configurar los ajustes del complemento.

Configuración personalizada de la clase de cuerpo

Puede seleccionar los tipos de publicaciones en las que desea habilitar la función de clase corporal y quién puede acceder a ella. No olvide hacer clic en el botón Guardar cambios para almacenar su configuración.

A continuación, puede dirigirse a editar cualquier publicación o página en su sitio de WordPress. En la pantalla de edición de publicaciones, encontrará un nuevo cuadro de meta en la columna de la derecha con la etiqueta ‘Publicar clases’.

Agregar clases de cuerpo a una publicación en WordPress

Haga clic para agregar sus clases CSS personalizadas. Puede agregar varias clases separadas por un espacio.

Una vez que haya terminado, simplemente puede guardar o publicar su publicación. El complemento ahora agregará sus clases CSS personalizadas a la clase del cuerpo para esa publicación o página en particular.

Usar etiquetas condicionales con la clase Body

El poder real de la función body_class viene cuando se usa con las etiquetas condicionales.

Estas etiquetas condicionales son tipos de datos verdaderos o falsos que verifican si una condición es verdadera o falsa en WordPress. Por ejemplo, la etiqueta condicional is_home comprueba si la página que se muestra actualmente es la página de inicio o no.

Esto permite a los desarrolladores de temas verificar si una condición es verdadera o falsa antes de agregar una clase CSS personalizada a la función body_class.

Echemos un vistazo a algunos ejemplos del uso de etiquetas condicionales para agregar clases personalizadas a la clase del cuerpo.

Supongamos que desea diseñar su página de inicio de manera diferente para los usuarios que han iniciado sesión con el rol de usuario autor. Mientras que WordPress genera automáticamente un .home y .logged-in class, no detecta el rol del usuario ni lo agrega como una clase.

Ahora, este es un escenario en el que puede usar las etiquetas condicionales con algún código personalizado para agregar dinámicamente una clase personalizada a la clase del cuerpo.

Para lograr esto, agregará el siguiente código al archivo functions.php de su tema.

function wpb_loggedin_user_role_class($classes) { 

// let's check if it is homepage
if ( is_home() ) {

// Now let's check if the logged in user has author user role.  
$user = wp_get_current_user();
if ( in_array( 'author', (array) $user->roles ) ) {
    //The user has the "author" role
    // Add user role to the body class
    $classes[] = 'author';
    // Return the classes array
    return $classes;      
} 
} else { 
// if it is not homepage, then just return default classes
return $classes; 
}
} 

add_filter('body_class', 'wpb_loggedin_user_role_class');

Ahora, echemos un vistazo a otro ejemplo útil. Esta vez vamos a comprobar si la página que se muestra es una vista previa de un borrador de WordPress.

Para hacer eso, usaremos la etiqueta condicional is_preview y luego agregaremos nuestra clase CSS personalizada.

function add_preview_class($classes) { 
if ( is_preview() )  {
$classes[] = 'preview-mode';
return $classes;
}
return $classes; 
}
add_filter('body_class','add_preview_class');

Ahora, agregaremos el siguiente CSS a la hoja de estilo de nuestro tema para utilizar la nueva clase CSS personalizada que acabamos de agregar.

.preview-mode .site-header:before { 
content:'preview mode';
color:#FFF;
background-color:#ff0000;
}

Así es como se veía en nuestro sitio de demostración:

Clase CSS del modo de vista previa personalizada agregada a la clase del cuerpo

Es posible que desee consultar la lista completa de etiquetas condicionales que puedes usar en WordPress. Esto le proporcionará un práctico conjunto de etiquetas listas para usar para su código.

Otros ejemplos de adición dinámica de clases de cuerpo personalizadas

Además de las etiquetas condicionales, también puede utilizar otras técnicas para obtener información de la base de datos de WordPress y crear clases CSS personalizadas para la clase del cuerpo.

Agregar nombres de categorías a la clase de cuerpo de una sola página de publicación

Supongamos que desea personalizar la apariencia de publicaciones individuales en función de la categoría en la que están archivadas. Puede usar la clase de cuerpo para lograr esto

Primero, debe agregar nombres de categorías como clases CSS en páginas de publicaciones únicas. Para hacer eso, agregue el siguiente código al archivo functions.php de su tema:

// add category nicenames in body class
function category_id_class($classes) {
    global $post;
    foreach((get_the_category($post->ID)) as $category)
        $classes[] = $category->category_nicename;
    return $classes;
}
 
add_filter('body_class', 'category_id_class');

El código anterior agregará la clase de categoría en su clase de cuerpo para páginas de publicación única. A continuación, puede utilizar clases de CSS para diseñarlo como desee.

Agregar slug de página a la clase de cuerpo

Pegue el siguiente código en el archivo functions.php de su tema:

//Page Slug Body Class
function add_slug_body_class( $classes ) {
global $post;
if ( isset( $post ) ) {
$classes[] = $post->post_type . '-' . $post->post_name;
}
return $classes;
}
add_filter( 'body_class', 'add_slug_body_class' );

Detección de navegador y clases de cuerpo específicas del navegador

A veces, puede encontrar problemas en los que su tema puede necesitar CSS adicional para un navegador en particular.

Ahora, la buena noticia es que WordPress detecta automáticamente el navegador al cargar y luego almacena temporalmente esta información como una variable global.

Solo necesita verificar si WordPress detectó un navegador específico y luego agregarlo como una clase CSS personalizada.

Simplemente, copie y pegue el siguiente código en el archivo functions.php de su tema:

function wpb_browser_body_class($classes) { 
    global $is_iphone, $is_chrome, $is_safari, $is_NS4, $is_opera, $is_macIE, $is_winIE, $is_gecko, $is_lynx, $is_IE, $is_edge;

if ($is_iphone)    $classes[] ='iphone-safari';
elseif ($is_chrome)    $classes[] ='google-chrome';
elseif ($is_safari)    $classes[] ='safari';
elseif ($is_NS4)    $classes[] ='netscape';
elseif ($is_opera)    $classes[] ='opera';
elseif ($is_macIE)    $classes[] ='mac-ie';
elseif ($is_winIE)    $classes[] ='windows-ie';
elseif ($is_gecko)    $classes[] ='firefox';
elseif ($is_lynx)    $classes[] ='lynx';
elseif ($is_IE)      $classes[] ='internet-explorer';
elseif ($is_edge)    $classes[] ='ms-edge';
else $classes[] = 'unknown';
    
return $classes;
}
add_filter('body_class','wpb_browser_body_class');

Luego puede usar clases como:

.ms-edge .navigation {some item goes here}

Si se trata de un pequeño problema de margen o relleno, esta es una forma bastante sencilla de solucionarlo.

Definitivamente, hay muchos más escenarios en los que el uso de la función body_class puede evitar que tenga que escribir largas líneas de código. Por ejemplo, si está utilizando un marco temático como Genesis, puede usarlo para agregar clases personalizadas en su tema hijo.

Puede usar la función body_class para agregar clases CSS para diseños de página de ancho completo, contenido de barra lateral, encabezado y pie de página, etc.

Esperamos que este artículo le haya ayudado a aprender a utilizar la clase corporal de WordPress en sus temas. Es posible que también desee ver nuestro artículo sobre cómo diseñar cada publicación de WordPress de manera diferente, y nuestra comparación de los mejores complementos de creación de páginas de WordPress.

Si le gustó este artículo, suscríbase a nuestro Canal de Youtube . También puedes encontrarnos en Twitter y Facebook.

WordPress Body Class 101: Consejos y trucos para diseñadores de temas .

Entradas relacionadas