Clases par impar listados

¿Quieres patrocinar?

¿Quieres aparecer aquí? Si quieres patrocinar este blog, ponte en contacto conmigo a través de este formulario

Añadir clases par/impar en los listados de WordPress

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.

odd even

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

¿Te ha resultado útil esta información?

Si este post te ha resuelto un problema, invítame a un café o a una cerveza. Con este pequeño gesto me animas a seguir escribiendo.