Au fil des ans, WPBeginner a reçu beaucoup de questions sur les étiquettes, dont l'une est de savoir s'il vaut la peine de styliser les étiquettes WordPress pour qu'elles se démarquent sur une page.
Les étiquettes vous aident à organiser votre contenu par sujets. Elles sont comme des hashtags pour vos articles de blog WordPress et aident les utilisateurs à découvrir plus de contenu. Mais, d'après notre expérience, si elles ne se démarquent pas visuellement, elles risquent d'être négligées.
Dans cet article, nous vous montrerons comment styliser facilement les étiquettes dans WordPress pour obtenir plus d'engagement utilisateur et de vues de page sur votre site web.
Comment afficher les étiquettes dans WordPress
WordPress est livré avec deux taxonomies principales appelées catégories et étiquettes. Alors que les catégories sont utilisées pour les domaines majeurs de votre contenu, les étiquettes vous permettent de trier le contenu par sujets plus spécifiques.
De nombreux thèmes WordPress populaires affichent les étiquettes en haut ou en bas de vos articles par défaut.
Cependant, vous pouvez également afficher les étiquettes sur les pages d'archives, le pied de page, les barres latérales et presque partout où vous le souhaitez dans WordPress.
Pour insérer un nuage d'étiquettes dans vos articles, pages et widgets de barre latérale, vous pouvez simplement ajouter le bloc « Nuage d'étiquettes ».
Un nuage d'étiquettes donne à chaque étiquette une taille de police différente en fonction du nombre d'articles. Vous pouvez également choisir d'afficher le nombre d'articles à côté de chaque étiquette.
Ce ne sont que les options par défaut disponibles dans WordPress, mais que faire si vous vouliez personnaliser davantage vos étiquettes ? Nous allons vous montrer comment.
Jetons un coup d'œil à la façon de styliser facilement les étiquettes dans WordPress.
Styliser le nuage d'étiquettes par défaut dans WordPress
Après avoir ajouté le bloc Nuage d'étiquettes à un article ou une page, vous pouvez le personnaliser en ajoutant du CSS personnalisé.
Le bloc nuage d'étiquettes inclut automatiquement des classes CSS générées par défaut par WordPress qui peuvent être utilisées pour les styliser.
Pour ajouter du CSS personnalisé à votre site WordPress, allez simplement sur la page Apparence » Personnaliser et basculez vers l'onglet CSS additionnel.
Vous pouvez commencer par ajouter ce code CSS personnalisé comme point de départ.
.tag-link-position-1 { font-size:40px!important;}
.tag-link-position-2 { font-size:35px!important;}
.tag-link-position-3 { font-size:30px!important; }
.tag-link-position-4 { font-size:35px!important; }
.tag-link-position-5 { font-size:30px!important; }
.tag-cloud-link {
text-decoration:none;
background-color:#fff;
}
.tag-link-count {
background-color: #d6d6d6;
}
Comme vous pouvez le voir, vous pouvez utiliser la classe .tag-link-position pour ajuster le style en fonction de la position des liens. Les étiquettes avec plus d'articles sont plus haut en position, et les étiquettes avec moins d'articles sont plus bas.
Si vous souhaitez que toutes les étiquettes de votre bloc nuage d'étiquettes aient la même taille, vous pouvez utiliser le CSS suivant à la place :
.tag-cloud-link {
font-size:16px !important;
border:1px solid #d6d6d6;
}
.tag-cloud-link {
text-decoration:none;
background-color:#fff;
}
.tag-link-count {
background-color: #d6d6d6;
}
Voici à quoi cela ressemblait sur notre site de test :
Styliser les étiquettes d'articles dans WordPress
En plus de styliser vos nuages d'étiquettes, vous voudrez peut-être aussi styliser les étiquettes d'articles qui sont affichées sur vos articles de blog individuels. Habituellement, votre thème WordPress les afficherait en haut ou en bas du titre de l'article ou du contenu de l'article.
Vous pouvez survoler les balises et faire un clic droit pour utiliser l'outil Inspecter pour afficher les classes CSS utilisées par votre thème WordPress.
Après cela, vous pouvez utiliser ces classes CSS dans votre CSS personnalisé. Voici un exemple de code basé sur les classes CSS de notre thème de test :
.entry-tag {
padding: 5px 8px;
border-radius: 12px;
text-transform: lowercase;
background-color: #e91e63;
color:#fff;
}
.entry-tags a {
color:#fff;
font-size:small;
font-weight:bold;
}
Voici à quoi cela ressemblait sur notre site de test.
Créer un nuage de tags personnalisé dans WordPress
Le bloc de nuage de tags par défaut est facile à utiliser, mais certains utilisateurs avancés peuvent vouloir le personnaliser afin d'avoir plus de flexibilité.
Cette méthode vous permet d'ajouter vos propres classes HTML et CSS entourant le nuage de tags. Vous pouvez ensuite l'utiliser pour personnaliser l'apparence du nuage de tags selon vos propres besoins.
La première chose à faire est de copier et coller ce code dans le fichier functions.php de votre thème ou dans un plugin d'extraits de code :
function wpb_tags() {
$wpbtags = get_tags();
foreach ($wpbtags as $tag) {
$string .= '<span class="tagbox"><a class="taglink" href="'. get_tag_link($tag->term_id) .'">'. $tag->name . '</a><span class="tagcount">'. $tag->count .'</span></span>' . "\n" ;
}
return $string;
}
add_shortcode('wpbtags' , 'wpb_tags' );
Nous recommandons d'ajouter ce code avec WPCode, le meilleur plugin de snippets de code pour WordPress. Il vous permet d'ajouter facilement du code personnalisé dans WordPress sans modifier le fichier functions.php de votre thème, vous évitant ainsi de casser votre site.
Pour commencer, installez et activez le plugin gratuit WPCode. Si vous avez besoin d'aide, consultez notre tutoriel sur comment installer un plugin WordPress.
Une fois le plugin activé, accédez à Snippets de code » Ajouter un snippet depuis le tableau de bord WordPress.
Ensuite, survolez l'option « Ajouter votre code personnalisé (Nouveau snippet) » avec votre souris et cliquez sur le bouton « Utiliser le snippet ».
À partir d'ici, vous devez sélectionner « Snippet PHP » comme type de code dans la liste des options qui apparaissent à l'écran.
Ensuite, vous pouvez ajouter un titre pour le snippet en haut de la page. Cela peut être n'importe quoi pour vous aider à vous souvenir de l'utilité du code.
Ensuite, collez simplement le code ci-dessus dans la boîte « Aperçu du code ».
Après cela, tout ce que vous avez à faire est de faire passer le commutateur de « Inactif » à « Actif » et de cliquer sur le bouton « Enregistrer le snippet ».
Ce code ajoute un shortcode qui affiche toutes vos balises avec leur nombre d'articles à côté.
Pour l'afficher sur votre page d'archives ou dans un widget, vous devez utiliser ce shortcode :
[wpbtags]
L'utilisation de ce code seul affichera uniquement des liens de balises et le nombre d'articles à côté d'eux. Ajoutons un peu de CSS pour améliorer l'apparence. Copiez et collez simplement ce CSS personnalisé sur votre site Web.
.tagbox {
background-color:#eee;
border: 1px solid #ccc;
margin:0px 10px 10px 0px;
line-height: 200%;
padding:2px 0 2px 2px;
}
.taglink {
padding:2px;
}
.tagbox a, .tagbox a:visited, .tagbox a:active {
text-decoration:none;
}
.tagcount {
background-color:green;
color:white;
position: relative;
padding:2px;
}
N'hésitez pas à modifier le CSS pour répondre à vos besoins. Voici à quoi cela ressemblait sur notre site de démonstration :
Nous espérons que cet article vous a aidé à apprendre comment styliser facilement les balises dans WordPress. Vous voudrez peut-être aussi consulter notre guide sur comment masquer ou styliser vos sous-catégories dans WordPress ou consulter cette liste de conseils, astuces et hacks WordPress très utiles.
Si cet article vous a plu, abonnez-vous à notre chaîne YouTube pour des tutoriels vidéo WordPress. Vous pouvez également nous retrouver sur Twitter et Facebook.
kzain
La stylisation des balises dans WordPress peut faire une grande différence dans l'apparence générale d'un blog. J'adore que vous ayez décomposé le processus en étapes simples ; les exemples de CSS sont vraiment utiles. Votre conseil d'utiliser un thème enfant pour éviter de perdre les personnalisations est également très apprécié. Maintenant, je peux enfin donner à mes balises le relooking qu'elles méritent ! Merci de partager votre expertise et de rendre la personnalisation de WordPress plus accessible à nous tous.
Jiří Vaněk
En lisant cet article, j'ai eu envie de créer mon propre nuage de balises. J'ai utilisé votre extrait mais j'ai modifié les couleurs et légèrement arrondi les coins. Cela a fonctionné comme par magie. C'est bien d'avoir des balises de la même couleur que le thème de l'ensemble du site Web. C'est peut-être un petit détail, mais c'est très agréable.
Dennis Muthomi
le guide étape par étape et les extraits de code sont vraiment utiles
QUESTION RAPIDE : Si j'applique ces extraits de code pour styliser mes tags et que je décide plus tard de changer de thème WordPress, le style des tags changera-t-il en fonction des styles par défaut du nouveau thème, ou restera-t-il avec les personnalisations que j'ai apportées à l'aide de ces extraits de code ?
Commentaires WPBeginner
Le CSS que vous avez ajouté devrait rester, mais vous devrez peut-être toujours modifier le CSS en fonction de la manière dont le CSS du nouveau thème affecte le style, et s'il y a des conflits.
Dennis Muthomi
Bonjour, merci pour la clarification utile !
Tant que je peux conserver les personnalisations avec quelques ajustements mineurs, c'est très utile à savoir.
Une question de suivi : lors du changement de thèmes, quelle serait la meilleure façon de vérifier et de résoudre les conflits CSS qui affectent le style des balises ?
Support WPBeginner
Nous n'avons pas de meilleure méthode spécifique à recommander. Ce serait quelque chose que vous devriez vérifier manuellement.
Jiří Vaněk
Pour faire suite à la question de Dennis. Est-il préférable d'ajouter du CSS en utilisant WP Code ou de le mettre directement dans le modèle ? Je suppose que si je le mets dans le modèle, je perdrai les paramètres lors du changement de thème, mais si j'utilise WP Code, les styles resteront même après le changement de thème. Est-ce correct ?
Commentaires WPBeginner
Correct. C'est similaire à l'utilisation de la section CSS additionnel dans le personnalisateur de thème.
Cela dit, le CSS nécessaire sera différent d'un thème à l'autre, donc l'utilité variera.
Nikola
Excellent guide, merci !
Serait-il possible de trier les tags par ordre d'utilisation et de limiter le nombre de tags affichés ?
Support WPBeginner
Pour le moment, vous auriez besoin d'un plugin pour cela ou d'un code personnalisé, nous n'avons pas de méthode recommandée pour cela actuellement.
Admin
Jemma Pollari
Génial, merci. Cela m'a vraiment aidé.
Support WPBeginner
Glad our guide could help
Admin
Joe Smith
C'est super ! Exactement ce que je cherchais et très élégant. Juste une question : si je voulais ajouter plus d'espace entre les tags, comment modifierais-je le CSS ? J'ai essayé de changer plusieurs des paramètres dans le CSS ci-dessus mais aucun d'entre eux n'ajoute simplement d'espace blanc entre les tags.
Support WPBeginner
You would want to increase the padding for what you’re wanting
Admin
Ibiye Ambille
Salut, j'aimerais déplacer mes tags de publication sous l'image mise en avant.
Support WPBeginner
Pour cela, vous devriez contacter le support de votre thème spécifique pour obtenir de l'aide, car chaque thème a son propre emplacement pour l'image mise en avant.
Admin
Trishah
J'essaie d'ajouter une classe CSS "current" aux tags pour un article unique. Les quelques solutions que j'ai trouvées ne semblent plus fonctionner. Comment faire ?
Support WPBeginner
Cela dépendrait de votre thème spécifique. Si vous contactez le support de votre thème, ils devraient pouvoir vous indiquer où vous pouvez ajouter cette classe pour vos tags.
Admin
uche Peter
Mes tags sont listés en série... Pas de bordure rien rien,,, juste du texte... s'il vous plaît, comment leur donner une bordure avec une couleur d'arrière-plan ?
Kingsolomon
Comment appliquer le CSS s'il vous plaît
Hugo
Mon nuage de tags n'apparaît pas comme un nuage mais comme une liste, car après chaque span un saut de ligne est inséré. Comment puis-je supprimer ces sauts de ligne ?
Support WPBeginner
Salut Hugo,
Cet article explique comment styliser les tags de différentes manières. Si vous voulez un nuage de tags, vous pouvez utiliser le widget de nuage de tags par défaut de WordPress. Vous pouvez également utiliser la balise de modèle
1-click Use in WordPress
Admin
bob
Je comprends que vous ayez montré une autre page sur la façon de limiter les tags à un certain nombre, mais comment puis-je le faire avec cet exemple inclus ? Cela ne semble pas fonctionner en utilisant la méthode liée en combinaison avec ceci.
Amy Croson
J'ai du mal à ajouter ceci, et je pense que c'est à cause des limitations de mon thème 'Chosen'. J'ai copié et collé tout dans mon php, et cela me donne des erreurs à tout va. On me dit actuellement qu'il y a un '.' inconnu dans ce détail. Y a-t-il un moyen de formater ceci sans utiliser les '.' avant .taglink, .tagbox, et .tagcount ?
Val Archer
Bonjour – Je cherche un moyen de lister les tags sur une page category-slug.php. Savez-vous où je peux trouver ce tutoriel ?
Jusqu'à présent, j'ai créé une catégorie [sitename]/category/recipes et un fichier category-recipes.php.
Je tag les recettes, par exemple Petit-déjeuner, Dîner, etc.
J'aimerais que les Tags s'affichent dans category-recipes.php comme ceci. Je ne sais pas ce que je fais. Je copie depuis mon fichier category.php.
Archives de la catégorie :
Petit-déjeuner
maintenant, il liste tous les articles étiquetés Petit-déjeuner, quelque chose comme ceci :
<a href="”>
par / / publié dans cat_name . ‘ ‘;} ?>
Dîner
maintenant, il liste tous les articles étiquetés Dîner, quelque chose comme ceci :
<a href="”>
par / / publié dans cat_name . ‘ ‘;} ?>
[Puis à la fin de toutes les étiquettes :]
</div
S'il vous plaît, savez-vous où je peux obtenir de l'aide pour cela ?
merci ! – Val
Support WPBeginner
Avez-vous essayé d'ajouter :
<?php the_tags('posté dans:', '' ,'' ); ?>Admin
Magistar
Le code fonctionne bien pour un nuage de tags. Cependant, j'aimerais appliquer cela aux tags de publication (c'est-à-dire les tags associés à une publication et leur nombre, au lieu de la grande liste).
J'ai essayé quelque chose avec wp_get_post_tags mais je n'ai pas vraiment réussi à le faire fonctionner. Des suggestions ?
L'équipe de WPBeginner
Vous pouvez utiliser get_terms à la place de get_tags, consultez cette page du codex :
http://codex.wordpress.org/Function_Reference/get_terms
DER KUNSTBLOG
C'est super, j'ai ajouté votre code à un plugin spécifique au site – mais y a-t-il une possibilité de le modifier de manière à ce que la taille de la police varie en fonction de la fréquence d'utilisation du tag ? Une idée s'il vous plaît ? Merci !
L'équipe de WPBeginner
Oui, c'est possible, dans le premier extrait de code, vous devrez remplacer get_tags par la fonction wp_tag_cloud. Comme ceci :
$wpbtags = wp_tag_cloud('smallest=15&largest=40&number=50&orderby=count&format=array');
Invité
Comment faire la même chose avec le nuage de tags personnalisé pour les Catégories et les Taxonomies personnalisées ?
Terence O'Neill
Salut l'ami ; Comment faire exactement la même chose (afficher avec un shortcode) pour les Catégories et les Taxonomies personnalisées ? Merci pour le tutoriel au passage. Ça marche à merveille.