Puedes recibir las actualizaciones gratis por email

Diferente CSS por categoría en WordPress

diferente-css-categoria-wordpress

Todo el que tenga un blog realizado en WordPress podrá cambiar el código CSS de cada categoría (colores, fondos, texto…). Si deseamos tener un estilo distinto para cada categoría, en esta entrada explicaré como realizarlo de forma fácil.

Este es el código a añadir en el archivo header.php de tu plantilla:

<link rel="stylesheet" href="<?php bloginfo('template_url')?>/azul.css" type="text/css" media="screen,projection" />
<?php
if( in_category( 1 ) )
{
?>
<link rel="stylesheet" href="<?php bloginfo('template_url')?>/azul.css" type="text/css" media="screen" />
<?php } elseif ( in_category (2) )
{
?>
<link rel="stylesheet" href="<?php bloginfo('template_url')?>/amarillo.css" type="text/css" media="screen" />
<?php } elseif ( in_category (33) )
{
?>
<link rel="stylesheet" href="<?php bloginfo('template_url')?>/negro.css" type="text/css" media="screen" />
<?php }else { ?>
<?php }?>
<link rel="stylesheet" href="<?php bloginfo('template_url')?>/azul.css" type="text/css" media="screen,projection" />

<?php

if( in_category( 1 ) )

{

?>

<link rel="stylesheet" href="<?php bloginfo('template_url')?>/azul.css" type="text/css" media="screen" />

<?php } elseif ( in_category (2) )

{

?>

<link rel="stylesheet" href="<?php bloginfo('template_url')?>/amarillo.css" type="text/css" media="screen" />

<?php } elseif ( in_category (33) )

{

?>

<link rel="stylesheet" href="<?php bloginfo('template_url')?>/negro.css" type="text/css" media="screen" />

<?php }else { ?>

<?php }?>

Si observamos el código podremos comprobar que se trata de un IF para estilizar la categoría que deseemos, y así poder asignarle a esta categoría el archivo CSS, que es llamado mediante la etiqueta <link>.

En el ejemplo mostrado anteriormente, la hoja de estilos “azul.css” es asignada a la ID #1, la ID #2 a la hoja de estilos “amarillo.css”, etc.

Si deseamos cambiar la clase a una categoría hija, no funcionaría, tendríamos que aplicar esta función.

Vía | Ayudawordpress

Sigue la onda...

Puedes recibir gratis más artículos por RSS, Twitter, Facebook o correo electrónico. ¡Muchas gracias por leerme!

Autor de CSSBlog ES

Por ahora hay 7 comentarios ¿Quieres opinar?

09.17.09

Me parece muy buena idea. Sin embargo me genera una inquietud.

¿No hay alguna manera de obtener el nombre de la categoría para compararla por nombre y no por su ID de la base de datos?

De cualquier forma, esto es ya un gran avance para quienes quieren personalizar al máximo su blog.

Saludos desde Guatemala y sigue adelante.

Los espero en mi blog: http://attakinsky.com/

[...] This post was mentioned on Twitter by Jonathan Ramírez, Manuel, Jose Alvarez Huete, Fernando Romeroand others. Fernando Romero said: RT @cssblog_es Diferente CSS por categoría en WordPress: http://bit.ly/3KXo0A [...]

[...] Go here to read the rest: Diferente CSS por categoría en WordPress | CSSBlog ES [...]

09.17.09

@Attakisnky sí, sería así:

( in_category (‘nombredelacategoria’) )

Un saludo.

09.17.09

I don’t know If I said it already but …I’m so glad I found this site…Keep up the good work I read a lot of blogs on a daily basis and for the most part, people lack substance but, I just wanted to make a quick comment to say GREAT blog. Thanks, :)

A definite great read..Jim Bean

[...] this article: Diferente CSS por categoría en WordPress | CSSBlog ES Comments0 Leave a Reply Click here to cancel [...]

09.17.09

Muy buen post! pude hacerlo funcionar! pero me queda una duda nada mas, que es como hacer para que en el index donde estan todas las entradas de todas la categorias, tambien se respenten los colores de las entradas segun cada categoria!

Muchas gracias! saludos!

Escribir un comentario

Tu comentario:
* El nombre, email y el comentario son requeridos
Comentaristas del mes
Últimos comentarios
  • Boda: Gracias Pedro, lo probaré a ver si me funciona bien porque le iría perfecto a mi blog que...
  • drakkar: hola necesito centrar el menu dentro del div que lo contiene pero mira lo que pasa cuando hago esto: <...
  • Erik: Gracias muchas.. muy bueno!
  • Pedro CM: Ya veo que lo retwitteaste por Twitter, me alegro ;-) . My recent post Pack de 100000 tipografías...
  • JuniHH: Te agradezco muchismo el enlace de los bordes redondeados sin necesidad de JS's raros. Cuando...
Patrocinadores