Changer de style pour chaque second article dans WordPress

Valentin
26 Déc 2023
WordPress

Sur la page d’accueil de votre site WordPress les articles partagent habituellement la même présentation, le même style, mais cela ne signifie pas que vous ne pouvez pas changer la façon dont il sont affichés sur votre page d’ accueil, vous pouvez changer de style à votre convenance, tout en veillant à ne pas choquer vos lecteurs.

Selon le sujet de votre site, vous voudrez peut-être changer de style pour chaque second article dans la boucle. Tout comme vous pourriez avoir des tables stylisées afin que chaque deuxième rangée soit représentée dans une couleur différente, vous pouvez également styliser différemment vos articles WordPress, ou styliser différemment les articles chaque auteur .

Changer de style pour chaque second article

Cela n’a pas d’importance si vous voulez changer la couleur de fond des articles, changer la taille de la police de caractères ou tout simplement indenter chaque second article de la liste, nous allons vous montrer comment, de façon simple, changer de style pour les articles pairs et impairs de la page d’accueil WordPress.

La fonction ci-dessous liste les articles publiés sur votre site Web et ajoute une classe spécifique à tous les articles impairs et pairs. Ce faisant, chaque second article obtiendra une classe, que vous pouvez facilement styliser avec du code CSS .

Apprendre à WordPress à reconnaître chaque second article

WordPress peut apprendre, tout comme vous et moi. Nous allons voir étape par étape comment expliquer à WordPress ce que l’on veut qu’il fasse.

Ouvrez votre client FTP favori (par exemple Filezilla). Une fois que vous serez connecté à votre hébergement, accédez à votre dossier thème (wp-content/themes/votre_theme) et téléchargez le fichier functions.php sur le bureau de votre ordinateur, faites en également une copie de sauvegarde a un autre endroit, par mesure de sécurité.

Ouvrez ensuite le fichier functions.php avec votre éditeur de texte préféré, tel que Notepad++, et copiez /collez le code ci-dessous à la fin du fichier.

function style_le_second_article ( $classes ) {
global $current_class;
$classes[] = $current_class;
$current_class = ( $current_class == 'impair' ) ? 'pair' : 'impair';
return $classes;
}
add_filter ( 'post_class' , 'style_le_second_article' );
global $current_class;
$current_class = 'impair';

Enregistrez les modifications et fermez le fichier. Téléchargez ensuite le fichier functions.php dans le dossier thème de votre site, en écrasant le fichier existant.

Grâce au code que vous venez d’insérer dans le fichier functions.php , WordPress vient d’apprendre comment ajouter une classe à différents articles, mais votre travail n’est pas terminé.

Alors que la fonction fait son travail, vous avez encore besoin de définir des classes qui seront ajoutées à chaque article dans la boucle.

Styliser différemment chaque second article

À moins que votre thème utilise déjà les classes .impair et .pair vous devrez les styliser séparément (dans ce cas, il vous suffira de changer les noms des classes dans le code ci-dessus et dans le code CSS ci-dessous).

Tout comme pour le fichier functions.php ci-dessus, ouvrez, avec votre éditeur de texte préféré, le fichier `style.css` situé dans le répertoire de votre thème, et copiez /collez le code ci-dessous à la fin du fichier.

Voici un exemple de code que vous pourriez insérer dans le fichier style.css:

.impaire {
color: red;
{

.pair {
color: blue;
{

Sauvegarder les modifications et téléchargez ensuite le fichier style.css dans le dossier thème de votre site, en écrasant le fichier existant.

Maintenant que les modifications sont faites, rendez-vous sur la page d’accueil de votre site pour voir les changements.

Si vous avez utilisé le même style que ci-dessus, le texte de vos articles doit s’afficher alternativement en rouge et en bleu.
Etant donné que ce code est un simple exemple et que le résultat fait évidemment mal aux yeux, c’est à vous de définir le style qui correspondra le mieux à votre site WordPress.

Il n’est pas nécessaire de changer de style pour les articles pairs et impairs, vous pouvez très bien n’en changer qu’un des deux, pour voir la différence soit visible sur votre écran.

Maintenant que vos articles ont changé de style, sur votre page d’accueil, expliquez nous dans les commentaires les modifications que vous avez apportés à votre page d’accueil et dites-nous pourquoi vous avez fait ces changements, et si changer de style à attirer plus de visiteurs.