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.

Facebook
Twitter (X)
LinkedIn
WhatsApp
Reddit

Gregory

Agitateur de Stratégiesaddict à WordPress depuis 2003, fada de Google depuis 1998. J’accompagne au quotidien plusieurs entreprises et indépendants dans la gestion de leur stratégie digitale et l’optimisation de leurs sites WordPress.

Laisser un commentaire

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

Sur le même sujet