¿Es usted un aspirante a diseñador de temas de WordPress que busca nuevas formas de usar CSS en sus temas? Afortunadamente, WordPress agrega automáticamente clases de CSS que puede usar en sus temas. Varias de estas clases de CSS se agregan automáticamente al
sección 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 diseñadores de temas en ciernes los utilicen en sus proyectos.
Aquí hay una descripción general rápida de lo que aprenderá en este artículo.
¿Qué es WordPress Body Class?
Contents
Body class (body_class) es una función de WordPress que le permite asignar clases CSS al elemento body. La etiqueta del cuerpo HTML normalmente comienza en el archivo header.php de un tema, que se carga en cada página. Esto le permite determinar dinámicamente qué página está viendo un usuario y luego agregar las clases CSS en consecuencia. Normalmente, la mayoría de los temas y marcos de inicio ya incluyen la función de clase de cuerpo en la etiqueta de cuerpo HTML. Sin embargo, si su tema no lo tiene, puede agregarlo modificando la etiqueta del cuerpo de esta manera:
Dependiendo del tipo de página mostrada, WordPress agrega automáticamente las clases apropiadas. Por ejemplo, si está en una página de archivo, WordPress agregará automáticamente una clase de archivo al elemento del cuerpo. Hace esto para casi todas las páginas.
Relacionado: Vea cómo funciona WordPress entre bastidores (infografía) A continuación, se muestran algunos ejemplos de clases comunes que WordPress podría agregar, según la página que esté viendo: .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 de 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 su alcance, puede personalizar completamente er su página de WordPress usando solo CSS. Puede personalizar páginas de perfil de autor específicas, archivos basados en fechas, etc. Dicho esto, ahora veamos cómo y cuándo usar la clase body.
Cuando usar la clase de cuerpo de WordPress
Primero, debe asegurarse de que el elemento del cuerpo de su tema contenga la función de la clase del cuerpo como se muestra arriba. Si es así, incluirá automáticamente todas las clases CSS generadas por WordPress mencionadas anteriormente. Después de eso, también puede agregar sus propias clases CSS personalizadas al elemento del cuerpo. Puede agregar estas clases cuando lo necesite. Por ejemplo, si desea cambiar la apariencia de las publicaciones de un autor específico que están categorizadas en una categoría específica.
Cómo agregar clases de cuerpo personalizadas
WordPress tiene un filtro que puede usar 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. Dado que las clases corporales son específicas del tema, debe agregar el siguiente código al archivo functions.php de su tema. function my_class_names ($ classes) {// agregar ‘nombre de clase’ a la matriz $ clases $ clases[] = ‘clase wpb’; // devuelve la matriz $ clases return $ clases; } // Ahora agregue la clase de prueba al filtro add_filter (‘body_class’, ‘my_class_names’); El código anterior agregará una clase «wpb-class» a la etiqueta del cuerpo en cada página de su sitio web. No es tan malo, ¿verdad? Ahora puede usar esta clase CSS directamente en la hoja de estilo de su tema. Si está trabajando en su propio sitio web, también puede agregar el CSS utilizando la función CSS personalizada en el personalizador de temas.
Agregue una clase de cuerpo usando un complemento de WordPress
Si no está trabajando en un proyecto de cliente y no quiere escribir ningún código, este método le resultará más fácil. Lo primero que debe hacer es instalar y activar el complemento Custom Body Class. Para obtener más detalles, consulte nuestra guía paso a paso sobre cómo instalar un complemento de WordPress. Tras la activación, debe visitar Configuración »Clase de cuerpo personalizada página. Desde aquí puede configurar los ajustes del complemento.
Puede seleccionar los tipos de publicaciones para las que desea habilitar la función de clase de cuerpo y quién puede acceder a ella. No olvide hacer clic en el botón Guardar cambios para guardar su configuración. Luego, puede dirigirse a editar cualquier publicación o página en su sitio de WordPress. En la pantalla de edición de publicaciones, encontrará un nuevo cuadro de meta en la columna de la derecha titulado «Clases posteriores».
Haga clic para agregar sus clases CSS personalizadas. Puede agregar varias clases separadas por un espacio. Una vez que haya terminado, simplemente puede guardar o publicar su publicación. El complemento ahora agregará sus clases CSS personalizadas a la clase del cuerpo para esa publicación o página en particular.
Usar etiquetas condicionales con la clase Body
El verdadero poder de la función body_class viene cuando se usa con etiquetas condicionales. Estas etiquetas condicionales son tipos de datos verdaderos o falsos que verifican 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 verificar si una condición es verdadera o falsa antes de agregar una clase CSS personalizada a la función body_class. Echemos un vistazo a algunos ejemplos del uso de etiquetas condicionales para agregar clases personalizadas a la clase del cuerpo. Suponga que desea personalizar su página de inicio para los usuarios que han iniciado sesión con el rol de usuario autor. Aunque WordPress genera automáticamente una clase .home y .logged-in, no detecta el rol del usuario ni lo agrega como una clase. Ahora, este es un escenario en el que puede usar etiquetas condicionales con código personalizado para agregar dinámicamente una clase personalizada a la clase del cuerpo. Para hacer esto, agregará el siguiente código al archivo functions.php de su tema. function wpb_loggedin_user_role_class ($ classes) {// verifica si esta es la página de inicio if (is_home ()) {// Ahora verifiquemos si el usuario que inició sesión tiene el rol de usuario autor. $ usuario = wp_get_current_user (); if (in_array (‘autor’, (matriz) $ roles de usuario)) {// El usuario tiene el rol de «autor» // Agrega el rol de usuario a la clase del cuerpo $ clases[] = ‘autor’; // Devuelve la matriz de clases return $ clases; }} else {// si no es la página de inicio, devuelve las clases predeterminadas return $ classes; }} add_filter (‘body_class’, ‘wpb_loggedin_user_role_class’); Ahora, echemos un vistazo a otro ejemplo útil. Esta vez, comprobaremos si la página mostrada es una vista previa de un borrador de WordPress. Para hacer esto, usaremos la etiqueta condicional is_preview y luego agregaremos nuestra clase CSS personalizada. function add_preview_class ($ clases) {if (is_preview ()) {$ clases[] = ‘modo de vista previa’; return $ clases; } devuelve $ clases; } add_filter (‘body_class’, ‘add_preview_class’); Ahora agregaremos el siguiente CSS a la hoja de estilo de nuestro tema para usar la nueva clase CSS personalizada que acabamos de agregar. .preview-mode .site-header: antes de {contenido: ‘modo de vista previa’; color: #FFF; color de fondo: # ff0000; } Así es como se veía en nuestro sitio de demostración:
Puede consultar la lista completa de etiquetas condicionales que puede usar en WordPress. Esto le dará un conjunto útil de etiquetas listas para su código.
Otros ejemplos de adición dinámica de clases de cuerpo personalizadas
Además de las etiquetas condicionales, también puede utilizar otras técnicas para recuperar información de la base de datos de WordPress y crear clases CSS personalizadas para la clase body.
Agregar nombres de categoría a la clase de cuerpo de una sola página de publicación
Suponga que desea personalizar la apariencia de elementos individuales según la categoría en la que están clasificados. Puede usar la clase de cuerpo para lograr esto. Primero, debe agregar nombres de categorías como una clase CSS en las páginas de publicaciones individuales. Para hacer esto, agregue el siguiente código al archivo functions.php de su tema: // agregue los nombres de las categorías a la función de la clase del cuerpo category_id_class ($ classes) {global $ post; foreach ((get_the_category ($ post-ID)) como $ categoría) $ clases[] = $ categoría-categoría_de_nombre; return $ clases; } 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. A continuación, puede utilizar clases CSS para diseñarlo como desee.
Agregar un slug de página a la clase de cuerpo
Pegue el siguiente código en el archivo functions.php de su tema: // Función Page Slug Body Class add_slug_body_class ($ classes) {global $ post; if (isset ($ post)) {$ clases[] = $ post-post_type. ‘-‘. $ post-post_name; } devuelve $ clases; } add_filter (‘body_class’, ‘add_slug_body_class’);
A veces, puede tener problemas en los que su tema puede necesitar CSS adicional para un navegador en particular. Ahora la buena noticia es que WordPress detecta automáticamente …
