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

Todo lo que hay que saber sobre las imágenes destacadas o post thumbnails en WordPress
Todo lo que hay que saber sobre las imágenes destacadas o post thumbnails en WordPress
Los post thumbnails o imágenes destacadas es una característica que se introdujo en la versión 2.9 de WordPress. Permite asignar una imagen representativa a las…
WP-CLI Parte 8, Scaffold: genera esqueletos de código para post types, taxonomías, plugins, child themes…
WP-CLI Parte 8, Scaffold: genera esqueletos de código para post types, taxonomías, plugins, child themes…
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…
Creando un plugin para WordPress parte 2: Estilo del Código
Creando un plugin para WordPress parte 2: Estilo del Código
1. Creando un plugin para WordPress: Planificación y planteamiento 2. Creando un plugin para WordPress: Estilo del Código 3. Creando un plugin para WordPress: Escribiendo…
Evitar la enumeración de usuarios en WordPress: bola extra
Evitar la enumeración de usuarios en WordPress: bola extra
Hace unos meses escribí en dos entradas cómo evitar la enumeración de usuarios o user enumeration (parte 1 y parte 2). Ahora viene la bola extra:…