Souhaitez-vous ajouter des classes impaires et paires aux publications de votre thème WordPress ? L’ajout d’une classe impaire et paire vous permet de styliser différemment tous les autres messages. 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 articles dans les thèmes WordPress ?
De nombreux thèmes WordPress utilisent une ancienne ou même une classe 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 des sites Web de magazines ou d’actualités.
Cela dit, voyons comment ajouter une classe impaire et paire à vos articles 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 à 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.
Les 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 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 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 à 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 :
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 paire/impaire à 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.