Avez-vous déjà rencontré un site qui stylise ses articles de blog différemment ? Certains sites ont des articles collants mis en évidence avec un arrière-plan personnalisé, tandis que d’autres peuvent avoir chaque article de catégorie stylisé avec un look unique. Si vous avez toujours voulu apprendre à styliser différemment chaque publication WordPress, alors vous êtes au bon endroit. Dans cet article, nous allons vous montrer comment styliser chaque article WordPress différemment.
Remarque : ce didacticiel nécessite que vous ajoutiez un CSS personnalisé dans WordPress. Vous devrez également être capable d’utiliser l’outil Inspecter. Des connaissances de base en CSS et HTML sont requises.
Styliser des articles individuels dans WordPress
WordPress ajoute des classes CSS par défaut à divers éléments de votre site Web. Un thème WordPress conforme à la norme doit avoir le code requis par WordPress pour ajouter des classes CSS pour le corps, les articles, les pages, les widgets, les menus, etc.
Une fonction WordPress de base appelée post_class()
est utilisé par les thèmes pour indiquer à WordPress où ajouter ces classes CSS par défaut pour les publications.
Si vous visitez votre site Web et utilisez l’outil Inspecter dans 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 l’utilisateur.
- .post-id
- .Publier
- .attachement
- .collant
- .hentry (pages de microformat hAtom)
- .category-ID
- .Nom de catégorie
- .tag-name
- .format-{nom-format}
- .type-{post-type-name}
- .has-post-thumbnail
- .post-password-required
- .post-protégé par mot de passe
Un exemple de sortie ressemblerait à ceci :
<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 les classes CSS respectives.
Par exemple, si vous souhaitez styliser une publication individuelle, vous pouvez utiliser la classe post-id dans votre CSS personnalisé.
.post-412 { background-color: #FF0303; color:#FFFFFF; }
N’oubliez pas de changer l’ID de publication pour qu’il corresponde au vôtre.
Regardons un autre exemple.
Cette fois, nous styliserons tous les messages classés dans une catégorie spécifique appelée actualités.
Nous pouvons le faire en ajoutant le CSS personnalisé suivant à notre thème »
.category-news { font-size: 18px; font-style: italic; }
Ce CSS affectera tous les messages classés dans la catégorie actualités.
La fonction de classe de poste
Les développeurs de thèmes utilisent la fonction post_class pour indiquer à WordPress où ajouter les classes de publication. Habituellement, c’est dans le <article>
étiqueter.
La fonction post class ne charge pas seulement les classes CSS générées par WordPress par défaut, elle vous permet également 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 de 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 celui-ci :
<article id="post-<?php the_ID(); ?>" <?php post_class('longform-article'); ?>>
La 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 sous forme de tableau, puis les appeler 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 ); ?>>
Style des messages différemment en fonction des auteurs
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 devrez d’abord ajouter le nom de l’auteur en tant que 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 nicename de l’utilisateur en tant que classe CSS. Nicename est un nom convivial URL utilisé par WordPress. Il n’a pas d’espaces et tous les caractères sont en minuscules, ce qui le rend parfait à utiliser comme classe CSS.
Le code ci-dessus vous donnera une sortie comme celle-ci :
<article id="post-412" class="peter post-412 post type-post status-publish format-standard hentry category-news">
Vous pouvez maintenant utiliser .peter dans votre CSS personnalisé pour donner un style différent à tous les articles de cet auteur particulier.
.peter { background-color:#EEE; border:1px solid #CCC; }
Style des messages en fonction de la popularité à l’aide du nombre de commentaires
Vous avez peut-être vu des sites avec des widgets de publications populaires qui sont parfois basés sur le nombre de commentaires. Dans cet exemple, nous allons vous montrer comment styliser les publications différemment en utilisant le nombre de commentaires.
Tout d’abord, nous devons obtenir le nombre de commentaires et lui associer une classe.
Pour obtenir le nombre de commentaires, vous devrez ajouter le code suivant dans vos fichiers de thème. Ce code va à l’intérieur de la boucle WordPress, vous pouvez donc l’ajouter juste avant la balise
<?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"; } ?>
Ce code vérifie le nombre de commentaires pour la publication affichée et leur attribue une valeur en fonction du nombre. Par exemple, les publications avec moins de 10 commentaires reçoivent une classe appelée nouveau, moins de 20 sont appelées émergentes et tout ce qui dépasse 20 commentaires est populaire.
Ensuite, vous devez ajouter la classe CSS de nombre de commentaires à la fonction post_class.
<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 du CSS personnalisé aux articles de style en fonction de leur 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 que vous souhaitez.
Style de publications basé sur des champs personnalisés
Les classes CSS de codage en dur dans votre fichier de thème vous limitent à ces classes CSS spécifiques. Et si vous vouliez décider quelle classe CSS ajouter à un article pendant que vous l’écrivez ?
Avec des champs personnalisés, vous pouvez ajouter des classes CSS à la volée.
Vous devez d’abord ajouter un champ personnalisé à une publication, afin de pouvoir la tester. Modifiez un message et faites défiler jusqu’à la section des champs personnalisés.
Ajoutez post-class comme nom de champ personnalisé et tout ce que vous souhaitez utiliser comme classe CSS dans le champ de valeur.
N’oubliez pas de cliquer sur le bouton « Ajouter un champ personnalisé » pour le stocker, puis enregistrez votre message.
Ensuite, modifiez vos fichiers de thème pour afficher votre champ personnalisé en tant que classe de publication.
<?php $custom_values = get_post_meta($post->ID, 'post-class'); ?> <article id="post-<?php the_ID(); ?>" <?php post_class( $custom_values ); ?>>
Il affichera le code HTML suivant :
<article id="post-412" class="trending post-412 post type-post status-publish format-standard hentry category-uncategorized">
Vous pouvez maintenant ajouter un CSS personnalisé pour le post_class que vous avez ajouté à l’aide d’un champ personnalisé.
.trending{ background-color:##ff0000; }
Les champs personnalisés peuvent avoir plusieurs valeurs, vous pouvez donc ajouter plusieurs classes CSS en utilisant le même nom.
Il existe de nombreuses autres façons de styliser les publications WordPress individuellement. Au fur et à mesure que vos compétences grandissent, vous continuerez à découvrir de nouvelles façons de styliser les publications en utilisant différentes conditions.
Nous espérons que cet article vous a aidé à apprendre à styliser différemment chaque article WordPress. Vous pouvez également consulter notre liste ultime des conseils, astuces et hacks WordPress les plus recherchés.