skip to Main Content

Comment donner un style unique à chaque article sur WordPress

Divi : le thème WordPress le plus facile à utiliser

Divi : Le meilleur thème WordPress de tous les temps !

Avec plus de 600.000 téléchargements, Divi est le thème WordPress le plus populaire au monde. Il est complet, facile à utiliser et livré avec plus de 62 templates gratuits. [ Recommandé ]

Avez-vous déjà rencontré un site web qui publient différemment ses articles sur le blog ?

Certains sites web ont des articles à la une surlignés avec un fond personnalisé tandis que d’autres peuvent avoir chaque publication de catégorie avec un look unique. Si vous avez toujours voulu apprendre à personnaliser chaque article WordPress, vous êtes au bon endroit.

Dans ce tutoriel, nous vous montrerons comment façonner différemment chaque article WordPress.

Mais, si vous n’avez jamais installé WordPress découvrez Comment installer un blog WordPress en 7 étapes et Comment rechercher, installer et activer un thème WordPress sur votre blog 

Ensuite revenons vers ce pourquoi nous sommes là.

Remarque: Ce tutoriel vous oblige à ajouter du CSS personnalisé sur WordPress. Vous devrez également utiliser l’outil Inspecter. Certaines connaissances CSS et HTML sont nécessaires.

Donner un style individuel sur des articles WordPress

WordPress ajoute des classes CSS par défaut sur divers éléments de votre site web. Un thème WordPress compatible standard doit avoir le code requis par WordPress pour ajouter des classes CSS pour le corps, les articles, les pages, les widgets, les menus et plus encore.

Découvrez aussi notre guide sur Permaliens : Comment personnaliser les liens de votre blog

Une fonction principale de WordPress appelée « post_class() » est utilisée par des thèmes pour dire à WordPress où ajouter ces classes CSS par défaut sur les articles.

Si vous visitez votre site Web et utilisez l’outil Inspecter sur votre navigateur, vous pourrez voir ces classes ajoutées pour chaque publication.

Voici les classes CSS ajoutées par défaut en fonction de la page affichée par un utilisateur.

  • .post-id
  • .poster
  • .attachement
  • .gluant
  • .hentry
  • .category-ID
  • .category-name
  • .tag-name
  • .format- {format-name}
  • .type-{post-type-name}
  • .has-post-thumbnail
  • .post-password-required
  • .protected-by-a-password

Un exemple d’affichange ressemblerait à ceci :

<article id="post-412" class="post-412 post type-post status-publish format-standard hentry category-actualites">

Vous pouvez personnaliser chaque publication WordPress différemment en utilisant les classes CSS respectives.

Lire aussi : Comment améliorer votre blog WordPress ce weekend

Par exemple, si vous souhaitez éditer une publication individuelle, vous pouvez utiliser la classe post-id dans vos CSS personnalisés.

.post-412 { 
background-color: #FF0303;
color:#FFFFFF; 
}

N’oubliez pas de changer l’ID de publication pour correspondre à l’identifiant de votre article.

Jetons un coup d’œil à un autre exemple.

Cette fois, nous aborderons tous les articles affichés dans une catégorie spécifique appelée « actualité ».

Découvrez notre guide sur Comment ajouter du CSS personnalisé sur votre blog WordPress

Créez Facilement votre site Web avec Elementor

Elementor vous permet de créer facilement n'importe quel design de site Web avec un look professionnel. Arrêtez de payer cher pour ce que vous pouvez faire vous-même. [ Gratuit ]

Nous pouvons le faire en ajoutant du CSS personnalisé suivant à notre thème.

.category-actualites { 
 font-size: 18px;
 font-style: italic;
}

Ce CSS affectera tous les articles classés dans la catégorie « actualité ».

La fonction post_class()

Les développeurs de thèmes utilisent la fonction post_class() pour dire à WordPress où ajouter les classes des publications. Habituellement, il est dans la balise « article ».

La fonction de post_class() ne charge pas seulement les classes CSS générées par WordPress par défaut, mais aussi vous permet d’ajouter vos propres classes.

Découvrez également Comment protéger votre blog des racleurs de contenu

Selon votre thème WordPress, vous trouverez la fonction post_class() dans votre fichier single.php ou dans les fichiers de modèle. Normalement, le code ressemblera à ceci :

<article id="post-<?php the_ID(); ?>" <?php post_class(); ?>>

