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

Seguridad WordPress: permisos de archivos y carpetas
Seguridad WordPress: permisos de archivos y carpetas
La regla general nos dice que los permisos deben ser 755 para las carpetas y 644 para los archivos. Además recomendable poner el wp-config.php y…
Cómo cambiar el título del meta box de la imagen destacada en WordPress
Cómo cambiar el título del meta box de la imagen destacada en WordPress
En algunas ocasiones puede resultar de utilidad cambiar o renombrar el texto o título que aparece en el meta box de Imagen destacada. Por ejemplo…
AJAX tradicional vs AJAX moderno, comparativa de rendimiento
AJAX tradicional vs AJAX moderno, comparativa de rendimiento
En las dos entradas anteriores veíamos dos formas de hacer AJAX en WordPress. Las dos son perfectamente válidas, pero en este post quiero hacer una…
Cómo solucionar el error de sintaxis en WordPress
Cómo solucionar el error de sintaxis en WordPress
WordPress es el CMS más utilizado para crear páginas web. Además, con una diferencia notable con respecto a otras alternativas. Es por esto que la…