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.

Gregory

Agitateur de Stratégies, addict à WordPress depuis 2003, fada de Google depuis 1998. Incubateur Digital, j'accompagne au quotidien plusieurs entreprises et indépendants dans la gestion de leur stratégie digitale et l'optimisation de leurs sites WordPress. Basé à Aix-en-Provence, je suis à l'écoute de votre projet si vous avez besoin d'un expert WordPress.

Vous aimerez aussi

Laisser un commentaire

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