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:

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:

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:

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

Si te ha gustado, valora este artículo para mejorar la calidad del blog o compártelo en Redes Sociales…
1 Star2 Stars3 Stars4 Stars5 Stars
Loading...

Web Hosting
  • Alvaro Gómez Velasco

    Yo, como maldito frontender que soy, voto por la opción 3 🙂
    ¿Se te ocurre algún caso en el que sea necesario meter clases para hacer esto?
    Por lo que veo tiene soporte total http://caniuse.com/#feat=css-sel3
    Saludos!