Blog
Blog sobre programación y diseño en la web
Clases dinámicas en body utilizando la función body_class() de Wordpress
Translate this page into EnglishNo hace mucho, y gracias al tema Starkers, descubrí una nueva función de wp-includes/post-template.php en Wordpress 2.8, body_class().
Esta función me ha permitido introducir de manera automática clases en el elemento body, normalmente situado en el archivo header.php de nuestro tema de Wordpress. Estas clases varían según la página en la que se encuentra el usuario, y son muy útiles para luego poder aplicar estilos diferentes a cada página.
Se usa así:
1 | <body <?php body_class(); ?>> |
Vamos a ver ejemplos de qué genera:
Si estamos en la página de inicio y además tenemos el blog en la misma página, la clase que genera es esta:
1 | <body class="home blog"> |
Como vemos genera dos clases separadas que podemos usar en nuestra hoja de estilos.
Pero si estamos en la página de inicio y esta es una página estática que no incluye el blog, la clase que generaría podría ser algo como esta:
1 | <body class="home page page-id-3 page-template page-template-inicio-php"> |
Como vemos en este caso nos genera diversas clases: una al ser la página de inicio, otra por ser una página, otra que identifica la página y finalmente otra que identifica el template utilizado en la página. Esto nos permite, por ejemplo, aplicar un estilo único a todas las páginas que utilicen un template determinado, o aplicar un diseño individualizado a cada página.
Otro uso perfecto sería para dar estilo a un navegador creado con imágenes, para identificar la página en la que nos encontramos y marcarla como tal.
En el caso de que estemos en un artículo del blog lo que generaría sería algo de este tipo:
1 | <body class="single postid-71"> |
Lo que nos ayuda a identificar que es un artículo del blog y además lo hace de manera individual, lo que nos permitiría dar un estilo diferente a cada artículo si así lo quisiéramos.
En resumen, body_class() genera clases CSS dinámicas basadas en el tipo de contenido y en las circunstancias bajo las que estás viendo una página concreta (por ejemplo si estás registrado o no en el caso de solicitarse).
Pero si queremos que además de las clases generadas dinámicamente se añada una clase elegida por nosotros, escribiríamos:
1 | <body <?php body_class('nombre_clase'); ?>> |
Más lecturas recomendadas sobre body_class():
Nathan Rice blog.
WPEngineer.com, que incluye además una lista completa de las clases que se generan.
Código de la función get_body_class().
Perisable Press muestra diversas maneras de establecer IDs dinámicos en Wordpress.
5 Comentarios a “Clases dinámicas en body utilizando la función body_class() de Wordpress”:
Escribir un comentario
XHTML: Puedes usar estos códigos de HTML: <a href="" title=""> <abbr title=""> <acronym title=""> <b> <blockquote cite=""> <cite> <code> <del datetime=""> <em> <i> <q cite=""> <strike> <strong> <pre lang="" line="" escaped="">
Hola una pregunta si en dado caso quisiera que esto fuera para mis categorias seria asi
pero esto donde lo colocaria en el category.php o en el header…???
Hola Jorge,
Creo que has puesto algo de código que no ha salido, no?
Intenta ponerlo sin el inicio y final de php o entre pre y /pre
Hola Juan regresando otra vez de una larga ausencia jeje mira no logro entender esto baje el tema que mensionas tu y vi su codigo etc… y no entiendo como genera las clases donde las genera pork yo pongo el codigo este body <?php body_class() en vez de mi body verda y donde supuestamente aparecn o genera las clases no entiendo :S si me puedes ayudar porfa que si quiero hacer esto gracias antisipadamente
Hola Jorge,
Al poner el body_class() si una vez tengas la página das al botón derecho y miras el código (o mejor aún lo ves con Firebug) verás que el body tiene generado automáticamente una serie de clases dependiendo dónde te encuentres. Esas clases las puedes usar con tu hoja de estilos.
ufffff maestro jaja me a servido demasiado jajaja ufff k buenisimo esta esto muchas gracias enserio gracias gracias por tu tiempooo…