Astuce WordPress : alterner les couleurs d’une liste ou d’un tableau

Un truc classique en web design – classique parce que efficace – c’est d’alterner les couleurs de lignes dans les listes ou les tableaux. L’alternance de couleurs ou de motifs permet de mieux séparer visuellement les lignes et d’obtenir un meilleure visibilité.

Le principe

Pour réaliser ça en css, le truc (oui, j’aime bien dire « truc ce soir » – et oui, je blogue le soir) classique (« classique » aussi j’aime bien) consiste à attribuer une class odd et even aux lignes paires et impaires de votre tableau / liste.

On peut réaliser ça assez simplement à l’aide de l’opérateur modulo – % – lequel renvoie le reste d’une division entre deux nombres entiers. Dit comme ça c’est du chinois mais expliqué en chiffre c’est simple :

2%2 = 0
3%2 = 1
4%2 =0
5%2 = 3 1
6%2 = 0

[chiffre pair % 2] renvoie toujours 0.

Pour alterner les couleurs d’un tableau ou d’une liste il suffit de se baser sur le résultat du modulo du numéro de ligne d’une liste ou d’un tableau par 2. On peut ainsi créer l’alternance des classes dans les lignes d’une liste :

for($i=0;$i<10;$i++) {
if($i % 2) {
// c'est une ligne impaire
}
else {
// c'est une ligne paire
}
}

La boucle de WordPress

Dans WordPress, la plupart du temps, pour créer des listes, on utilise la boucle, la Loop en anglais. Pour alterner les classes dans une liste créée avec la boucle, tout en utilisant la fonction post_class() on procède ainsi :

<?php if (have_posts()) : $i=0; while (have_posts()) : the_post(); ?>
<?php $alternateclass = ($i % 2)? "even" : "odd";?>
<div <?php post_class($alternateclass) ?> id="post-<?php the_ID(); ?>">
<?php if (has_post_thumbnail() ) : ?>
<a href="<?php the_permalink('post-actu-thumbnail'); ?>"><?php the_post_thumbnail(); ?></a>
<?php endif; ?>
<h2><a href="<?php the_permalink() ?>" rel="bookmark"><?php the_title(); ?></a></h2>
<div>
<em><?php the_excerpt(); ?></em>
<?php edit_post_link(__('Edit This')); ?>
</div>
</div><!--. postclass-->
<?php $i++; endwhile; else: ?>
<p><?php _e('Sorry, no posts matched your criteria.'); ?></p>
<?php endif; ?>

Utiliser post_class et body_class

La fonction post_class de WordPress est extrêmement pratique puisque pour chaque post elle génère une classe

• post-id où id est l’id du post,
• post-type, où égal à « post », « page » ou « attachments »
• sticky, si votre post est coché comme étant un « sticky post »
• et pleins d’autres classes utiles en fonction du contexte dans lequel vous vous trouvez.

En plus de ça,la fonction post_class() accepte en argument un nom de classe (ou une liste de noms de classe séparées par des espaces). Ici, post_class prend en argument « even » ou « odd » en fonction du résultat de l’opération $i%2.

D’une manière générale, il est toujours préférables d’utiliser  les fonctions post_class() et body_class de WordPress lors de la création d’un thème. Ces deux fonctions sont très utiles pour highlighter un menu, styler des articles selon leur catégorie, voire selon leur ID si vous souhaitez faire comme Jason Santa Maria par exemple et créer un style complètement différent pour chacun de vos billets. Exercice intéressant s’il en est – et que je compte très prochainement pratiquer.