Vous pouvez ajouter votre propre classe CSS personnalisée avec un attribut comme celui-ci :

<article id="post-<?php the_ID(); ?>" <?php post_class('longform-article'); ?>>

La classe post_class imprimera les classes CSS par défaut respectives avec votre classe CSS personnalisée.

Si vous souhaitez ajouter plusieurs classes CSS, vous pouvez les définir en tant que tableau, puis les utiliser dans la fonction post-class().

<?php 
$custom_classes = array(
 'longform-article',
 'featured-story',
 'interactive',
 );
?>
<article id="post-<?php the_ID(); ?>" <?php post_class( $custom_classes ); ?>>

Afficher des articles avec un style différent selon les auteurs

Les classes CSS par défaut générées par la fonction posts_class n’incluent pas le nom de l’auteur en tant que classe CSS.

Si vous souhaitez personnaliser le style de chaque publication en fonction de l’auteur, vous devez d’abord ajouter le nom de l’auteur comme classe CSS.

A lire aussi : Comment ajouter des animations CSS sur WordPress

Vous pouvez le faire en utilisant l’extrait suivant:

<?php $author = get_the_author_meta('user_nicename'); ?>
<article id="post-<?php the_ID(); ?>" <?php post_class( $author ); ?>>

Ce code ajoutera le nom d’utilisateur comme une classe CSS. Le nom d’utilisateur est un nom compatible avec l’URL utilisé par WordPress. Il n’a pas d’espace et tous les caractères sont en minuscules, ce qui le rend parfait pour être utilisé comme classe CSS.

Consultez également notre guide sur Comment ajouter du CSS personnalisé sur votre blog WordPress

Le code ci-dessus s’affichera probablement ainsi :

<article id="post-412" class="peter post-412 post type-post status-publish format-standard hentry category-news">

Maintenant, vous pouvez utiliser « .peter » dans votre CSS personnalisé pour modifier tous les articles de cet auteur particulier afin qu’ils s’affichent différemment.

.peter { 
background-color:#EEE;
border:1px solid #CCC; 
}

Personnaliser l’affichage des articles en fonction des commentaires

Vous avez peut-être vu des sites web avec des widgets ayant des articles populaires qui sont parfois classés sur la base des commentaires. Dans cet exemple, nous vous montrerons comment créer un style différent en utilisant le nombre de commentaires.

Cherchez-vous les meilleurs thèmes et plugins WordPress ?

Téléchargez les meilleurs plugins et thèmes WordPress sur Envato et créez facilement votre site web. Déjà plus de 49.720.000 de téléchargements. [EXCLUSIF]

Découvrez nos 10 plugins WordPress premium pour gérer vos commentaires

Tout d’abord, nous devons obtenir le nombre de commentaires et associer une classe.

Pour obtenir le nombre de commentaires, vous devez ajouter le code suivant dans les fichiers de votre thème WordPress. Ce code entre dans la boucle WordPress, vous pouvez l’ajouter juste avant la balise <article>.

<?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 = 'ermerging';
 } elseif ($my_comment_count >= 20) {
 $my_comment_count = 'popular';
 }
?>

Ce code vérifie le nombre de commentaires pour la publication affichée et leur attribue une valeur basée sur le compte. Par exemple, les messages avec moins de 10 commentaires obtiennent une classe appelée « new », moins de 20 sont appelés « emerging », et tout ce qui concerne plus de 20 commentaires est « popular ».

Ensuite, vous devez ajouter la classe CSS à la fonction post_class.

<article id="post-<?php the_ID(); ?>" <?php post_class( $my_comment_count ); ?>>

Cela ajoutera les classes CSS new, emerging et popular à toutes les articles en fonction du nombre de commentaires de chaque publication.

Nous vous invitons aussi à lire notre article sur les 6 plugins WordPress pour faire signer des documents en ligne

Vous pourrez aussi ajouter un CSS personnalisé aux publications de style en fonction de la popularité :

