Si eres un aspirante a diseñador de temas de WordPress, dominar CSS es clave para desbloquear un mayor control, personalización y eficiencia en tu flujo de trabajo.
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 a la sección <body> de cada página de un sitio web WordPress.
En este artículo, explicaremos la clase de cuerpo de WordPress. También compartiremos consejos y trucos para usar las clases de cuerpo de WordPress, a partir de años de experiencia en el desarrollo de temas, para ayudarte a mejorar tus proyectos.
He aquí un breve resumen de lo que aprenderá en este artículo.
- What is WordPress Body Class?
- When to Use the WordPress Body Class
- How to Add Custom Body Classes
- Adding Body Class Using a WordPress Plugin
- Using Conditional Tags with the Body Class
- Other Examples of Dynamically Adding Custom Body Classes
- Browser Detection and Browser Specific Body Classes
- Expert Guides on WordPress Theme Design
¿Qué es WordPress Body Class?
Body class (body_class) es una función de WordPress que permite asignar clases CSS al elemento cuerpo.
La etiqueta HTML cuerpo normalmente comienza en el archivo header.php de un tema, que se carga en cada página. Esto permite averiguar de forma dinámica qué página está viendo el usuario y añadir las clases CSS correspondientes.
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 de la siguiente manera:
<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 cuerpo. Lo hace para casi todas las páginas.
Relacionado: Descubra cómo funciona WordPress entre bastidores (infografía).
Estos son algunos ejemplos de clases comunes que WordPress podría 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 puede ver, al tener a mano un recurso tan potente, puede personalizar completamente su página de WordPress utilizando sólo CSS. Puedes personalizar páginas específicas de perfil de autor, archivos basados en fechas, etc.
Dicho esto, veamos ahora cómo y cuándo utilizar la clase de cuerpo.
Cuándo utilizar la clase de cuerpo de WordPress
En primer lugar, debes asegurarte de que el elemento body de tu tema contiene la función body class 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 cuerpo. Puedes añadir estas clases siempre que las necesites.
Por ejemplo, si desea cambiar la apariencia de los artículos de un autor concreto archivados en una categoría específica.
Cómo añadir clases de cuerpo personalizadas
WordPress tiene un filtro que puede utilizar para añadir clases de cuerpo personalizadas cuando sea necesario. Le mostraremos cómo añadir una clase de cuerpo utilizando el filtro antes de mostrarle el caso de uso específico para que todo el mundo pueda estar en la misma página.
Debido a que las clases de cuerpo son específicas del tema, necesitarías añadir el siguiente código al archivo functions. php de tu tema o en un plugin de fragmentos de código.
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 cuerpo de cada página de su sitio web.
Recomendamos añadir este código con WPCode, el mejor plugin de fragmentos de código del mercado. Hace que sea seguro y fácil de añadir código personalizado en WordPress sin necesidad de editar el archivo functions.php de su tema.
Primero, necesitas instalar y activar el plugin gratuito WPCode. Si necesitas instrucciones, consulta nuestra guía sobre cómo instalar un plugin de WordPress.
Una vez activado el plugin, vaya a Fragmentos de código “ Añadir fragmento desde el escritorio de WordPress. A continuación, busque la opción “Añadir su código personalizado (nuevo fragmento)” y haga clic en el botón “Usar fragmento” situado debajo.
A partir de ahí, tiene que elegir ‘PHP Snippet’ como tipo de código de la lista de opciones que aparecen en la pantalla.
A continuación, añada un título a su fragmento de código y pegue el código anterior en el cuadro “Vista previa del código”.
Después, basta con cambiar el conmutador de “Inactivo” a “Activo” y hacer clic en el botón “Guardar fragmento de código”.
Ahora puedes utilizar esta clase CSS en la hoja de estilos de tu tema directamente. Si está trabajando en su propio sitio web, también puede añadir el CSS utilizando la característica CSS personalizado en el personalizador de temas de WordPress.
Para más detalles, consulte nuestra guía sobre cómo añadir fácilmente CSS personalizado a su sitio WordPress.
Añadir clase de cuerpo usando un plugin de WordPress
Si no estás trabajando en un proyecto para un cliente y no quieres escribir código, este método te resultará más sencillo.
Lo primero que debe hacer es instalar y activar el plugin Custom Body Class. Para más detalles, consulta nuestra guía paso a paso sobre cómo instalar un plugin de WordPress.
Una vez activado, debe visitar la página Ajustes ” Clase de cuerpo personalizada. Desde aquí puedes establecer los ajustes del plugin.
Puede seleccionar los tipos de entradas en los que desea activar la característica de clase de cuerpo y quién puede acceder a ella. No olvides hacer clic en el botón “Guardar cambios” para guardar tus ajustes.
A continuación, puedes dirigirte a editar cualquier entrada o página de tu sitio WordPress. En la pantalla de edición de entradas, encontrará una nueva caja meta en la columna de la derecha llamada “Clases de entradas”.
Haz clic para añadir tus clases CSS personalizadas. Puede añadir varias clases separadas por un espacio.
Una vez que haya terminado, sólo tiene que guardar o publicar su entrada. El plugin añadirá tus clases CSS personalizadas a la clase del cuerpo para esa entrada o página en particular.
Uso de etiquetas condicionales con la clase Cuerpo
La verdadera potencia de la función body_class viene cuando se utiliza con las etiquetas condicionales.
Estas etiquetas condicionales son tipos de datos verdadero o falso 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 cuerpo.
Digamos que quieres dar un estilo diferente a tu página de inicio para los usuarios conectados con el perfil de usuario autor. Aunque WordPress genera automáticamente una clase .inicio y .conectado, no detecta el perfil del usuario ni lo añade como clase.
Ahora, este es un escenario donde puedes usar las etiquetas condicionales con algún código personalizado para añadir dinámicamente una clase personalizada a la clase cuerpo.
Para ello, añada el siguiente código al archivo functions.php de su tema o al plugin de fragmentos de código.
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');
Veamos ahora otro ejemplo útil. Esta vez vamos a comprobar si la página mostrada es una vista previa de un borrador de WordPress.
Para ello utilizaremos la etiqueta condicional is_preview y 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:
Puede comprobar la lista completa de etiquetas condicionales que puede utilizar en WordPress. Esto le proporcionará un práctico conjunto de etiquetas listas para usar en su código.
Otros Ejemplos de Añadir Dinámicamente Clases de Cuerpo Personalizadas
Aparte 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 cuerpo.
Añadir nombres de categorías a la clase cuerpo de una página de una sola entrada
Digamos que quieres personalizar la apariencia de entradas individuales basándote en la categoría en la que están archivadas. Puede utilizar la clase cuerpo 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 o a un plugin de fragmentos de código como WPCode:
// 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 su clase de cuerpo para páginas de una sola entrada. A continuación, puede utilizar las clases CSS para darle el estilo que desee.
Añadir slug de página a la clase cuerpo
Pegue el siguiente código en el archivo functions.php de su tema o en un plugin de fragmentos de código:
//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' );
De nuevo, recomendamos añadir este código en WordPress utilizando un plugin de fragmentos de código como WPCode. De esta manera, no tendrá que preocuparse acerca de romper su sitio.
Empieza por instalar y activar el plugin gratuito WPCode. Si necesitas ayuda, sigue esta guía sobre cómo instalar un plugin de WordPress.
Una vez activado el plugin, vaya a Fragmentos de código “ Añadir fragmento desde el escritorio de WordPress. A continuación, haga clic en el botón “Usar fragmento” situado debajo de la opción “Añadir su código personalizado (nuevo fragmento)”.
A continuación, seleccione “Fragmento de código PHP” como tipo de código.
A continuación, añada un título para su fragmento de código y pegue el código anterior en el cuadro “Vista previa del código”.
Por último, cambie el conmutador de “Inactivo” a “Activo” y haga clic en el botón “Guardar fragmento de código”.
Detección de navegadores y clases de cuerpo específicas de los navegadores
A veces puede encontrarse con problemas en los que su tema puede necesitar CSS adicional para un navegador / explorador 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.
Sólo tiene que comprobar si WordPress ha detectado un navegador / explorador específico y luego añadirlo como una clase CSS personalizado.
Simplemente, copie y pegue el siguiente código en el archivo functions.php de su tema o en el plugin de fragmentos de código:
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, puede utilizar clases como:
.ms-edge .navigation {some item goes here}
Si se trata de un pequeño problema de relleno o margen, esta es una forma bastante sencilla de corregirlo.
Definitivamente hay muchos más escenarios en los que el uso de la función body_class puede ahorrarle escribir largas líneas de código. Por ejemplo, si estás usando un framework de temas como Genesis, entonces puedes usarlo para añadir clases personalizadas en tu tema hijo.
Puede utilizar la función body_class para añadir clases CSS para estructuras de página de ancho completo, contenido de la barra lateral, cabeceras y pies de página, etc.
Guías de expertos en diseño de temas para WordPress
¿Buscas más tutoriales? Marque / compruebe nuestras otras guías sobre diseño de temas en WordPress:
- Cómo añadir un efecto de paralaje a cualquier tema de WordPress
- Cómo editar el pie de página en WordPress (4 maneras)
- Cómo añadir copos de nieve en tu blog de WordPress
- Cómo actualizar un tema de WordPress sin perder la personalización
- Cómo obtener comentarios sobre el diseño de sitios web en WordPress
Esperamos que este artículo te haya ayudado a aprender a usar la clase cuerpo de WordPress en tus temas. Puede que también quieras ver nuestro artículo sobre cómo dar estilo a cada entrada de WordPress de forma diferente, y nuestra comparativa de los mejores plugins WordPress page builder.
If you liked this article, then please subscribe to our YouTube Channel for WordPress video tutorials. You can also find us on Twitter and Facebook.
jenny
plsss give me example outwitting a crocodile theme plsssssssss
Corrinda
Thank you after reading a number of articles regarding the body-class this is the one the finally sunk in.
Got it working on individual pages and on category pages this is great. The use cases are what made the difference for me.
Editorial Staff
Sweet. Glad to be able to help.
Administrador
Yolanda
Great tips! I’m trying to figure out how to add the menu class (the one you can enter in the admin) to body_class:
[pre]
/** Add nav menu css class to body class */
function add_nav_menu_css( $classes ) {
$classes[] = ‘menu-class-from-admin’;
return $classes;
}
add_filter( ‘body_class’, ‘add_nav_menu_css’ );
[/pre]
Seth Burleigh
Great tips. I”m trying to do this, and when inserting “page-template page-template-(template file name)” into my header file such that I have:
<body >
And I then modify my CSS to include: .page-template-home_corechella
I am left with a completely blank page. Nothing. What am I doing wrong? Thanks!
Editorial Staff
The page-templates are added in the homepage automatically as long as you have the body_class tags. Would have to see the file to see what you are doing wrong. Use a third party service like pastebin, and then paste the link here.
Administrador
Seth
Ok, thank you very much!
I’ve changed the approach slightly since my post (now using instead of page template), but a similar problem is happening – the correct body CSS (body.corechella) is not showing. The original body class is taking priority.
Corechella Page template (http://dev.corebaby.org/corechella-home/) – http://pastebin.com/embed_js.php?i=8L6rhESr
Corechella header.php file – http://pastebin.com/embed_js.php?i=n2Sn4jUJ
CSS (the new body class is at the very bottom) – http://pastebin.com/embed_js.php?i=4U6d09cQ”
Seth
Editorial Staff
In your header.php, you have to keep the body class like this:
1-click Use in WordPress
In your CSS, just use .corchella instead of body.corchella
Michael
Great write up, thanks
Editorial Staff
Glad you found it helpful
Administrador
Rasha
i have news page that get posts using category.php , i want to give it specific class so i can make the content wide and without the sidebar , how i can do that ?
Vajrasar
Indeed a good writeup and very informative. Just a question – For example if I add Browser Specific Body Class today and after few days I need to apply Page Class in Body Slug. Then will the settings/css that I did with Browser Specific Body class will get ruined or not?
Editorial Staff
No it will not get ruined. It can be overridden depending on how your CSS is written.
Administrador