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 qui diffusait différemment ses articles sur le blog ? Certains sites 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 chaque publication WordPress différemment.

Remarque: Ce tutoriel vous oblige à ajouter des CSS personnalisés 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 sur votre site. Un thème WordPress compatible standard doit avoir le code requis par WordPress pour ajouter des classes CSS pour le corps, les publications, les pages, les widgets, les menus et plus encore.

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 pour les publications.

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.

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.

Démarrez la promotion de votre blog

Téléchargez des dizaines de Logos, bannières, modèles de sites web et de nombreux autres outils marketing pour faire connaître votre Blog WordPress. [Recommandé]

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é ».

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.

Selon votre thème, vous trouverez la fonction post_class() dans votre fichier single.php ou dans les fichiers de modèle du contenu. 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 ceci:

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

Le 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().

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 ]

<?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.

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.

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 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.

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

Pour obtenir le nombre de commentaires, vous devrez ajouter le code suivant dans les fichiers de votre thème. 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.

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]

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

Cela ajoutera des classes CSS nouvelles, émergentes et populaires à toutes les publications en fonction du nombre de commentaires de chaque publication.

Vous pouvez 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, vous pouvez ajouter toutes les règles CSS souhaitées.

C’est tout pour ce tutoriel, j’espère qu’il vous permettra de personnaliser l’affichage des articles sur votre blog WordPress.

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