Ajouter des class CSS alternées sur les div des articles du loop

Si vous souhaitez afficher un CSS différent un article sur deux dans le loop (la boucle) afin de les disposer de façon alternée (par exemple une image à gauche de l’article et puis une image à droite pour le suivant, etc…)  il suffit d’ajouter une class css pair et impair et de les personnalisé en fonction.

Comment afficher un CSS différent un élément sur deux dans la boucle ?

Ajoutez le code suivant à votre fichier functions.php :

// Ajouter des class pairs et impairs
function wpln_oddeven_css_posts_class ( $classes ) {
    global $current_class;
    $classes[] = $current_class;
    $current_class = ( $current_class == 'pair' ) ? 'impair' : 'pair';
    return $classes;
}
add_filter ( 'post_class' , 'wpln_oddeven_css_posts_class' );
global $current_class;
$current_class = 'pair';

Vous pouvez donc maintenant ajouter « pair » et « impair » dans votre CSS. Vous pouvez également changer pair et impair en gauche/droite ou ce que vous voulez.

Laisser un commentaire

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