.new {border: 1px solid #FFFF00;}
.emerging {border: 1px dashed #FF9933;}
.popular {border: 1px dashed #CC0000;}

Nous ajoutons simplement des bordures, mais vous pouvez ajouter toutes les règles CSS souhaitées.

Découvrez aussi quelques plugins WordPress premium  

Vous pouvez utiliser d’autres plugins WordPress pour donner une apparence moderne et pour optimiser la connexion à votre blog ou site web.

Nous vous proposons donc ici quelques plugins WordPress premium qui vous aideront à le faire.

1. Ultimate Membership Pro

Ultimate Membership Pro est un excellent plugin WordPress premium d’abonnement et de restriction de contenu. Il permet de gérer les utilisateurs selon leur forfait (gratuit ou payant) en créant des niveaux d’accès exclusifs.

Il sera donc possible de protéger tout le contenu de votre site web, ou juste une partie de celui-ci. Il s’agira par exemple d’un cours, d’une leçon, d’une page, d’un produit, d’une catégorie, d’une image, etc…

Lisez aussi notre article sur 4 plugins WordPress premium pour créer des vignettes

Ses principales fonctionnalités sont entre autres : la protection du contenu, de multiples niveaux d’accès, le support de plusieurs passerelles de paiement – PayPal, Authorize.net, Stripe, 2CheckOut, Bank Transfer-, la protection partielle du contenu,  et bien plus encore…

Télécharger | Démo | Hébergement Web 

2. Comment Slider for Facebook

Comment Slider for Facebook est un plugin WordPress premium qui offre aux visiteurs la possibilité de laisser des commentaires sur votre site Web. Avec cette boîte de commentaires moderne et non intrusive, ce plugin WordPress fournit une fonctionnalité Like Box et Fan Page Wall qui étendront l’intégration de votre site web avec le réseau social Facebook.

Le plugin fournit également diverses fonctionnalités pour étendre les capacités de votre site web : Il dispose par exemple d’une section Like (« Like Box ») ou encore d’une page dédiée aux fans (« Fan Page Wall).

Découvrez aussi Comment charger progressivement les commentaires Facebook et Disqus

Vous n’avez pas besoin d’intégrer les boutons « J’aime » et « Partager » aux articles ou aux pages, car Facebook Comment Slider en dispose déjà et ils peuvent apparaître sur n’importe quel article ou page. Les visiteurs trouveront le bouton « J’aime », le bouton « Partager » et la boîte des commentaires sur le slider de Facebook. Ils utiliseront bien évidemment leurs comptes Facebook.

En outre, vous pouvez activer, désactiver et régler l’heure de l’effet de tremblement.

Télécharger | Démo | Hébergement Web

Créez Facilement votre Boutique en ligne

Téléchargez gratuitement WooCommerce, le meilleurs plugins e-commerce pour vendre vos produits physiques et numériques sur WordPress. [Recommandé]

3. Login Ninja

Ce plugin WordPress premium vous permet de personnaliser votre page de connexion. C’est plus qu’une simple personnalisation de votre formulaire de connexion. Vous pouvez personnaliser la page entière, en changeant la couleur de celle-ci, ajouter une image en arrière-plan, ajouter un logo et plus encore.

Ses autres fonctionnalités sont : la protection des formulaires de connexion et d’enregistrement avec captcha, le bannissement automatique et manuel des IP qui vous attaquent par force brute, un journal détaillé de toutes les activités liées à la connexion, la redirection des utilisateurs en fonction des rôles et des noms d’utilisateur, la réception des notifications par e-mail pour tous les événements de connexion, une interface graphique facile à utiliser, une documentation détaillée et autres.

Télécharger | Démo | Hébergement Web

Ressources recommandées

Découvrez d’autres ressources recommandées qui vous accompagneront dans la création et la gestion de votre site web.

Conclusion

Voila ! C’est tout pour ce tutoriel, j’espère qu’il vous permettra de personnaliser l’affichage des articles sur votre blog WordPress. Si vous avez un quelconque souci ou des suggestions en la matière, retrouvons nous dans la section commentaires pour en discuter.

Cependant, vous pourrez aussi consulter nos ressources, si vous avez besoin de plus d’éléments pour mener à bien vos projets de création de sites internet, en consultant notre guide sur la création de blog WordPress ou celui sur Divi : le meilleur thème WordPress de tous les temps.

Mais en attendant, partagez cet article sur vos différents réseaux sociaux.

… 

Cet article comporte 0 commentaires

Laisser un commentaire

Votre adresse de messagerie ne sera pas publiée. Les champs obligatoires sont indiqués avec *

Ce site utilise Akismet pour réduire les indésirables. En savoir plus sur comment les données de vos commentaires sont utilisées.

Back To Top
4 Partages
Partagez2
Tweetez1
Enregistrer1