Tags : , , .

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

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.

Réagissez

Si ce billet vous a plu ou si vous voulez apporter des précisions, ou si vous n’êtes pas d’accord avec ce que je raconte, c’est ici qu’il faut vous manifester. Je me réserve toutefois le droit de supprimer toute contribution insultante ou qui n’aurait rien à voir avec la choucroute.

  1. Il me semble que 5 % 2 = 1… 😉

  2. oui.. hum.. Hop ! C’est corrigé !

  3. comment faire si on veut mettre à la suite deux listes en utilisant une seule boucle ?
    La première liste va par-exemple récupérer les titres et la seconde va récupéré les sous-titres par-exemple (exemple bidon j’en conviens)

    Je ne sais pas comment faire pour que la balise ul ouvre et ferme une seule fois pour chaque liste, et au bon endroit.

    du coup je fais deux boucles successives, une pour afficher la premiere liste, une pour afficher la seconde liste.
    est-ce qu’il y a une façon d’afficher ça avec une seule boucle ?

  4. Il y a une fonction sous jQuery qui fait ça très bien et je la trouve préférable à la cuisine WordPress (solution plus universelle à mon goût). Celle-ci ajoute une class « .alt » à une balise « li » sur deux pour un « ul » ciblé avec une class. Genre :

    $(« ul.maClass li:even »).addClass(« alt »);

    … et dans la CSS :

    ul.maClass li.alt {background:#F9F5EA;}

Laisser un commentaire

Votre adresse de messagerie ne sera pas publiée. Les champs obligatoires sont indiqués avec *