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

A través de nuestra experiencia en el uso de WordPress, hemos encontrado que a menudo los diseñadores de temas piensan demasiado en cierta funcionalidad. Están buscando locos filtros y ganchos de WordPress para realizar una tarea cuando todo lo que necesitan es algo de CSS simple. WordPress por defecto genera una gran cantidad de clases de CSS. (WordPress CSS Cheat Sheet). Una de estas clases de CSS es el estilo de las clases de cuerpo. En este artículo, explicaremos la clase de cuerpo de WordPress 101 y compartiremos algunos consejos y trucos útiles para los diseñadores de temas principiantes..

¿Qué es WordPress Body Class??

Body Class (body_class) es una función de WordPress que proporciona diferentes clases al elemento del cuerpo, por lo que los autores de los temas pueden personalizar sus sitios de manera efectiva con CSS. La etiqueta de cuerpo HTML está presente principalmente en su archivo header.php que se carga en cada página. Al codificar un tema, puede adjuntar la función body_class a su elemento body de la siguiente manera:

Al agregar este pequeño elemento, te das la flexibilidad de modificar fácilmente el aspecto de cada página mediante el uso de CSS. Dependiendo del tipo de página que se está cargando, WordPress agrega automáticamente la clase apropiada. Por ejemplo, si está en una página de archivo, WordPress agregará automáticamente la clase de archivo al elemento del cuerpo si decide usarlo. Lo hace para casi todas las páginas. Aquí hay algunos ejemplos de clases comunes que WordPress podría agregar:

 .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- (nombre del archivo de plantilla)  .search-results  .search-no-results  .logged-in  .paged- (número de página)  .single-paged- (número de página)  .page-paged- (número de página)  .category-paged- (número de página)  .tag-paged- ( número de página)  .date-paged- (número de página)  .author-paged- (número de página)  .search-paged- (número de página)  

Como puede ver, al tener un recurso tan poderoso a la 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. ¿Cómo y cuándo usaría esto??

Cómo usar WordPress Body Class

En la mayoría de los casos, la clase de cuerpo de WordPress es la solución simple que los diseñadores de temas a menudo ignoran. Sí, esto también nos incluye a nosotros. Hace aproximadamente un año, necesitábamos diseñar un elemento del menú de WordPress que solo estuviera en una página específica. Decidimos profundizar para encontrar un filtro para agregar una clase de navegación especial a los elementos del menú que se agregarían mediante una declaración condicional. Por ejemplo, si es una sola página, agregue la clase "Blog" a los elementos del menú. Después de dedicar todo el tiempo a averiguar todo eso y escribir una publicación al respecto, uno de nuestros usuarios señaló que podríamos haberlo hecho fácilmente con la clase de cuerpo existente, como por ejemplo:

.single #navigation .leftmenublog div display: inline-block! important;

Aviso: cómo utiliza la clase de cuerpo .single que se agrega en todas las páginas de una sola publicación.

Chico no nos sentimos estúpidos después de eso. Desde entonces, hemos tomado una nota para ver si las cosas se pueden hacer con la clase de cuerpo antes de profundizar..

