Voulez-vous styliser différemment chaque article WordPress sur votre site web ?
Vous avez peut-être rencontré des sites web qui mettent en évidence les articles collants à l’aide d’un arrière-plan personnalisé ou qui donnent à chaque catégorie d’articles une apparence unique. Vous pouvez faire de même pour refléter les différents types de contenu et créer une expérience visuellement attrayante pour les utilisateurs.
Dans cet article, nous allons vous montrer comment styliser facilement chaque article WordPress différemment.
Remarque: ce tutoriel nécessite l’ajout de feuilles de style CSS personnalisées dans WordPress. Vous devrez également être en mesure d’utiliser l’outil Inspect et avoir des connaissances de base en matière de CSS, de sorte qu’il ne convient pas aux débutants complets.
Avantages et inconvénients d’un style différent pour chaque article WordPress
Si vous avez un blog WordPress, le fait de styliser chaque article différemment peut créer une expérience visuelle unique où des couleurs différentes sont associées à des catégories ou des types de contenu différents.
Par exemple, vous pouvez utiliser une couleur d’arrière-plan différente pour tous les articles, les articles de blog et les tutoriels sur votre site web. Cela permet d’attirer instantanément l’attention des utilisateurs et de stimuler l’engagement.
Gardez à l’esprit que cela peut également présenter des inconvénients majeurs. Par exemple, vous devrez maintenir régulièrement le design de chaque article WordPress, ce qui peut prendre beaucoup de temps.
De plus, cela peut entraîner une expérience incohérente pour l’utilisateur et ne contribue pas à l’identité de votre marque. En effet, vous devez utiliser les mêmes couleurs sur l’ensemble de votre site web pour asseoir l’image de votre entreprise.
Si vous êtes débutant, l’ajout de CSS personnalisés pour styliser chaque article peut également s’avérer difficile. Cela dit, voyons comment vous pouvez facilement donner un style différent à chaque article de WordPress.
Comment styliser des articles individuels dans WordPress
WordPress ajoute des classes CSS par défaut à divers éléments de votre site web. Les thèmes utilisent une fonction de base de WordPress appelée post_class() pour indiquer à WordPress où ajouter ces classes CSS par défaut pour les articles.
Si vous visitez votre site web et utilisez l’outil Inspecter dans votre navigateur, vous pourrez voir ces classes ajoutées pour chaque article.
Les classes CSS suivantes sont ajoutées par défaut en fonction de la page consultée par l’utilisateur :
- .post-id
- .post
- .pièce jointe
- .autocollant
- .hentry (pages de microformat hAtom)
- .category-ID
- .nom-de-categorie
- .tag-name
- .format-{nom-du-format}
- .type-{nom du type d’article}
- .has-post-thumbnail
Voici un exemple de résultat :
<article id="post-412" class="post-412 post type-post status-publish format-standard hentry category-news">
Vous pouvez styliser chaque article WordPress différemment en utilisant ces classes ou ID CSS respectifs. Pour ce faire, vous devez d’abord trouver l’ID de l’article en question.
Pour cela, vous devez vous rendre sur la page « Articles » « Tous les articles » du tableau de bord de WordPress et passer votre souris sur un article.
Une URL de modification du message apparaît alors dans le coin inférieur gauche de l’écran. Vous pouvez y trouver l’identifiant de l’article en regardant le nombre entre « post= » et « &action ».
Dans l’exemple ci-dessous, l’identifiant du poste est 25.
Une fois que vous avez fait cela, vous devez ajouter la classe CSS avec le code personnalisé dans les fichiers de votre thème ou dans le personnalisateur de thème. Cependant, cela peut être risqué et casser votre site avec une seule erreur.
C’est pourquoi nous recommandons d’utiliser WPCode à la place. C’est le meilleur plugin d’extraits de code WordPress et le moyen le plus sûr d’ajouter du code personnalisé à votre site.
Tout d’abord, vous devez installer et activer le plugin gratuit WPCode. Pour plus de détails, consultez notre guide du débutant sur l’installation d’un plugin WordPress.
Après l’activation, visitez la page Code Snippets » + Add Snippet à partir du tableau de bord de WordPress. Cliquez sur le bouton « Utiliser l’extrait » sous l’option « Ajouter votre code personnalisé (nouvel extrait) ».
Vous accédez alors à la page « Create Custom Snippet » (Créer un extrait personnalisé), où vous pouvez commencer par donner un nom à votre extrait de code. Ensuite, sélectionnez « CSS Snippet » comme type de code dans le menu déroulant à droite.
Ensuite, vous devez ajouter la classe CSS et l’ID de votre article individuel dans la case « Aperçu du code » comme ceci :
.post-13 { }
Ensuite, vous pouvez ajouter n’importe quel code CSS personnalisé entre les crochets pour styliser votre article.
Par exemple, si vous souhaitez modifier la couleur d’arrière-plan d’un article individuel, vous pouvez ajouter le code CSS personnalisé suivant. Gardez à l’esprit que vous devez remplacer l’ID de l’article dans ce code par votre propre ID. Là où ce code est .post-13, le vôtre pourrait être .post-23873.
Vous pouvez également modifier le code hexadécimal de la couleur d’arrière-plan en choisissant la couleur de votre choix :
.post-13 {
background-color: #FF0303;
color:#FFFFFF;
}
Ensuite, faites basculer le commutateur « Inactif » en haut sur « Actif » et cliquez sur le bouton « Enregistrer l’extrait » pour enregistrer vos paramètres.
Le code CSS personnalisé sera désormais automatiquement exécuté sur votre article individuel lors de l’activation de l’extrait.
Allez-y et visitez votre article de blog WordPress pour voir les changements en temps réel.
Vous pouvez également ajouter d’autres extraits de code CSS personnalisés dans la boîte « Aperçu du code » pour modifier la couleur de sélection du texte, la couleur du texte, la couleur des liens internes, et bien d’autres choses encore.
Pour plus d’informations, consultez notre guide du débutant sur la personnalisation des couleurs dans WordPress.
Comment styliser les articles d’une catégorie spécifique
Si vous souhaitez styliser tous les articles appartenant à une catégorie spécifique, vous pouvez également le faire avec WPCode.
Vous devez vous rendre sur la page Code Snippets » + Add Snippet et sélectionner l’option ‘Add Your Custom Code (New Snippet)’.
Ensuite, ajoutez un nom d’extrait de code sur la nouvelle page et choisissez « CSS Snippet » comme type de code. Ensuite, tapez la classe CSS d’une catégorie spécifique dans la boîte de prévisualisation du code comme ceci, en utilisant le slug permalien de la catégorie après le tiret :
.category-books { }
Une fois que vous avez fait cela, vous pouvez ajouter n’importe quel snippet CSS personnalisé dans la boîte pour l’appliquer à tous les articles dans différentes catégories.
Par exemple, si vous souhaitez modifier la taille et le style de la police pour tous les articles d’une catégorie spécifique, vous pouvez utiliser l’extrait de code suivant. N’oubliez pas de remplacer le nom de la catégorie par celui de votre site web.
category-books {
font-size: 18px;
font-style: italic;
}
Ensuite, faites basculer le commutateur « Inactif » sur « Actif » en haut de la page.
Ensuite, cliquez sur le bouton « Enregistrer l’extrait » pour enregistrer vos paramètres.
Vous pouvez maintenant visiter tous les articles d’une catégorie spécifique pour voir les changements qui ont été appliqués avec le code CSS.
Voici à quoi cela ressemble sur notre site de démonstration.
Comment styliser différemment les articles en fonction de l’auteur
Les classes CSS par défaut générées par la fonction the_posts() n’incluent pas le nom de l’auteur en tant que classe CSS.
Si vous souhaitez personnaliser le style de chaque article en fonction de l’auteur, vous devez d’abord ajouter le nom de l’auteur en tant que classe CSS.
Pour ce faire avec WPCode, sélectionnez l’option « Add Your Custom Code (New Snippet) ».
Vous accédez alors à la page « Créer un extrait personnalisé », où vous devez ajouter un nom d’extrait de code et sélectionner « Extrait PHP » comme type de code.
Ensuite, ajoutez le code personnalisé suivant dans le champ « Aperçu du code » et remplacez « user_nicename » par le nom de l’auteur.
$author = get_the_author_meta('user_nicename'); ?>
<article id="post-<?php the_ID(); ?>" <?php post_class( $author );
Enfin, faites basculer le commutateur « Inactif » sur « Actif » et cliquez sur le bouton « Enregistrer l’extrait » pour enregistrer vos paramètres.
Il devrait ressembler à ceci.
Ce code ajoutera maintenant le nom de l’utilisateur en tant que classe CSS. Nicename est un nom convivial pour l’URL utilisé par WordPress. Il ne contient pas d’espaces et tous les caractères sont en minuscules, ce qui le rend parfait pour être utilisé comme classe CSS.
Vous devez maintenant vous rendre à nouveau sur la page Code Snippets » + Add Snippet et choisir l’option ‘Add Your Custom Code (New Snippet)’. Sur l’écran suivant, ajoutez un nom pour votre code personnalisé et choisissez ‘CSS Snippet’ comme type de code dans le menu déroulant à droite.
Vous pouvez ensuite ajouter le nom de l’auteur spécifique dans la case « Aperçu du code » comme suit :
.sarahclare
Ensuite, vous pouvez ajouter le code CSS personnalisé pour modifier la couleur d’arrière-plan, la taille de la bordure, la couleur du texte, etc.
Vous pouvez utiliser le code ci-dessous pour modifier la couleur d’arrière-plan des articles d’un auteur et ajouter une bordure à la zone de contenu.
.sarahclare {
background-color:#EEE;
border:1px solid #CCC;
}
Une fois que vous avez terminé, cliquez sur le bouton « Enregistrer l’extrait » en haut de la page.
Ensuite, faites basculer le commutateur « Inactif » sur « Actif ».
Le code personnalisé sera automatiquement exécuté lors de l’activation.
Vous pouvez maintenant visiter le billet d’un auteur spécifique pour voir les changements.
Comment styliser les articles en fonction de leur popularité en utilisant le nombre de commentaires
Vous avez peut-être vu des sites avec des widgets d’articles populaires, qui sont parfois basés sur le nombre de commentaires. Dans cet exemple, nous allons vous montrer comment styliser les articles différemment en utilisant le nombre de commentaires.
Tout d’abord, nous devons obtenir le nombre de commentaires et y associer une classe.
Pour obtenir le nombre de commentaires, vous devrez ajouter le code suivant aux fichiers de votre thème, ou vous pouvez utiliser un plugin d’extraits de code comme WPCode.
Il suffit de choisir l’option « Add Your Custom Code (New Snippet) » pour lancer la page « Create Custom Snippet » dans WPCode.
Sélectionnez « PHP Snippet » comme type de code, puis copiez et collez le code suivant dans la boîte de prévisualisation du code :
<?php
$postid = get_the_ID();
$total_comment_count = wp_count_comments($postid);
$my_comment_count = $total_comment_count->approved;
if ($my_comment_count <10) {
$my_comment_count = 'new';
} elseif ($my_comment_count >= 10 && $my_comment_count <20) {
$my_comment_count = 'emerging';
} elseif ($my_comment_count >= 20) {
$my_comment_count = 'popular';
}
?>
Cliquez ensuite sur le bouton « Enregistrer l’extrait » et faites basculer l’interrupteur « Inactif » sur « Actif » pour enregistrer vos paramètres.
Ce code vérifie le nombre de commentaires pour l’article affiché et leur attribue une valeur basée sur ce nombre. Par exemple, les articles ayant moins de 10 commentaires reçoivent une classe appelée « nouveau », ceux ayant moins de 20 commentaires sont appelés « émergents » et ceux ayant plus de 20 commentaires sont appelés « populaires ».
Vous devez maintenant ajouter le nombre de commentaires en tant que classe CSS à la fonction post_class. Pour ce faire, vous devez ouvrir à nouveau la page « Créer un extrait personnalisé » et choisir l’option « Extrait PHP » dans le menu déroulant.
Ensuite, ajoutez le code personnalisé suivant dans la boîte de prévisualisation :
<article id="post-<?php the_ID(); ?>" <?php post_class( $my_comment_count ); ?>>
Cliquez ensuite sur le bouton « Enregistrer l’extrait ».
Vous pouvez maintenant faire basculer le commutateur « Inactif » sur « Actif ».
Cela ajoutera des classes CSS nouvelles, émergentes et populaires à tous les articles en fonction du nombre de commentaires de chaque article. Vous pouvez désormais ajouter des feuilles de style CSS personnalisées pour styliser chaque article en fonction de sa popularité.
Par exemple, vous pouvez utiliser le code suivant pour ajouter des couleurs de bordure différentes pour les articles en fonction du nombre de commentaires postés.
.new {border: 1px solid #FFFF00;}
.emerging {border: 1px dashed #FF9933;}
.popular {border: 1px dashed #CC0000;}
Une fois que vous avez terminé, n’oubliez pas de cliquer sur le bouton « Enregistrer l’extrait » pour enregistrer vos paramètres.
Bonus : Afficher une barre latérale différente pour chaque article dans WordPress
Après avoir stylisé chaque article différemment, vous pouvez également ajouter une barre latérale unique pour chaque article. Cela vous permettra de présenter un contenu spécifique lié à l’article en question et susceptible d’intéresser les utilisateurs.
Par exemple, si vous avez un blog de voyage et que vous avez publié un article sur les endroits à visiter en Floride, vous pouvez créer une barre latérale spécifique affichant les forfaits de voyage en Floride. Vous pouvez également afficher un formulaire d’inscription pour un voyage en Floride que vous organisez.
Pour afficher une barre latérale différente pour chaque article, vous pouvez utiliser SeedProd, qui est le meilleur plugin de construction de pages pour WordPress.
Il dispose d’une interface « glisser-déposer », de plus de 320 modèles prédéfinis et d’intégrations avec des services de marketing par courriel, ce qui en fait un excellent choix.
Dès l’activation du plugin, vous pouvez sélectionner une page personnalisée comme design de votre page d’atterrissage, puis une mise en page avec une barre latérale.
Ensuite, vous pouvez facilement glisser et déposer les blocs de votre choix dans la colonne de gauche, y compris les formulaires de contact, les archives, les cadeaux, la boîte de recherche, les commentaires, et plus encore.
Une fois que vous avez terminé, cliquez sur les boutons « Enregistrer » et « Publier » dans le menu déroulant en haut. Vous avez maintenant réussi à créer une barre latérale spécifique pour un article ou une page WordPress.
Pour plus de détails, consultez notre tutoriel sur la façon d’afficher une barre latérale différente pour chaque article et chaque page dans WordPress.
Nous espérons que cet article vous a aidé à apprendre comment styliser chaque article WordPress différemment. Vous pouvez également consulter notre guide du débutant sur la façon de styliser les balises dans WordPress et notre liste des conseils, trucs et astuces WordPress les plus recherchés.
Si vous avez aimé cet article, veuillez alors vous abonner à notre chaîne YouTube pour obtenir des tutoriels vidéo sur WordPress. Vous pouvez également nous trouver sur Twitter et Facebook.
Rafael
Nice article. I guess I could use something like this to check the category of a post and place a custom CSS to change the style of part of the website according to the category, right?
I’m looking to set different colors only to the background of the Title of the Post for each Category in a Blog.
Kany
Hi, great article. How to custom css style latest blog news? Just the latest one, any idea? Tnx.
WPBeginner Support
Your theme would need to add something that can be targeted by CSS, at the moment we do not have a recommended method for adding that.
Administrateur
Les
Great article. I wanted to set the default Font size per category and followed the instruction by adding the code to the Style.css file but when I added a new post the font was the old size. See code? What am I missing?
/* Begin Additional CSS Styles */
.art-blockheader .t, .art-vmenublockheader .t {white-space: nowrap;}
.desktop .art-nav-inner{width: 1200px!important;}
.category-firstg {
font-size: 18px;
font-style: bold;
}
/* End Additional CSS Styles */
William D
Great article, thank you very much. Could the read more button color/text color also be changed in a similar manner? Something (I probably did) has changed my buttons in a very unpleasant way and I’m having a heck of a time trying to figure out how to make them pleasant again.
Thanks in advance for any help you might provide!
Matus
Great tutorial. Simple and clear explanation.
Neon Emmanuel
Hello, if i include this in single.php it echo back the current post title, but works fine in index.php, any suggestion to this?
MayMyatKhine
Hello,Please send to me the new event to use the wordpress.
marisa
This is a great article but I’m having trouble with placing
ID, ‘post-class’); ?>
Where exactly in the loop do I put it? I am using underscore.me with foundation 5 and my new class isn’t appearing.
Alberto Hartzet
Perfect!, ty. What about the first and « the last » post? any ideas?
Nadeem
Thanx alot bro..its very helpful
RW
yet another bookmark! great post! thank you…
Payal
Very informative, thank you. I’ve bookmarked this page.
I also have a question: What if I wanted to style the first (latest) post differently — so that the post displayed at the top of my index page shows up differently?
James
Hey there, I’m struggling with this atm..
My post loop doesnt seem to have a post_class function so I cant figure out where to place the above code…
This is the loop I use for posts, where would I place the above code? Or how could I get custom fields to work using this?
Editorial Staff
You have to add something like this on your post loop:
1-click Use in WordPress
Administrateur
Jon Fuller
Hello, I am quite new to making WordPress themes and I am looking for a way to display each post in a box of its own which is seperated by a margin top and bottom. Please explain how this is possible.
Thanks
Editorial Staff
By default each post is inside its own div element. You just have to use CSS to add margin-top and bottom.
Administrateur
Shaun
Curious, how could this be applied to adding a CSS class to only posts posted that have the same « meta value » or « meta value number »?
Thanks for the great tutorial by the way!
Best
Editorial Staff
We showed how to do it with custom fields, but that’s being done by key. But if you have the same key with multiple values, then you should get_post_custom_values function.
Administrateur
Em
Just found this post and it is great, clear, succinct and spot on, many thanks
Jim
I would like to do something where post one gets the class « 1 », post two gets « 2 » post three gets « 3 », and then it repeats this order, so post four gets « 1 » again.
Any tips? it’s just repeating three different classes every three posts.
Editorial Staff
You would have to use the super loop option.
Administrateur
Brit
What I’m trying to do specifically is just make it so when someone lands on my blog, that the thumbnail (which is just a circle with the post title) is a different color for ONLY the most recent post. I’m at a loss of how to make this happen. Everything I’ve found is category or order specific. Thoughts?
Editorial Staff
Brit, you would have to use the last method « Super Loop ». That is probably the only way of doing it because all what you would do is on the first post, you add a unique class such as « first-post » , and then style that using your CSS file.
Administrateur
Jayaseelan Arumugam
It is very Nice and useful post. Especially I like the way to Style Posts based on Custom Fields. Thanks.
Kathleen
Thanks for this great article! It’s exactly what I searched for and so much helpful!
dina
How do I add unique class to the 3rd, 6th, 9th, and 12nd posts in super loop. Thanks!
vajrasar
Well, that is a very good piece. I got what you said, but can you shed some light on how am gonna implement this on my Genesis driven News Child theme, as I am supposed to do all this with function.php
I would like to style category specific posts differently. Thanks a lot for this piece. very informative.
Editorial Staff
So if you are just using the post class method, then Genesis has the field under their Layout settings for each post. You can enter a custom class and style it that way. The rest can get pretty complicated depending on all the hooks and such. We don’t necessary do genesis specific articles here.
Administrateur
jim
What do you mean index.php in the loop. which index.php. Mine has nothing like yours. This is the 10th post I’ve read where no one has explained this basic concept properly. And what about the CSS. Last 10 posts didn’t explain that either. Internet is getting worse and worse.
Editorial Staff
Hey Jim,
Every WordPress theme does things differently. The concept of loop is pretty well explained in the WordPress Codex. It requires a simple google search: Loop WordPress which will take you to: http://codex.wordpress.org/The_Loop
Because every theme varies, some utilize a separate loop.php file others are child themes which don’t even have index.php files. It is really hard to explain all of those concepts. When we put tutorials in a theme category, we expect the users to have a fair knowledge of how WordPress themes work (even if you don’t know PHP).
Administrateur
Haider E Karrar
I think you should be using filters instead in combination with the template tags here http://codex.wordpress.org/Conditional_Tags
For example
function my_post_css_filters($content) {
if(is_category(…))
return » $content « ;
else if (something else)
….
}
add_filter(‘the_content’, ‘my_post_css_filters’, 1) — (priority 1, not sure what else it may affect).
Hossein
Hi..
How i can wrap every 4 posts in a div ?
gashface
Nevermind got that working, but NOW it doesn’t style each post differently, it just styles them all according to the first post author it finds?
gashface
Is there a way to specificy a tag like H2 is styled by author I am trying .username h2{} for example but it won’t work?
gashface
This doesn’t show the author with me just a blank space, pasted your exact code, any ideas? posts made by admin and are private, does that make a difference?
wpbeginner
@gashface not it doesn’t make a difference whether the post is private or public… If it is returning a white page, then you are pasting the code in a wrong place.
gashface
I realised it was because I was putting the code before the call to the loop, I thought you meant before the if have posts etc.. when it needs to go after that, thanks for the heads up
KimeeDoherty
This was a little helpful, but I am still lost
Not sure how to include the loop file in order to override the template. You started the <div> tag but not ended them, what’s inside the div? I’m lost 
kristelvdakker
Thank you so much for this post! It has been very helpful.
Stuart
Hi, thanks for the ideas – especially the super loop – pleased to have got it working on my site.
But I wonder, complete php beginner here, so is there a way to adapt the code so each subsequent page of posts doesn’t get the styling that posts 1, 2, 3, & 4 get on the first page.
In other words, I only want the first four posts on the first page to look any different to the rest.
Cheers,
Stu
Editorial Staff
Yes. You can use is_paged() conditional tag, so it only shows up on the first page, but not the others. You can also use is_home() … so only on the homepage.
Administrateur
Stuart
Cool – thank you. Looks like is_paged() is the one for me – but unfortunately, my novice abilities mean I’m struggling to work out how to integrate it in to the code.
Stuart
Got there in the end…
Michael
If you wanted to use this approach to separate posts visually based on their published date. How would you go about it? For example: style the 5 posts published on the 1st with a black background, and then style the posts published on the 2nd with a red background? Thanks in advance!
Editorial Staff
The best way to do this is using the superloop method. Where you use the counter variable to set the post class values.
Administrateur
Dale
I am trying to style each authors name a different colour on our wordpress website and I have followed your code as below:
Whilst this code is kind of working on my wordpress theme it is putting end quotation marks after class-2 but before the authors name so the class is being closed without the name in it. I only found this out by putting that php inside the body where you can see the full string.
Does anyone have any ideas why this is happening?
Dale
Sorry it stripped out the php I posted but here is the class output of styling my posts by the authors name. The author here is called admin, and as you can see the closing tag is before the author name admin.
« post-395 post type-post hentry category-uncategorized class-1 class-2″admin
Bec
Great post! That info is awesome for adding those extra special custom features to your design.
Adam W. Warner
Indeed a great post, hats off! However, I couldn’t help but keep thinking about when it’s time to upgrade the theme you’re making all these custom edits to. I try to use the functions file whenever possible to avoid overwrites.
I would think it would be better to roll these loop edits into a function. I know that with Parent Themes like Thematic, Hybrid, Genesis, etc…that it’s possible (and advisable) to filter the loop and thus add these changes.
@Ken – Maybe your plugin would negate the need for any functions altogether?
Anyway, just my two cents and congrats Syed and the team on your continuing excellence on this site!
Azad Shaikh
Very useful post indeed. Why don’t you publish some wordpress themes with your awesome ideas and functionality. I would be great success.
Thanks!
Ken
Your article has giving me a few ideas on how to improve my plugin, thanks for that!
I just wrote a plugin (Scripts n Styles) for adding CSS directly to the head element from the post/page editing screen. (Only admin users can do this though.) It’s not as robust (or rather, doesn’t address the same thing) as your solution because the CSS only appears on the single view, not in the lists (archives).
I’m considering adding the functionality to include a class name into post_class, but via a meta box on the admin screen. Then, the admin would only have to add the css to his theme. (Or, perhaps a setting screen to facilitate this?)
Anyway, the Super Loop seems useful for theming in general, I’ll have to include that in my next one!
Connor Crosby
Wow, that is a great post! Perfect timing since I am making a new Wordpress theme