Comment ajouter une classe paire/impaire à votre publication dans les thèmes WordPress

Voulez-vous ajouter des classes impaires et paires 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 paire/impaire à votre publication dans les thèmes WordPress.

Pourquoi ajouter une classe impaire/pair à vos publications dans les thèmes WordPress ?

De nombreux thèmes WordPress utilisent une classe impaire ou paire 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étique et aide les utilisateurs à numériser rapidement des pages contenant beaucoup de contenu. Il est particulièrement utile pour la page d’accueil des sites Web de magazines ou d’actualités.

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

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

WordPress génère des classes CSS par défaut et les ajoute à la volée à différents éléments de votre site Web. 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ée par les développeurs de thèmes pour ajouter des classes aux éléments de publication. Consultez notre guide sur la façon de styliser différemment chaque publication WordPress.

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

Ajoutez simplement ce code au fichier function.php de votre thème, dans un plugin spécifique au site ou dans un plugin d'extraits de code.

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';

Nous vous recommandons d'ajouter ce code à l'aide du plugin WPCode. C’est le meilleur plugin d’extraits de code qui permet d’ajouter facilement et en toute sécurité du code personnalisé dans WordPress.

Pour commencer, vous devez installer et activer le plugin gratuit WPCode. Pour obtenir des instructions, consultez ce guide sur la façon d'installer un plugin WordPress.

Lors de l'activation, accédez à la page Extraits de code » + Ajouter un extrait à partir du tableau de bord WordPress. Ensuite, cliquez sur le bouton « Utiliser l'extrait » sous l'option « Ajouter votre code personnalisé (nouvel extrait) ».

À partir de là, ajoutez un titre pour votre extrait de code, qui peut être n'importe quoi pour vous aider à vous rappeler à quoi sert le code.

Ensuite, collez le code ci-dessus dans la zone « Aperçu du code » et sélectionnez « Extrait PHP » comme type de code dans la liste déroulante à droite.

Après cela, passez simplement le commutateur de « Inactif » à « Actif » et cliquez sur le bouton « Enregistrer l'extrait ».

Cette fonction ajoute simplement des impairs au premier message, puis des pairs, et ainsi de suite.

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

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

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 :

Si vous ne savez pas comment utiliser CSS, vous pouvez consulter notre guide sur la façon d'ajouter facilement du CSS personnalisé à votre site WordPress.

Nous espérons que cet article vous a aidé à apprendre comment ajouter une classe paire/impaire à vos publications dans les thèmes WordPress. Vous voudrez peut-être également consulter notre guide sur la façon de styliser la mise en page de vos commentaires WordPress et nos sélections d'experts des meilleurs constructeurs de pages WordPress.

Si vous avez aimé cet article, abonnez-vous à notre chaîne YouTube pour les didacticiels vidéo WordPress. Vous pouvez également nous trouver sur Twitter et Facebook.