Clase de cuerpo de WordPress 101: consejos y trucos para diseñadores de temas
¿Eres un aspirante a diseñador de temas de WordPress que busca nuevas formas de utilizar CSS en sus temas?
Por suerte, WordPress añade automáticamente clases CSS que puedes utilizar en tus temas. Varias de estas clases CSS se añaden automáticamente al <body> de cada página de 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í tienes un rápido resumen de lo que aprenderás en este artículo
¿Qué es la clase de cuerpo de WordPress?
La clase body (body_class) es una función de WordPress que permite asignar clases CSS al elemento body
La etiqueta HTML body normalmente comienza en el archivo header.php de un tema, que se carga en cada página. Esto te permite averiguar dinámicamente qué página está viendo un usuario y luego añadir las clases CSS en consecuencia
Normalmente, la mayoría de los temas y frameworks de inicio ya incluyen la función body class dentro de la etiqueta HTML body. Sin embargo, si tu tema no la tiene, puedes añadirla modificando la etiqueta body así
<body <?php body_class($class); ?>>
Dependiendo del tipo de página que se muestre, WordPress añade automáticamente las clases adecuadas
Por ejemplo, si estás en una página de archivo, WordPress añadirá automáticamente la clase archivo al elemento body. Lo hace para casi todas las páginas
Relacionado: Mira cómo funciona WordPress entre bastidores (infografía)
Aquí tienes algunos ejemplos de clases comunes que WordPress puede añadir, dependiendo de la página que se esté mostrando:
.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 puedes ver, al tener a mano un recurso tan potente, puedes personalizar completamente tu página de WordPress utilizando sólo CSS. Puedes personalizar páginas específicas de perfil de autor, archivos con fecha, etc
Dicho esto, veamos ahora cómo y cuándo utilizarías la clase body
Cuándo utilizar la clase body de WordPress
En primer lugar, debes asegurarte de que el elemento body de tu tema contiene la función de la clase body, como se muestra arriba. Si lo hace, entonces incluirá automáticamente todas las clases CSS generadas por WordPress mencionadas anteriormente
Después, también podrás añadir tus propias clases CSS personalizadas al elemento body. Puedes añadir estas clases siempre que las necesites.
Por ejemplo, si quieres cambiar la apariencia de los artículos de un autor concreto archivados en una categoría específica
Cómo añadir clases corporales personalizadas
WordPress tiene un filtro que puedes utilizar para añadir clases de cuerpo personalizadas cuando sea necesario. Te mostraremos cómo añadir una clase de cuerpo utilizando el filtro antes de mostrarte el escenario de uso específico para que todo el mundo pueda estar en la misma página.
Dado que las clases de cuerpo son específicas del tema, tendrás que añadir el siguiente código al archivo functions.php de tu 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 añadirá una clase "wpb-class" a la etiqueta body de cada página de tu sitio web. No está tan mal, ¿verdad?
Ahora puedes utilizar esta clase CSS en la hoja de estilos de tu tema directamente. Si estás trabajando en tu propio sitio web, también puedes añadir el CSS utilizando la función de CSS personalizado en el personalizador de temas
Añadir la clase de cuerpo usando un plugin de WordPress
Si no estás trabajando en un proyecto de un cliente y no quieres escribir código, entonces este método será más fácil para ti
Lo primero que tienes que hacer es instalar y activar el Clase de Cuerpo Personalizado plugin. Para más detalles, consulta nuestra guía paso a paso sobre cómo instalar un plugin de WordPress.
Tras la activación, tienes que visitar Configuración " Clase de Cuerpo Personalizado página. Desde aquí puedes configurar los ajustes del plugin
Puedes seleccionar los tipos de post en los que quieres habilitar la función body class y quién puede acceder a ella. No olvides hacer clic en el botón de guardar los cambios para almacenar tu configuración.
A continuación, puedes dirigirte a editar cualquier entrada o página de tu sitio de WordPress. En la pantalla de edición de la entrada, encontrarás un nuevo cuadro meta en la columna de la derecha etiquetado como "Clases de entradas"
Haz clic para añadir tus clases CSS personalizadas. Puedes añadir varias clases separadas por un espacio
Una vez que hayas terminado, puedes simplemente guardar o publicar tu post. El plugin añadirá ahora tus clases CSS personalizadas a la clase body de esa entrada o página en particular
Uso de etiquetas condicionales con la clase body
El verdadero poder de la función body_class viene cuando se utiliza con las etiquetas condicionales
Estas etiquetas condicionales son tipos de datos verdaderos o falsos que comprueban 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 comprobar si una condición es verdadera o falsa antes de añadir una clase CSS personalizada a la función body_class
Veamos algunos ejemplos de uso de etiquetas condicionales para añadir clases personalizadas a la clase body
Supongamos que quieres dar un estilo diferente a tu página de inicio para los usuarios registrados con el rol de usuario autor. Mientras que WordPress genera automáticamente un .home y .logged-in no detecta el rol de usuario ni lo añade como clase
Ahora bien, este es un escenario en el que puedes utilizar las etiquetas condicionales con algo de código personalizado para añadir dinámicamente una clase personalizada al cuerpo de la clase
Para conseguirlo, deberás añadir el siguiente código al archivo functions.php de tu 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, vamos a ver 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 ello utilizaremos la etiqueta condicional is_preview y luego añadiremos 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, añadiremos el siguiente CSS a la hoja de estilos de nuestro tema para utilizar la nueva clase CSS personalizada que acabamos de añadir
.preview-mode .site-header:before {
content:'preview mode';
color:#FFF;
background-color:#ff0000;
}
Así es como se ve en nuestro sitio de demostración
Tal vez quieras consultar la lista completa de etiquetas condicionales que puedes utilizar en WordPress. Esto te proporcionará un práctico conjunto de etiquetas listas para usar en tu código
Otros ejemplos de añadir dinámicamente clases de cuerpo personalizadas
Aparte de las etiquetas condicionales, también puedes utilizar otras técnicas para obtener información de la base de datos de WordPress y crear clases CSS personalizadas para la clase body
Añadir nombres de categorías a la clase body de una página de una entrada
Supongamos que quieres personalizar la apariencia de las entradas individuales en función de la categoría en la que están archivadas. Puedes utilizar la clase body para conseguirlo
En primer lugar, tienes que añadir los nombres de las categorías como clase CSS en las páginas de entradas individuales. Para ello, añade el siguiente código al archivo functions.php de tu 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 añadirá la clase de categoría en tu clase de cuerpo para las páginas de una sola entrada. A continuación, puedes utilizar las clases CSS para darle el estilo que desees.
Añadir el slug de la página a la clase body
Pega el siguiente código en el archivo functions.php de tu 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 del navegador y clases de cuerpo específicas del navegador
A veces puedes encontrarte con problemas en los que tu tema puede necesitar CSS adicional para un navegador concreto
La buena noticia es que WordPress detecta automáticamente el navegador al cargar y luego almacena temporalmente esta información como una variable global
Sólo tienes que comprobar si WordPress ha detectado un navegador específico y luego añadirlo como una clase CSS personalizada
Simplemente, copia y pega el siguiente código en el archivo functions.php de tu 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');
A continuación, puedes utilizar clases como
.ms-edge .navigation {some item goes here}Si se trata de un pequeño problema de relleno o de márgenes, ésta es una forma bastante fácil de arreglarlo.
Definitivamente, hay muchos más escenarios en los que el uso de la función body_class puede evitarte escribir largas líneas de código. Por ejemplo, si utilizas un framework de temas como Genesis, puedes utilizarla para añadir clases personalizadas en tu tema hijo
Puedes utilizar la función body_class para añadir clases CSS para diseños de páginas de ancho completo, contenido de la barra lateral, cabeceras y pies de página, etc
Esperamos que este artículo te haya ayudado a aprender a utilizar la clase body de WordPress en tus temas. Quizás también quieras ver nuestro artículo sobre cómo dar estilo a cada entrada de WordPress de forma diferente, y nuestra comparación de los mejores plugins constructores de páginas de WordPress
Si te ha gustado este artículo, suscríbete a nuestro Canal de YouTube para los videotutoriales de WordPress. También puedes encontrarnos en Twitter y Facebook.
Si quieres conocer otros artículos parecidos a Clase de cuerpo de WordPress 101: consejos y trucos para diseñadores de temas puedes visitar la categoría Themes.
Deja un comentario
¡Más Contenido!