SummArg | Cursos y recursos para webmasters

24/03/2012

Añadir una clase a la entrada activa en un listado de entradas

Con WordPress es muy fácil manejar un listado de páginas y las clases de sus links con wp_list_pages(). Pero lamentablemente no existe un equivalente para entradas, por lo que necesitamos echar mano a un snippet para añadir una clase “activa” a un artículo activo.

En donde queramos listar nuestras entradas, colocamos el siguiente código.

<ul id="post-pagination">
<?php
$cat = get_query_var('cat');
$args=array( 'showposts'=>60, 'paged'=>$paged, 'cat'=>$cat, 'orderby'=>date, 'order'=>ASC );
$lastposts = get_posts($args);
foreach($lastposts as $post) : setup_postdata($post); ?>
<li <?php if ( $post->ID == $wp_query->post->ID ) { echo ' class="activa"'; } else {} ?>>
<a href="<?php the_permalink() ?>"><?php the_title(); ?></a>
</li>
<?php endforeach; ?>
</ul>

En nuestro CSS le damos formato al listado de entradas, le indicamos a la clase “activa” que debe tener un color de fondo diferente y luego añadimos un color distinto para el link de dicha clase.

#post-pagination ul {
list-style-type:none;
}
ul#post-pagination li a , #post-pagination ul li a{
font-family:arial; font-size:12px; line-height:18px; text-decoration:none; padding: 5px 0;
}
.activa {
background: #40566e; width: 100%; padding: 0 5px; color: #eef3fa;
}
#post-pagination li.activa a {
color: #eef3fa;
}

El resultado será el siguiente:

Entradas Relacionadas

  • Sin entradas similares

Dejar un comentario