A lo largo de nuestra experiencia de uso de WordPress, hemos encontrado que a menudo los diseñadores de temas piensan demasiado en una cierta funcionalidad. Están buscando filtros y ganchos locos de WordPress para realizar una tarea cuando todo lo que necesitan es un simple CSS. WordPress por defecto genera muchas clases de CSS. (Hoja de trucos CSS de WordPress). Una de estas clases de CSS son los estilos de clase de cuerpo. En este artículo, explicaremos la clase de cuerpo 101 de WordPress 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 le da al elemento body diferentes clases, por lo que los autores de temas pueden diseñar sus sitios de manera efectiva con CSS. La etiqueta del 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, tiene la flexibilidad de modificar fácilmente el aspecto de cada página mediante CSS. Dependiendo del tipo de página que se carga, WordPress agrega automáticamente la clase adecuada. Por ejemplo, si está en una página de archivo, WordPress agregará automáticamente la clase de archivo al elemento del cuerpo si elige 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-(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 poderoso, puede personalizar completamente su página de WordPress usando solo CSS. Puede personalizar páginas específicas de perfil de autor, archivos basados en fechas, etc. Entonces, ¿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 de menú de WordPress que solo estaba 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 se trata de una sola página, agregue la clase “Blog” a los elementos del menú. Después de pasar todo el tiempo descifrando todo eso y escribiendo una publicación al respecto, uno de nuestros usuarios señaló que podríamos haberlo hecho fácilmente con la clase corporal existente de esta manera:
.single #navigation .leftmenublog div{display: inline-block !important;}
Aviso: cómo usa la clase de cuerpo .single que se agrega en todas las páginas de publicaciones individuales.
Chico, ¿no nos sentimos estúpidos después de eso? Desde entonces, hemos hecho una nota para ver si las cosas se pueden hacer primero con la clase de cuerpo antes de profundizar.
Para darte otro ejemplo. Una vez que un usuario se nos acercó pidiendo una forma 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 usar 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-repeat !important;}
Este nuevo diseñador de temas tuvo el mismo momento ah-hah que tuvimos. Con suerte, ahora está aprendiendo cómo puede utilizar la clase corporal en sus diseños de temas. Pero espere, 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 escenario de caso de uso específico para que todos puedan estar en la misma página.
Debido a que las clases de cuerpo son específicas del tema, necesitaría escribir una función personalizada en su archivo functions.php de esta manera:
function my_class_names($classes) {
// add 'class-name' to the $classes array
$classes[] = 'test-class-name';
// 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 “test-class-name” 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 que agregue la clase XYZ solo en páginas individuales, etc. Tomemos este ejemplo y aplíquelo al escenario de caso de uso real.
Agregar clase de categoría a páginas de publicación individuales
Digamos que desea personalizar las páginas de publicación individuales de cada categoría. Dependiendo del tipo de personalización, puede 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 publicación única. Pegue la siguiente función en el 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. Luego puede usar las clases css para diseñarlo como desee.
Agregue babosa de página en la clase de cuerpo de sus temas de WordPress
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' );
Lea nuestro artículo en la página babosa en clase corporal que explicará por qué necesitábamos esto.
Detección del navegador y clases corporales específicas del navegador
A veces es posible que necesite tener estilos CSS especiales para que todo funcione correctamente en ciertos navegadores (SUGERENCIA: Internet Explorer). Bueno, Nathan Rice sugirió una solución muy interesante que agrega clases específicas del navegador a la clase corporal en función del navegador desde el que el usuario visita el sitio.
Todo lo que tiene que hacer es pegar el siguiente código en su archivo functions.php:
Luego puede usar clases como:
.ie .navigation {some item goes here}
Si se trata de un pequeño problema de margen o relleno, esta es una forma bastante rápida de solucionarlo.
Más casos de uso:
Probablemente podamos enumerar muchos más casos de uso, pero no lo haremos, de lo contrario este artículo se saldrá de control. El objetivo principal era ayudar a los desarrolladores de nuevos temas a comprender los conceptos básicos de la clase corporal de WordPress y sus ventajas. Los casos de uso están limitados a su imaginación. Hemos visto a desarrolladores de temas comerciales (Génesis) usar clases corporales para ofrecer varias opciones de diseño. Por ejemplo, Diseño de página completa, Contenido de la barra lateral, 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 ha solucionado con 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 también son muy pequeños. No tiene sentido cargar 3 hojas de estilo cuando se puede hacer el trabajo. Solo usa body class para eso.
Esperemos que este artículo te haya resultado útil. Estaremos encantados de escuchar sus pensamientos sobre Body Class y cómo lo ha utilizado en el pasado o planea hacerlo en el futuro.
