En esta entrada vamos a ver cómo introducir las clases par/impar en los listados de WordPress de tres formas diferentes. A veces puede resultar útil intercalar estilos en un listado para diferenciar mejor los posts visualmente.
Modo 1: A mano en una plantilla
Esta forma puede ser válida para maquetar por ejemplo sólo el listado de noticias, y no interferir en el resto de listados que podamos tener.
Es decir, es para mostrar de forma diferente un listado concreto. Según este ejemplo, abriríamos nuestro template category-noticias.php y en el loop deberíamos colocar algo como esto:
<?php
$odd_or_even = 'odd';
if ( have_posts() ) :
while (have_posts()) : the_post();?>
<article id="post-<?php the_ID();?>" <?php post_class( $odd_or_even );?>>
<div class="entry-content">
<h2><a href="<?php echo get_permalink();?>" title="<?php echo get_the_title();?>" class="entry-title" rel="bookmark"><?php echo get_the_title();?></a></h2>
<?php the_excerpt();?>
</div><!-- entry-content -->
</article>
<?php
$odd_or_even = ('odd' == $odd_or_even) ? 'even' : 'odd';
endwhile;
endif;Básicamente lo que hacemos es establecer inicialmente el valor odd (impar) a la variable $odd_or_even. Una vez en el loop pasaremos el valor de esta variable a la función post_class(). De este modo pintará la clase correspondiente además de las clases por defecto que introduce la función post_class().
Justo antes del endwhile, cambiaremos el valor de la variable $odd_or_even. Si era odd la estableceremos como even, y viceversa para que siga recorriendo el loop intercambiando los valores.
Sólo quedaría establecer los estilos correspondientes para cada clase en nuestra hoja de estilos.
Modo 2: Introducir las clases odd/even en todos los loops
Éste código a continuación serviría para todos los loops de nuestro sitio sin excepción. Introduciríamos en nuestro functions.php o plugin de utilidades:
<?php
function odd_even_post_class ( $classes ) {
static $odd_or_even = 'odd';
$classes[] = $odd_or_even;
$odd_or_even = ('odd' == $odd_or_even) ? 'even' : 'odd';
return $classes;
}
add_filter ( 'post_class' , 'odd_even_post_class' );Lo que hacemos es actuar sobre el filtro post_class y agregar la clase odd ó even intercaladas cada vez que es llamado.
Cómo en el ejemplo anterior, sólo quedaría establecer los estilos correspondientes para cada clase en nuestra hoja de estilos.
Modo 3: A través de CSS puro
También lo podemos hacer a través de CSS utilizando el selector nth-child(), de este modo:
article:nth-child(odd) {
background: #fff;
}
article:nth-child(even) {
background: #f1f1f1;
}De este modo los artículos impares tendrán de color de fondo blanco y los pares un gris clarito. Puedes ver qué navegadores son compatibles con el selector de CSS3 nth-child() aquí.
Puede que también te interese
