Advertisement
  1. Web Design
  2. WordPress

Añadir la clase Body en WordPress

by
Read Time:7 minsLanguages:

Spanish (Español) translation by Marilu (you can also view the original English article)

En este breve tutorial, veremos la clase body de WordPress y cómo podemos manipularla usando las llamadas del core API.

Específicamente, cubrimos la adición de clases body, la eliminación de clases body, la adición condicional de clases body y algunos casos de uso.

El tutorial usa algo de simple PHP. Si no te sientes seguro usando el lenguaje de programación de WordPress, prueba nuestro curso gratuito para principiantes Aprende PHP para WordPress para ponerte al día.

Aprende PHP para WordPress

Una vez que domines lo esencial, ¿por qué no te familiarizas con el lenguaje de programación de WordPress en mi curso gratuito Aprender PHP para WordPress? Te daré una visión general de lo que es PHP y cómo se utiliza para la programación de WordPress y la creación de temas y plugins.

La clase body: ¿Para qué se puede usar?

La clase body en WordPress es una clase o serie de clases que se aplican al elemento body de HTML. Esto es útil para aplicar estilos únicos a diferentes áreas de un sitio de WordPress, ya que las clases body pueden añadirse condicionalmente.

WordPress contiene varias clases body predeterminadas que se tratan en este artículo.

Añadir la clase body

Hay algunos métodos disponibles para añadir nuevas clases body dentro de WordPress. Este tutorial va a cubrir la adición de la clase body dentro de un tema (normalmente definido en header.php) usando la función body_class y la adición de clases usando un filtro.

Editando el tema: Pasar un valor de clase de body

Esta es una forma muy simple de añadir clases body y es especialmente útil si estás creando un tema. La clase body se incluye normalmente en un tema usando el siguiente código:

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

Para añadir tu propia clase a esto, puedes pasar un argumento a la función, así:

<body >?php body_class('my-class');?>>

Esto añadiría una clase body my-class en cada página de tu sitio de WordPress.

Clases body estáticas y dinámicas por defecto en WordPress

Las clases suelen añadirse a cualquier elemento para apuntar a ellos ya sea para estilizarlos usando CSS o manipular su contenido usando JavaScript.

La función body_class() en WordPress nos facilita mucho esto añadiendo automáticamente un montón de clases apropiadas a la etiqueta body de nuestro sitio web.

Un ejemplo de ello sería la clase logged-in que se añade a la etiqueta body si un usuario conectado está viendo la página. La clase logged-in no se agregará al body si un usuario desconectado está viendo la página.

Del mismo modo, otras clases como category, archive, search y tag, etc. se añaden automáticamente a la etiqueta body si el usuario está viendo un tipo específico de página. Esto permite estilizar el contenido de una página de forma selectiva dependiendo de su tipo.

La función body_class() también agrega un montón de clases que pueden ser usadas para apuntar a cosas como páginas de archivo de una etiqueta o categoría específica. Por ejemplo, digamos que tu sitio web tiene algunos posts archivados en la categoría "tutorial" y otros posts archivados en "tip". Si visitas la página de archivo de la categoría de tutoriales, verás que su etiqueta body contiene también clases como category-tutorial. Estas clases dinámicas te permiten dirigirte a páginas y posts para aplicarles un estilo muy específico.

Si planeabas añadir alguna clase a la etiqueta body para dirigirte a este tipo de publicaciones y páginas, sería mejor usar las clases añadidas por defecto. Todas esas clases añadidas por WordPress se mencionan aquí en la documentación de WordPress.

Añadiendo múltiples clases body

Puede haber momentos en los que quieras añadir más de una clase body. Esto se puede lograr usando un simple arreglo:

Esto toma todas las clases del array y las pasa a la función body_class.

Añadir condicionalmente una clase body

También es posible que quieras añadir condicionalmente una clase body. Esto es fácil con un simple PHP. Este ejemplo usa el método condicional de WooCommerce de is_shop() :

<?php if (is_shop() ) {body_class('is-woocommerce-shop' ); } else { body_class(); } ?>

Nota: WooCommerce ya agrega una clase basada en esto, por lo que nota que esto es puramente un ejemplo.

Lo que el código anterior está haciendo, es comprobar que la primera función está volviendo verdadera, si es verdadera entonces la clase body tiene is-woocommerce-shop añadido a ella; de lo contrario, si no es verdadera entonces solo la clase body por defecto se está mostrando.

Añadir una clase body por filtro

También es posible usar un filtro de WordPress para añadir una clase body. Este método mantiene el código del tema más limpio y es particularmente útil si quieres añadir una clase body desde un plugin. Este código puede ir en tu tema functions.php o en tu plugin.

Esto agrega una clase (o clases, dependiendo de su implementación) al array y devuelve el array completo.

Añadiendo múltiples clases body por filtro

Para añadir más clases al filtro, solo tienes que añadir otra línea que añada otro valor al conjunto:

Añadir condicionalmente una clase body por filtro

Las condiciones también se pueden utilizar en un filtro. Tomando el mismo ejemplo que usamos antes, podemos lograr el mismo efecto:

Añadir una clase body basada en la plantilla de página

De manera predeterminada, WordPress agrega una clase body para tu plantilla de página, pero si eres un desarrollador de front-end y tienes convenciones de nomenclatura para tu CSS, entonces tal vez quieras cambiar esto.

Por ejemplo, una plantilla de página llamada "media página" tendría una clase body depage-template-page-halfhalf-php, no muy buena.

Así que vamos a añadir una nueva clase, usando un filtro y una etiqueta condicional de WordPress:

Esto añadirá la clase body class halfhalf-page si la plantilla de la página es page-halfhalf.php.

Quitar una clase body

Es poco probable que quieras eliminar una clase body, ya que no estás obligado a usarlas y añaden muy poco a tu marcado. Dicho esto, es posible hacer esto usando el mismo filtro de body_class.

La forma más fácil y rápida de eliminar una o más clases de la etiqueta body es definir un array de clases que quieras eliminar. Después de eso, simplemente llamando a la función array_diff() se devolverá un nuevo array que contiene la lista completa de clases después de eliminar las clases que especificamos.

No tendrás que hacer un bucle a través de todo el conjunto y desarmar las clases de una en una. En nuestro caso, quitamos las clases custom-class y archive de la etiqueta body.

¡Eso es todo, amigos!

En este pequeño tutorial hemos cubierto dos métodos para añadir la clase body de WordPress:

  1. Usando la función body_class dentro de un tema,
  2. Y usando un filtro.

También hemos cubierto la adición de clases body de forma condicional y la eliminación de las clases, en caso de que sea necesario hacerlo en el futuro desarrollo.

Aprende más sobre WordPress de Envato Tuts+

Envato Tuts+ es una gran plataforma para adquirir nuevas habilidades. Nuestro equipo de instructores ha hecho tutoriales, guías y cursos sobre muchos temas, incluyendo WordPress y diseño web. Si quiere profundizar en estos temas, empieza con los artículos siguientes:

¡Si eres un aprendiz visual, mira nuestro ¡canal de YouTube! Está lleno de útiles video tutoriales y guías para WordPress y diseño web. Echa un vistazo a nuestras listas de reproducción y explora nuestro canal. También puedes ver este video para empezar:

Este post ha sido actualizado con contribuciones de Monty Shokeen. Monty es un desarrollador de pila completa que también ama escribir tutoriales, y aprender sobre nuevas librerías de JavaScript.

Advertisement
Advertisement
Looking for something to help kick start your next project?
Envato Market has a range of items for sale to help get you started.