homefinance blog
¿Es usted un diseñador de temas de WordPress que busca nuevas formas de usar CSS en su tarea? Afortunadamente, WordPress agrega automáticamente las clases CSS que puede usar en su tarea. Varias de estas clases de CSS se agregan automáticamente a la sección de cada página en un sitio de WordPress. En este artículo, explicaremos la clase de cuerpo de WordPress con consejos y trucos para que los aspirantes a diseñadores de temas los usen en sus proyectos.
Aquí hay una presentación rápida de lo que descubrirá en este artículo.
¿Qué es la clase de cuerpo de WordPress?
Cuando se usa la clase del cuerpo
Cómo agregar clases de cuerpo personalizadas
Cómo agregar la clase del cuerpo usando un complemento
Uso de etiquetas condicionales para agregar clases de cuerpo personalizadas
Más ejemplos de la adición dinámica de clases de cuerpo personalizadas
Detectar el navegador de usuarios y agregar clase de cuerpo específico del navegador
¿Qué es la clase de cuerpo de WordPress? La clase Body_Class es una función de WordPress que le permite asignar CSS Element Corps.
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 averiguar dinámicamente qué página ve a un usuario y luego agregar las clases de CSS en consecuencia. Normalmente, la mayor parte de la tarea y los marcos ya incluyen la función de clase del cuerpo en la etiqueta del cuerpo HTML. Sin embargo, si su tema no lo tiene, puede agregarlo cambiando la etiqueta del cuerpo de la siguiente manera: <Body <? Php Body_class ($ class); ?
Por ejemplo, si está en una página de archivo, WordPress agregará automáticamente la clase de archivo al elemento del cuerpo. Haga esto para casi todas las páginas. RELACIONADO: Vea cómo funciona WordPress en el backstage (infográfico) Aquí hay algunos ejemplos de clases ordinarias que WordPress podría agregar, dependiendo de la página que se muestra: .rtl {} .Home {}
.Blog {}
.Archivo {}
.fecha {}
.búsqueda {}
.paged {}
.archivo adjunto {}
.error 404 {}
.Single postid- (id) {}
.attachmentId- (id) {}
.attachment- (tipo mime) {}
.AUTOR {}
.author- (user_nicename) {}
.categoría {}
.Category- (Slug) {}
.Etiqueta {}
.Tag- (slug) {}
.page-deputy {}
.page-child parent-pageID- (id) {}
.page-platlate page-teplate- (nombre de archivo de plantilla) {}
.Resultados de la búsqueda {}
.Search-No-Results {}
.conectado {}
.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 fuerte a la mano, puede personalizar completamente la página de WordPress usando solo CSS. Puede personalizar ciertas páginas del perfil del autor, archivos basados en datos, etc.
Dicho esto, ahora echemos un vistazo a cómo y cuándo usas la clase del cuerpo. Al usar la clase de cuerpo de WordPress primero, debe asegurarse de que el elemento del cuerpo de su cuerpo contenga la función de clase de su cuerpo como se muestra arriba. Si lo hace, incluirá automáticamente todas las clases CSS generadas por WordPress mencionadas anteriormente. Después de eso, podrá agregar sus propias clases CSS personalizadas al elemento del cuerpo. Puede agregar estas clases cuando las necesite. Por ejemplo, si desea cambiar la apariencia de artículos de cierto autor enviado en una determinada categoría. Cómo se agregan las clases de cuerpo personalizadas de 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 casos específico para que todos puedan estar en la misma página. Debido a que las clases de cuerpo son temáticas específicas, deberá agregar el siguiente código a las funciones.php de su base my_class_names ($ class) {
// Agregar 'Nombre de clase' a la matriz de clases $
$ class [] = 'wpb-class';
// devuelve la matriz de clase $
Devolver $ classies;
}
// ahora agregue la clase de prueba al filtro
add_filter ('body_class', 'my_class_names');
El código anterior agregará una clase de "clase WPB" a la etiqueta del cuerpo en cada página de su sitio web. No es tan malo, ¿verdad?
Ahora puede usar directamente esta clase CSS en la hoja de estilo de su base. Si trabaja en su propio sitio web, también puede agregar CSS utilizando la función CSS personalizada.
Agregar la clase del cuerpo usando un complemento de WordPress si no trabaja en un proyecto de cliente y no desea escribir código, entonces este método sería más fácil para usted. Clase. Para obtener más detalles, consulte nuestra guía paso por paso sobre cómo instalar un complemento de WordPress. Tras la activación, debe acceder a la configuración de la página »Clase de cuerpo personalizado. Desde aquí puede configurar la configuración del complemento. Puede seleccionar los tipos de publicaciones en las que desea activar la función de clase del cuerpo y quién puede acceder a ella. Recuerde hacer clic en Guardar los cambios para almacenar su configuración. Luego puede ir a editar cualquier publicación o página en su sitio web de WordPress. En la pantalla de publicación, encontrará un nuevo Meta Box en la columna derecha, etiquetada como "Post Class".
Haga clic para agregar clases CSS personalizadas. Puede agregar más clases separadas a través de un espacio. Después de haber terminado, simplemente puede guardar o publicar la publicación. El complemento ahora agregará clases CSS personalizadas a la clase del cuerpo para la publicación o página.
El uso de etiquetas condicionadas con la clase del cuerpo El poder real de 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 verifica si la página se muestra actualmente 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 estilizar su página inicial para los usuarios conectados por el autor. Mientras que WordPress genera automáticamente una clase .Home y .logged -in, no detecta el papel del usuario o agregan como clase. Ahora, este es un escenario en el que puede usar las etiquetas condicionales con un cierto código personalizado para agregar dinámicamente una clase personalizada a la clase de cuerpo. Para lograr esto, agregará el siguiente código a las funciones de funciones.php de su base wpb_loggedin_user_role_class ($ classes) {
// Compruebemos si es una página de inicio
if (is_home ()) {
// Ahora verifiquemos si el usuario iniciado en el usuario tiene el usuario del autor.
$ user = wp_get_current_user ();
if (in_array (‘autor’, (array) $ user-> roles)) {
// El usuario tiene el rolle “autor”
// Agregar rol de usuario a la clase del cuerpo
$ class [] = ‘autor’;
// Devuelve la matriz de clases
Devolver $ classies;
}
} más {
// Si no es una página de inicio, simplemente devuelva classches predeterminado
Devolver $ classies;
}
}
add_filter (‘Body_class’, ‘wpb_loggedin_user_role_class’);
Ahora, echemos un vistazo a otro ejemplo útil. Esta vez verificaremos si la página mostrada es una vista previa de un boceto de WordPress.
Para esto, utilizaremos la etiqueta condicional IS_Praview y luego agregamos la clase CSS personalizada.
if (is_preview ()) {
$ class [] = ‘Preview-Model’;
Devolver $ classies;
}
Devolver $ classies;}
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 personalizada que acabamos de agregar … Mode de previsión. Site-Header: antes {
Contenido: ‘Modo de vista previa’;
Color: #fff;
Color de fondo:#FF0000;
}
Así es como se mostró en nuestro sitio demostrativo:
Es posible que desee consultar la lista completa de etiquetas acondicionadas que puede usar en WordPress. Esto le dará un conjunto práctico de etiquetas listas para usar para su código.
Otros ejemplos de dinámicas que agregan clases de cuerpo personalizadas Además de las etiquetas condicionales, puede usar otras técnicas para tomar información de la base de datos de WordPress y crear clases CSS CSS personalizadas. La adición de los nombres de categorías a la clase del cuerpo de una sola página de publicación Suponga que desea personalizar el aspecto de las publicaciones individuales de acuerdo con la categoría en la que están registrados. Puedes usar la clase del cuerpo para lograr esto. Primero, debe agregar el nombre de las categorías como clase CSS en páginas de publicación únicas. A esto, agregue el siguiente código al archivo Functions.php del tema: // agregue la categoría Nicenames en la clase del cuerpo
Función category_id_class ($ class) {
Global $ post;
foreach ((get_the_category ($ post-> id) como categoría $)
$ class [] = $ categoría-> category_nicename;
Devolver $ classies;
}
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 publicaciones individuales. Luego puede usar las clases CSS para estilizarlo como desee. Agregar el slog de página a la clase del cuerpo el siguiente código al archivo Functions.php del tema: // Page Slug Body Classifunction add_slug_body_class ($ class) {
Global $ post;
if (isset ($ post)) {
$ class [] = $ post-> post_type. ‘-‘. $ post-> post_name;
}
Devolver $ classies;
}
add_filter (‘body_class’, ‘add_slug_body_class’);
A veces es posible detectar clases de cuerpo específicas del navegador y navegador en los que su tema puede necesitar CSS adicional para un navegador en particular. Ahora la buena noticia es que WordPress detecta automáticamente el navegador en la carga y luego almacena temporalmente esta información como una variable global. Solo tiene que verificar si WordPress detectó un navegador en particular y luego agregarlo como una clase CSS personalizada. Simplemente copie y pegue el siguiente código al archivo Functions.php del tema:
Función wpb_browser_body_class ($ class) {
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) $ class [] = ‘iPhone-safari’;
Elseif ($ is_chrome) $ class [] = ‘Google-crome’;
Elseif ($ is_safari) $ class [] = ‘safari’;
Elseif ($ is_ns4) $ class [] = ‘Netscape’;
Elseif ($ is_opera) $ class [] = ‘ópera’;
Elseif ($ is_macie) $ class [] = ‘Mac -ie’;
Elseif ($ is_winie) $ class [] = ‘Windows -ie’;
Elseif ($ is_gecko) $ class [] = ‘Firefox’;
Elseif ($ is_lynx) $ class [] = ‘lynx’;
Elseif ($ is_ie) $ class [] = ‘Internet-Explorer’;
Elseif ($ is_edge) $ classches [] = ‘ms-eedge’; else $ class [] = ‘desconocido’;
Devolver $ classies;
}
add_filter (‘body_class’, ‘wpb_browser_body_class’);
Entonces puede usar clases como: .ms-edge .navigation {algún elemento va aquí} Si es un pequeño problema de llenado o margen, entonces esta es una manera bastante fácil de remediar. Ciertamente, hay varios escenarios en los que el uso de la función Body_Class puede evitar que escriba largas colas. Por ejemplo, si usa un marco temático como Génesis, puede usarlo para agregar clases personalizadas a su hijo. Puede usar la función Body_Class para agregar clases CSS para el ancho completo, el contenido de la barra lateral, el encabezado y los sótanos, etc. Esperamos que este artículo lo haya ayudado a aprender a usar la clase de Body Body de WordPress en su tarea. Es posible que desee ver nuestro artículo sobre cómo estilizar cada publicación de WordPress de manera diferente y nuestra comparación de los mejores complementos para el generador de páginas de WordPress. Si le gustó este artículo, suscríbase a nuestro canal de YouTube para los tutoriales de video de WordPress. También puede encontrarnos en Twitter y Facebook.
WordPress Body Clase 101: Consejos y trucos para diseñadores de temas
Tags WordPress Body Clase 101: Consejos y trucos para diseñadores de temas
