Muchas veces a la hora de desarrollar nuestros propios temas personalizados para wordpress, o bien, realizar ediciones avanzadas en nuestros themes, necesitamos asignar propiedades CSS distintas a los mismos elementos, según la sección del blog en la que se encuentren (home, single, page, etc).
Al intentar asignarle una clase CSS a nuestra etiqueta puede que nos encontremos con la sorpresa de una etiqueta en php que genera las clases por defecto en nuestro archivo header.php, de wordpress:
<body <?php body_class(); ?>>
La manera más practica de agregar nuestra clase personalizada es simplemente agregarla de ésta forma:
<body <?php body_class('mi-clase-personalizada'); ?>>
Un ejemplo de uso podría ser:
<body <?php if ( is_page() ){body_class('clase-para-mis-paginas');} else {body_class(); } ?>>
En la pieza de código anterior, lo que vemos es un condicional que agregará la clase .clase-para-mis-paginas cada vez que nuestros usuarios naveguen en nuestras “páginas” de WordPress; evitará mostrarlo en la página principal o en los posts.
Diego
ago 17. 2011
Hola; estaba viendo lo que hiciste por que tengo un problema y no se si me puedas ayudar;
quiero darle una clase a una pagina en especifico y no se como hacerlo me puedes ayudar?
Gracias!!
elfleat
ago 19. 2011
Hola Diego, ésto te servirá:
<body <?php if (is_page('1')) {body_class('CLASSNAME');} else {body_class(); } ?>>Debes reemplazar ’1′ por el ID de la página en la que quieres que salga la clase, y ‘CLASSNAME’ por el nombre de la clase.
Pablo
ago 29. 2011
¿y para darle una clase a cada sección como sería?
Gracias!
elfleat
sep 05. 2011
Hola Pablo, con cada “Seccion” a que te refieres? Segun la categoria, post o pagina?
Sergio
nov 21. 2011
Hola elfleat, tengo una duda y talvez me puedas ayudar, quiero insertar una nueva entrada con un estilo diferente, como hago esto..?
elfleat
nov 21. 2011
Hola Sergio,
Es sencillo, puedes utilizar un codigo similar a éste:
<body <?php if (is_post('1')) {body_class('CLASSNAME');} else {body_class(); } ?>>Reemplaza donde dice is_post(’1′) por el id del post específico en el que quieres la clase (el id lo puedes ver en la url cuando estás editando la entrada desde el panel de administración).
Reemplaza donde dice “CLASSNAME” por el nombre de la clase que quieres utilizar para ese post en específico.
Y en el css, utiliza la clase para referirte a cada elemento estilo:
.CLASSNAME h1, .CLASSNAME h2{ padding-bottom:4px; border:1px solid lightgray; }Sergio
nov 29. 2011
Como haces para dar una clase al body, pero que pille automático el nombre osea class=”CLASE EL NOMBRE DE LA PÁGINA QUE ESTOY” ???
Un saludo
Sergio
nov 29. 2011
solucionado sorryyy