Voulez-vous ajouter des classes Odd et Even aux publications de votre thème WordPress ? L'ajout d'une classe paire et impaire vous permet de styliser différemment chaque autre message. Dans cet article, nous allons vous montrer comment ajouter une classe pair/impair à votre article dans les thèmes WordPress.

Ajout de la classe Odd/Even à vos articles dans les thèmes WordPress

Pourquoi ajouter une classe paire/impaire à vos articles dans les thèmes WordPress ?

De nombreux thèmes WordPress utilisent une classe ancienne ou même pour les commentaires WordPress. Il aide les utilisateurs à visualiser où se termine un commentaire et où commence le suivant.

De même, vous pouvez utiliser cette technique pour vos publications WordPress. Il est esthétiquement agréable et aide les utilisateurs à numériser rapidement des pages avec beaucoup de contenu. Il est particulièrement utile pour la page d'accueil de magazines ou de sites Web d'actualités.

Cela dit, voyons comment ajouter une classe paire et impaire à vos publications dans le thème WordPress.

Ajout d'une classe paire/impaire aux publications dans le thème WordPress

WordPress génère des classes CSS par défaut et les ajoute à différents éléments de votre site Web à la volée. Ces classes CSS aident les développeurs de plugins et de thèmes à ajouter leurs propres styles pour différents éléments.

WordPress est également livré avec une fonction appelée post_class, qui est utilisé par les développeurs de thèmes pour ajouter des classes à l'élément de publication. Consultez notre guide sur la façon de styliser chaque article WordPress différemment.

le post_class est également un filtre, ce qui signifie que vous pouvez y associer vos propres fonctions. C'est exactement ce que nous allons faire ici.

Ajoutez simplement ce code au fichier functions.php de votre thème ou à un plugin spécifique au site.


function oddeven_post_class ( $classes ) {
   global $current_class;
   $classes[] = $current_class;
   $current_class = ($current_class == 'odd') ? 'even' : 'odd';
   return $classes;
}
add_filter ( 'post_class' , 'oddeven_post_class' );
global $current_class;
$current_class="odd";

Cette fonction ajoute simplement impair au premier message, puis pair, et ainsi de suite.

Vous pouvez trouver les classes paires et impaires dans le code source de votre site. Placez simplement la souris sur un titre de publication, puis cliquez avec le bouton droit pour sélectionner Inspecter ou Inspecter l'élément.

Classes paires et impaires dans le code source

Maintenant que vous avez ajouté des classes paires et impaires à vos publications. L'étape suivante consiste à les styliser à l'aide de CSS. Vous pouvez ajouter votre CSS personnalisé à la feuille de style de votre thème enfant, ou en utilisant le plugin Simple Custom CSS.

Voici un exemple de CSS que vous pouvez utiliser comme point de départ :


.even {
background:#f0f8ff;  
} 
.odd {
 background:#f4f4fb;
}

Voici à quoi cela ressemblait sur notre site de test :

Articles utilisant des couleurs d'arrière-plan alternées avec des classes CSS paires/impaires dans WordPress

Si vous ne savez pas comment utiliser CSS, vous voudrez peut-être consulter CSS Hero. Il vous permet d'ajouter du CSS à n'importe quelle partie de votre site WordPress sans écrire de code.

Nous espérons que cet article vous a aidé à apprendre comment ajouter une classe pair/impair à vos publications dans les thèmes WordPress. Vous pouvez également consulter notre guide sur la façon de styliser la mise en page de vos commentaires WordPress.

Si cet article vous a plu, abonnez-vous à notre Chaîne Youtube pour les didacticiels vidéo WordPress. Vous pouvez également nous retrouver sur Twitter et Facebook.