Vamos a ver como añadir atributos y clases CSS al body de WordPress. Es un método que uso en muchas de mis páginas web y te lo recomiendo. Sobre todo te pude ser útil cuando necesites personalizar estilos en tu web.
Porque te lo recomiendo:
Los atributos por otra parte son útiles para:
Puedes velo con las herramientas de desarrollador de Chrome (F12). En la etiqueta veras una gran variedad de clases que son inyectadas por WordPress, tu tema y tus plugins.
Entonces tú también puedes 🙂
Para esto disponemos de la función body_class()
Como siempre recomiendo instalar el plugin Code Snippets. Si no sabes qué hace este plugin tienes un artículo y video de cómo usar Code Snippets.
La función que necesitamos es la que ves a continuación. Esta función lo que va ha hacer es añadir una clases a la etiqueta body en todas las páginas del sitio web.
/** * Añade una clase a la etiqueta body. * Esta clases estara presente en todo el sitio web. */ function rv_site_body_class($wp_classes, $classes) { $post = get_post(); //Esta clase CSS estara presente en todo el sitio web $classes[] .= 'mi-clase'; return array_merge($wp_classes, (array)$classes); } add_filter('body_class', 'rv_site_body_class', PHP_INT_MAX, 2);
Tambien podemos añadir una diferente con la ayuda de las etiquetas condicionales que incluye WordPress.
is_page() Cuando queremos añadirla al body de las páginas.
// Clase CSS para todas las páginas if (is_page()) { $classes[] = 'clase-todas-paginas'; }
is_singular() Cuando queremos añadirla a las entradas o entradas personalizadas, los famosos CPT.
// Clase CSS para post y post personalizados CPT if (is_singular()) { $classes[] = 'clase-post'; }
Podemos unirlo todo en una solo función y entonces aplicar diferentes clases según el tipo de contenido.
/** * Añade una clase a la etiqueta body. * La primera estará presente en todo el sitio web, * la segunda solo en a las páginas y la tercera * en a las entradas y entradas personalizadas(CPT) */ function rv_content_type_body_class($wp_classes, $classes) { $post = get_post(); //Clase CSS para todo el sitio web $classes[] .= 'mi-clase'; // Clase CSS para las páginas if (is_page()) { $classes[] = 'clase-paginas'; } // Clase CSS para post y post personalizados CPT if (is_singular()) { $classes[] = 'clase-posts'; } return array_merge($wp_classes, (array)$classes); } add_filter('body_class', 'rv_content_type_body_class', PHP_INT_MAX, 2);
El resultado final se puede ver en la siguiente imágen.
El snippet para añadir atributos es muy parecido al anterior con solo algunos pequeños cambios.
/** * Añade un atributo personalizado a la * etiqueta body de WordPress */ function rv_site_schema_org($wp_classes, $schema) { $schema[] = '" data-spy="scroll'; return array_merge($wp_classes, (array)$schema); } add_filter('body_class', 'rv_site_schema_org', PHP_INT_MAX, 2);
Nota: Fíjate en las comillas al introducir el atributo, asegúrate de ponerlas tal y como están en el ejemplo de arriba.
La siguiente imagen se muestra el resultado de la función.
Y eso es todo amigos, ¿Te ha salido? ¿Algo te falla? ¡coméntame y te echo una mano, nos vemos la próxima!
Suscribete y recibe guías, trucos, recomendaciones, shortcodes y guías de los mejores plugins de WordPress.
Rubén Veliz
Diseñador web freelance especializado en páginas web a medida, escalables y fáciles de administrar. Utilizo WordPress de forma exclusiva desde hace más de 6 años. Quiero compartir con vosotros la experiencia de emprender y el apasionante mundo de WordPress.