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:

<?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:

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

Puede que también te interese

Ocultar el editor WYSIWYG en función del template seleccionado
Ocultar el editor WYSIWYG en función del template seleccionado
Es probable que en alguna ocasión estés haciendo un desarrollo a medida donde necesites crear una plantilla de página para una determinada sección o grupo…
WP-CLI Parte 10, crea tus propios comandos
WP-CLI Parte 10, crea tus propios comandos
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…
Los 10 mandamientos del WPO en WordPress
Los 10 mandamientos del WPO en WordPress
En la primera edición de la WordCamp Madrid he tenido la oportunidad de estrenarme como ponente en casa con la charla titulada Los 10 mandamientos…
Añadir un icono personalizado a nuestro custom post type
Añadir un icono personalizado a nuestro custom post type
La versión 3.8 de WordPress trajo consigo nuevas mejoras, el tema Twentyfourteen, y un cambio completo de diseño en el Back End. Con éste cambio,…