WordPress | Diferentes estilos css por categoría

Les traemos una simple función para que puedan crear un css diferente para cada categoría. Esto significa que dependiendo de la categoria en la que se encuentra la entrada visualizaremos un estilo característico. Lo bueno que tiene este código es que podemos elegir en que sección colocarlo sin afectar las otras (index.php, archive.php, single.php) puesto que se coloca al inicio de la estructura del post.Elegimos en donde queremos colocar esto:

Tenemos varias opciones:

Podemos colocarlo en un solo archivo (estos pueden ser: index.php, archive.php o single.php). La ventaja es que si lo colocamos por ejemplo en index.php, no se modificara el estilo en los restantes.

También podemos elegir colocarlo en 2 o en todos los archivos. De igual manera se modifica el estilo en aquellos archivos en lo que se ha agregado el código.

<div id="<?php $category = get_the_category();
echo $category[0]->category_nicename;?>">

Esta función identifica la primera categoria, es decir, si tenemos por ejemplo: Diseño Web, WordPress como categorias de un artículo, el estilo que se utilzará será el definido para Diseño Web.

Hay que tener en cuenta que nos tomará el nombre slug (que es la versión amigable de la url, en minúsculas y los espacios suplantados por un guión).

En nuestro caso nos tomaría la categoria con el nombre de ID diseno-web

Ejemplo:

<div id="<?php $category = get_the_category();
echo $category[0]->category_nicename;?>">
<li>

<h2><a href="<?php the permalink();?>" title="<?php the_title();?>"><?php the_title();?></a></h2>
<?php the_content('Leer Más');?>

</li>
</div>

Si analizaramos el código fuente lo veriamos así:

<div id="diseno-web">
<li>
<h2><a href="titulo">titulo</a></h2>

<p>Texto</p>
</li>
</div>

Luego de tener preparado el php creamos nuestros estilos para cada categoría.

A modo de ejemplo:

 #diseno-web {background: #121212;}
#diseno-web li {list-style: none;}
Modificado por última vez el día 24 de agosto de 2011 a las 22:48
  • Hola, me mandan de foro beta
    Puedes explicarme donde poner estos códigos estoy evho un lio no encuentro el sitio en mi plantilla
    Saludos y gracias

  • Hola!. He seguido los pasos, y en la categoría que quiero el .css diferente sí funciona correctamente, pero sin embargo también aplica ese css al index, pero solo en la primera página de la paginación, en las siguientes páginas coge el .css por defecto. Y en el resto de categorias también coge el .css por defecto.

    el código que tengo puesto es este (proyectos.css es el que quiero aplicar solamente a la categoria 35):

    <link rel="stylesheet" type="text/css" href="/reset.css” media=”screen” />
    <link rel="stylesheet" href="” type=”text/css” media=”screen” />

    <link rel="stylesheet" href="/proyectos.css” type=”text/css” media=”screen” />

    Gracias y perdón por las molestias.

  • Hola!.. alguien me puede hacer el favor ayudarme… estoy que me vuelvo loca… hace mas de un mes estoy tratando de encontrar la solución, para que algunas de las paginas contenidas en mi blog tengan un menú diferente es decir:

    Pagina1 —> Menu1 —-> Cuentos Libros Sucursales Mas Información

    Pagina2 —> Menu2 —> Nuestra Historia Nuestra Organización MisionyVision Mas

    Página3 —> Menu3 —> Servicios Productos Maquinaria OtrosRecursos

    Agradecería mucho a quien me pueda ayudar… la verdad estoy iniciando a trabajar con wordpress y me esta dando duro realizar esta parte de los menus

    • Hola Karol, creo que lo que quieres hacer es esto:


      < ?php if( is_page('pagina1') ) {
      echo 'Cuentos Libros Sucursales Mas Información';
      } elseif( is_page('pagina2') ) {
      echo 'Nuestra Historia Nuestra Organización MisionyVision Mas';
      } elseif( is_page('pagina3') ) {
      echo 'Servicios Productos Maquinaria OtrosRecursos';
      }
      ?>

  • Hey gracias Source! excelente me ha sido de gran ayuda, no imaginas cuanto :)

  • Hola jcdesigner! gracias por visitar nuestro blog.

    Bueno, si quieres que en determinada categoria se muestre otro sidebar o que aparezca determinado contenido dentro lo que tienes que hacer es agregar en sidebar.php:

    [php]
    <?php if (in_category(‘ejemplo’) { ;?>
    <!– contenido que quieres que aparezca en la categoria –>
    <?php } else { ;?>
    <?php } ;?>
    [/php]

    Si quieres que se muestre en varias categorias:

    [php]
    <?php if (in_category(array(‘ejemplo-1′, ‘ejemplo-2′, ‘ejemplo-3′)) ) { ;?>
    <!– contenido que quieres que aparezca en las categorias –>
    <?php } else { ;?>
    <?php } ;?>
    [/php]

    Debes suplantar donde dice ejemplo, ejemplo-1 por las categorias que quieras colocar ahi.

    Y para mostrar la foto de autor en una categoria usamos la misma funcion:

    [php]
    <?php if (in_category(‘ejemplo’)) { ;?>
    <?php echo get_avatar( get_the_author_meta(‘user_email’), 60); ?>
    <?php } else { ;?>
    <?php } ;?>
    [/php]

    Saludos!

    P.D.: en caso de que no sirva in_category lo cambias por is_category.

  • Muy buen tip de wp, tengo una duda no se si tu me podrías ayudar estoy trabajando con un blog pero hay categorias en que quiero que se muestre cierto contenido y en otros no, por ejemplo hay categorias en que necesito mostrar otro sidebar, se como crear uno nuevo pero no como cambiarlo segun categoría, y la otra es mostrar la foto de autor solo en una categoría esta segunda es la que más necesito saber como podría hacer, gracias de antemano.

Deja un comentario

Tu dirección de correo electrónico no será publicada. Los campos necesarios están marcados *

Puedes usar las siguientes etiquetas y atributos HTML: <a href="" title=""> <abbr title=""> <acronym title=""> <b> <blockquote cite=""> <cite> <code> <del datetime=""> <em> <i> <q cite=""> <strike> <strong>