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

Vous souhaitez ajouter une touche d'intérêt visuel à vos articles de blog WordPress ? L'ajout de classes impaires et paires peut rendre votre mise en page plus attrayante, en rompant de longues listes d'articles avec des changements de conception subtils qui attirent l'œil.

Nous recevons fréquemment des questions de nos lecteurs sur la manière d'appliquer cette technique. Bien que de nombreux thèmes WordPress n'offrent pas d'option intégrée pour les classes d'articles impaires et paires, nous avons trouvé un moyen rapide et facile de les ajouter vous-même en utilisant le plugin gratuit WPCode.

Dans cet article, nous vous montrerons comment ajouter une classe impaire/paire à votre article dans les thèmes WordPress.

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

De nombreux thèmes WordPress utilisent une classe impaire ou paire pour les commentaires WordPress. Cela aide les utilisateurs à visualiser où un commentaire se termine et le suivant commence.

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

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

Ajout de classes impaires/paires aux articles dans un 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ée 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 publication WordPress différemment.

La 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 functions.php de votre thème, dans un plugin spécifique au site, ou dans un plugin d'extraits de code comme WPCode.

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 recommandons d'utiliser le plugin WPCode pour ajouter ce code. C'est la manière la plus sûre et la plus simple de gérer le code personnalisé sur votre site sans avoir à modifier directement le fichier functions.php de votre thème.

Nous utilisons WPCode pour gérer tous les extraits de code personnalisés sur notre portefeuille de sites web. Cela permet de tout organiser et d'éviter que le code ne soit effacé lors des mises à jour du thème.

Pour en savoir plus sur ce plugin d'extraits de code, consultez notre avis complet sur WPCode.

Pour commencer, vous devez installer et activer le plugin gratuit WPCode. Pour des instructions, consultez ce guide sur comment installer un plugin WordPress.

Après l'activation, accédez à la page Extraits de code » + Ajouter un extrait depuis le tableau de bord WordPress.

Ensuite, cliquez sur le bouton « + Ajouter un extrait personnalisé » sous l'option « Ajouter votre code personnalisé (Nouvel extrait) ».

Ensuite, vous devez sélectionner un type de code dans la liste des options qui apparaissent à l'écran.

Pour ce tutoriel, choisissez « Extrait PHP » comme type de code.

Vous serez ensuite dirigé vers la page Créer un extrait personnalisé.

À partir de là, ajoutez un titre à votre extrait de code, qui peut être n'importe quoi pour vous aider à vous souvenir de l'utilité du code.

Après cela, collez le code ci-dessus dans la boîte « Aperçu du code ».

Une fois cela fait, basculez simplement le commutateur de « Inactif » à « Actif » et cliquez sur le bouton « Enregistrer l'extrait ».

Cette fonction ajoute simplement un nombre impair au premier article, puis un nombre pair, et ainsi de suite.

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

Maintenant que vous avez ajouté les 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, au personnaliseur 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 le CSS, vous voudrez peut-être consulter notre guide sur comment ajouter facilement du CSS personnalisé à votre site WordPress.

Ressources supplémentaires pour personnaliser les pages et les publications WordPress

Nous espérons que cet article vous a aidé à apprendre comment ajouter une classe impaire/paire à vos publications dans les thèmes WordPress. Vous voudrez peut-être également consulter ces autres articles pour personnaliser davantage le design de votre site :

• Comment ajouter des statuts de publication personnalisés pour les articles de blog dans WordPress
• Comment modifier le nombre d'articles affichés sur la page de votre blog WordPress
• Comment afficher ou masquer des widgets sur des pages WordPress spécifiques
• 15 meilleurs constructeurs de pages WordPress glisser-déposer comparés
• Comment ajouter des extraits à vos pages dans WordPress (étape par étape)

Si cet article vous a plu, abonnez-vous à notre chaîne YouTube pour des tutoriels vidéo WordPress. Vous pouvez également nous retrouver sur Twitter et Facebook.