Para darte otro ejemplo. Una vez que un usuario se acercó a nosotros, solicitó una manera de cambiar la imagen del logotipo en su sitio web en función de la página de categoría. La mayoría de los diseños de temas, incluido el suyo, cargaban el logotipo utilizando un CSS (#header .logo). Sugerimos cómo utilizar la clase de cuerpo .category-slug para cambiar su logotipo de esta manera:

 .category-advice #header .logo background: url (images / logo-advice.png) no-repeat! important; .category-health #header .logo background: url (images / logo-health.png) no- repita! importante; 

Este nuevo diseñador de temas tuvo el mismo momento ah-hah que tuvimos nosotros. Esperemos que ahora entiendas cómo puedes utilizar la clase de cuerpo en tus diseños de tema. Pero espera, esto se vuelve aún más poderoso porque hay una manera de agregar clases de cuerpo personalizadas usando un filtro. Echemos un vistazo a cómo hacer eso.

Cómo agregar clases de cuerpo personalizado

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 caso de uso específico solo para que todos puedan estar en la misma página.

Debido a que las clases corporales son específicas del tema, necesitarías escribir una función personalizada en tu archivo functions.php como:

 function my_class_names ($ classes) // agregue 'class-name' a $ classes array $ classes [] = 'test-class-name'; // devuelve el $ classes array return $ classes;  // Ahora agregue la clase de prueba al filtro add_filter ('body_class', 'my_class_names'); 

El código anterior agregará una clase "nombre de clase de prueba" a la etiqueta del cuerpo en cada página de su sitio web. Eso no es tan malo verdad? El poder real de esta función está en las etiquetas condicionales. Puede decir agregar la clase XYZ solo en páginas individuales, etc. Tomemos este ejemplo y apliquémoslo al escenario de uso real..

Agregar clase de categoría a páginas de publicación única

Digamos que desea personalizar las páginas de una sola publicación de cada categoría. Dependiendo del tipo de personalización, puedes usar clases de cuerpo para ello. Para simplificar las cosas, supongamos que desea cambiar el color de fondo de la página en función de la categoría de publicaciones individuales. Puede hacerlo agregando clases de categoría a sus vistas de página de una sola publicación. Pegue la siguiente función en el archivo functions.php de su tema:

 // agregar nombres de categoría en la clase de cuerpo función category_id_class ($ classes) global $ post; foreach ((get_the_category ($ post-> ID)) como $ category) $ classes [] = $ category-> category_nicename; devuelve $ clases;  add_filter ('body_class', 'category_id_class'); 

El código anterior agregará la clase de categoría en su clase de cuerpo para las páginas de una sola publicación. A continuación, puede utilizar las clases de css para el estilo que desee.

Añadir Slug Page en clase de cuerpo de sus temas de WordPress

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

 // Función Slug Body Class add_slug_body_class ($ classes) global $ post; if (isset ($ post)) $ classes [] = $ post-> post_type. '-'. $ post-> post_name;  devolver $ clases;  add_filter ('body_class', 'add_slug_body_class'); 

Lea nuestro artículo en la lista de páginas en clase de cuerpo que explicará por qué necesitamos esto.

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

En ocasiones, es posible que deba tener estilos CSS especiales para que todo funcione correctamente en ciertos navegadores (SUGERENCIA: Internet Explorer). Bueno, Nathan Rice sugirió una solución genial que agrega clases específicas del navegador a la clase del cuerpo según el navegador desde el que el usuario visita el sitio..

Todo lo que tienes que hacer es pegar el siguiente código en tu archivo functions.php:

A continuación, puede utilizar clases como:

.ie .navigation algún artículo va aquí

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

Más casos de uso:

Probablemente podamos enumerar muchos más casos de uso, pero de lo contrario este artículo no se nos escapará de las manos. El objetivo principal era ayudar a los nuevos desarrolladores de temas a comprender los conceptos básicos de la clase de cuerpo de WordPress y sus ventajas. Los casos de uso están limitados a su imaginación. Hemos visto a los desarrolladores de temas comerciales (Génesis) usar clases de cuerpo para ofrecer varias opciones de diseño. Por ejemplo, el diseño de página completo, el contenido de la barra lateral, la barra lateral de contenido, etc. Al hacerlo, el usuario puede cambiar fácilmente el diseño de su página sin preocuparse por los problemas de aspecto, porque ya se encargó de CSS.0

Hemos visto a algunos desarrolladores agregar solicitudes HTTP para cargar archivos CSS para varios esquemas de color que ofrecen. En muchos casos, los cambios son muy pequeños también. No tiene sentido cargar 3 hojas de estilo cuando uno puede hacer el trabajo. Solo usa la clase de cuerpo para eso.

Con suerte, has encontrado este artículo útil. Nos complacería escuchar sus opiniones sobre Body Class y cómo lo ha usado en el pasado o planea hacerlo en el futuro..