Blog sobre desarrollo WordPress en Español Desarrollo WordPress en Español
Clases par impar listados

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

Puede que también te interese

Añade una clase CSS personalizada a tus meta boxes
Añade una clase CSS personalizada a tus meta boxes
En esta entrada vamos a ver como añadir una clase CSS a los meta boxes de WordPress. Utilizamos los meta boxes en WordPress para agrupar…
WP-CLI Parte 6, search replace, un comando imprescindible
WP-CLI Parte 6, search replace, un comando imprescindible
1. Instalación y primeros pasos 2. Instalando WordPress y primeros pasos y configuraciones 3. Trabajando con posts 4. Trabajando con usuarios 5. Trabajando con la…
Sanitizando: cómo validar y escapar datos en WordPress
Sanitizando: cómo validar y escapar datos en WordPress
En éste artículo vamos a aprender a hacer un tratamiento de datos correcto en WordPress. Éste punto es imprescindible para cualquier desarrollo a medida que…
Cómo definir una plantilla diferente por categoría para el detalle de los posts
Cómo definir una plantilla diferente por categoría para el detalle de los posts
En WordPress se usa la plantilla single.php para el detalle de los posts. Podemos crear plantillas para los posts de un custom post type concreto…