Etes-vous déjà tombé sur un site qui propose un style différent pour chaque article ? Certains sites ont différents articles « en avant » mis en évidence alors que d’autres ont chaque catégorie avec des couleurs différentes, parfois certaines peuvent même avoir une perspective tout à fait unique.
Eh bien, c’est exactement ce que nous allons couvrir dans ce tutoriel. Nous allons partager avec vous les différentes méthodes que vous pouvez employer pour donner un style unique à vos articles sur WordPress.
Alors qu’allons utiliser? Nous allons utiliser une fonction appelée « post_class ». Cette fonction imprime différentes classes sur les conteneurs d’articles (balise HTML), généralement dans le fichier index.php, single.php, et d’autres fichiers qui affichent une « boucle d’articles » (En référence à « WordPress Loop »).
Remarque: Ce tutoriel nécessite que vous soyez familier avec la conception de thème WordPress et maîtriser un peu du HTML/CSS.
Lorsque vous ouvrez votre fichier « index.php », ou un autre fichier ayant une boucle, vous verrez normalement des balises « div » avec des classes « post-{id} », mais également probablement l’utilisation de la fonction « post_class ».
<div id="post-<?php the_ID(); ?>" <?php post_class(); ?>>
En ajoutant cette fonction dans une balise « div », chacun de vos articles auront les classes suivantes, ajoutées par WordPress. Les classes suivantes sont ajoutées par défaut:
- .post-id
- .post
- .attachment
- .sticky
- .hentry (hAtom microformat pages)
- .category-ID
- .category-name
- .tag-name
Voici l’exemple d’une balise avec des classes.
<div id="post-4564" class="post post-4564 category-48 category-dancing logged-in">
Donc, si vous ouvrez votre fichier « style.css » et ajoutez la classe « category-dancing », vous serez en mesure de personnaliser l’affichage des articles de la catégorie « dancing ».
.category-dancing{background: #97c3e1; border: 1px solid #84aac4;}
Ce qui précède donnera aux articles dans la catégorie « dancing » d’avoir un fond bleu. Vous pouvez poursuivre en ajoutant une autre classe pour la classe « category-danse » etc. Vous pouvez utiliser la même technique pour donner un look unique à des articles qui ont une étiquette spécifique.
Mais pour quelqu’un souhaite vraiment personnaliser le look de son site, il pourrait avoir besoin de contrôles supplémentaires en termes de classes. Eh bien, vous pouvez spécifier les classes que vous souhaitez utiliser comme suit :
<?php post_class('class-1 class-2'); ?>
Mais, comment cela fonctionnera sur une plateforme dynamique comme WordPress ? Alors regardons quelques exemples sur comment ajouter des classes à vos articles sur WordPress.
Style en fonction des auteurs
Souvent, vous remarquerez que certains blogs utilisent un style différent en fonction des auteurs. Pour ces blogs, c’est une bonne idée de donner un style unique à chaque article en fonction des auteurs. Donc, dans cet exemple, nous allons donner à chaque article son propre style en fonction du nom de l’auteur. Donc, dans votre fichier « index.php » ou un autre fichier (archive.php / category.php etc), nous allons récupérer le nom de l’auteur de l’article :
<?php $author = get_the_author_meta('display_name'); ?>
Le code ci-dessus récupère le nom « affiché » d’un auteur, et il est d’attribuer à la variable $author. Maintenant que nous avons une valeur, nous pouvons l’ajouter dans notre code post_class comme ceci:
<?php post_class('class-1 class-2 ' . $author); ?>
Remarque: Vous n’êtes pas obligé de garder la classe 1 et classe 2. C’est tout simplement si vous voulez ajouter des classes statiques.
Notre exemple devrait ressembler à ceci :
<div id="post-4564" class="post post-4564 category-48 category-dancing logged-in class-1 class-2 Syed">
Le nom sera différent sur chaque article en fonction de la variable de du nom public d’un auteur. Vous pouvez ensuite ajouter le style de votre choix comme ceci :
.Herve{border: 1px solid #000;}
.Thierry{border: 1px solid #d88b3d;}
.Franklin {border: 1px solid #4781a8;}
Ensuite, chaque article dans la boucle aura une classe différente et donc se verra appliqué un style différent.
Style en fonction du nombre de commentaire
Vous avez vu des sites avec articles populaires dans un widget, qui sont principalement basées sur le nombre de commentaire. Eh bien, dans cet exemple, nous allons vous montrer comment le style des articles varie en fonction du nombre de commentaires. La première chose que nous devons faire est d’obtenir le nombre de commentaires et d’associer une classe cette dernière. Pour obtenir le nombre de commentaires, nous avons besoin du code suivant dans la boucle:
<?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';
}
?>
Dans le code ci-dessus, nous ajoutons des classes selon une échelle précise. Si un article à moins de 10 commentaires, alors la classe « new » sera ajoutée. Si l’article à plus de 10 commentaires et moins de 20 commentaires, alors la classe «ermerging» seront ajoutés. Si l’article a plus de 20 commentaires, alors la classe «populaire» sera ajoutée. Vous pouvez modifier cette échelle en fonction du taux de commentaires moyen de votre site.
Donc, le code des articles sera similaire à ceci :
<?php post_class('class-1 class-2 ' . $my_comment_count); ?>
Assurez-vous de coller le code ci-dessus dans la boucle. Ensuite, vous allez ajouter la variable $custom_values à post_class fonction.
.new {border: 1px solid #FFFF00;}
.emerging {border: 1px dashed #FF9933;}
.popular {border: 1px dashed #CC0000;}
C’est de loin la meilleure méthode pour personnaliser le style des articles sur WordPress. Mais parfois, vous souhaiterez avoir encore plus de contrôle. Les classes CSS vous donnent la possibilité de modifier l’aperçu, mais pas de modifier la structure.
C’est tout pour ce tutoriel. J’espère que vous arriverez à créer des styles spécifiques pour des articles sur WordPress.