• Follow us on Twitter
  • Join our Facebook Group
  • Add me on Linkedin
  • RSS
JCDESIGNER, Juan Carlos Rivas, Diseñador con 6 años de experiencia multimedia close

  • Perfil
  • Servicios
  • Portafolio
  • Contacto
  • Blog

Blog

Latest news from around the world

Estilos diferentes por categoría en WordPress

1 Comment/ in Blog / by jcdesigner
noviembre 28, 2010

Encontré en el blog de dinvaders una función que es bastante sencilla y sirve para crear diferentes estilos en una plantilla de wp, esto significa que dependiendo de la categoría en la que se encuentra la entrada visualizaremos un estilo diferente, y así podemos elegir en que sección colocarlo sin afectar las otras.

Puede ser colocado en cualquier página de nuestro template (index.php, single.php, page.php), lo importante es que hará ver diferente cada categoría.

La función es:

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

La función está diciendo que el nombre de la categoría es el ID del div, en ese caso dependiendo de la categoría el estilo será distinto.

Por lo tanto nuestro CSS deberá asignar una ID con el mismo nombre que la categoría, claro esta que tomará el nombre slug y por lo tanto si nuestra categoría tiene dos palabras o tres como nombre las tomará sin espacio y con un guión medio en lugar de este, tampoco aceptara las mayúsculas, por ejemplo si el ID se llamara portfolio, la aplicación sería la siguiente:

<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>

Este mismo código sería interpretado por nuestro navegador de esta manera:

<div id="portfolio">
<li>
<h2><a href="titulo">titulo</a></h2>
<p>Texto</p>
</li>
</div>

Y el CSS tendría que ser escrito de esta manera para afectarlo:

#portfolio {background: #121212;}
#portfolio {list-style: none;}

Debo decir además que le hice una consulta a Source autor del blog de dinvaders, sobre como sería si en un dado caso lo que yo deseo es mostrar un contenido diferente en una categoría y no un estilo diferente, por ejemplo un sidebar diferente o mostrar la foto del autor solo en una categoría específica, y la diferencia entre la función anterior y esta es un condicionante:

<?php if (in_category('ejemplo') { ;?>
<!-- contenido que quieres que aparezca en la categoria -->
<?php } else { ;?>
<?php } ;?>

Si se desea que se muestre en varias categorías:

<?php if (in_category(array('ejemplo-1', 'ejemplo-2', 'ejemplo-3')) ) { ;?>
<!-- contenido que quieres que aparezca en las categorias -->
<?php } else { ;?>
<?php } ;?>

Lo único a suplantar es el espacio donde dice ejemplo, es prácticamente automático.

Y en el caso de mostrar un avatar pues la diferencia es solo intercambiar la función por la del avatar:

<?php if (in_category('ejemplo')) { ;?>
<?php echo get_avatar( get_the_author_meta('user_email'), 60); ?>
<?php } else { ;?>
<?php } ;?>

En caso de no funcionar in_category se intercambia por is_category.

Fuente: Diferentes estilos css por categoría

Tags: blog, css, php, tips, tutorial, wordpress, wp
← Infográfico para Consumer media network
Rediseño revista Ella →
Related Posts
Border-radius, bordes redondeados con css
CSS Drop Shadow, sombra con CSS
Contornear párrafos en formas con css
Template para sitio de bienes y raíces versión H...
Comments

One Response to Estilos diferentes por categoría en WordPress

  1. jcdesigner says:
    febrero 27, 2013 a las 10:29 pm

    probando comentar

    Responder

Leave a Reply

Want to join the discussion?
Feel free to contribute!

Deja un comentario Cancelar respuesta

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>

Blogroll

  • Diseño 3d El Salvador
  • Diseño web Cadiz
  • Fotografía y video profesional
  • Ilustración El Salvador
  • Posicionamiento web

Reciente

  • Las tareas del estudiante de diseño
  • Media center Grupo Dutriz
  • Infográfico sobre la población salvadoreña
  • Rediseño revista Ella
  • Estilos diferentes por categoría en WordPress
Seguir a @jcdesigner

Buscar

Portafolio

  • El Gráficofebrero 5, 2013 - 5:00 pm
© Copyright - DISEÑO GRÁFICO, EL SALVADOR, DISEÑO WEB, CENTROAMÉRICA - JCDESIGNER - UX DESIGN