Voulez-vous styliser les balises dans WordPress pour les rendre plus visibles ?
Les balises vous aident à organiser votre contenu en rubriques. Ils sont comme des hashtags pour vos articles de blog WordPress et aident les utilisateurs à découvrir plus de contenu.
Dans cet article, nous allons vous montrer comment styliser facilement les balises dans WordPress pour obtenir plus d’engagement des utilisateurs et de pages vues sur votre site Web.
Comment afficher les balises dans WordPress
WordPress est livré avec deux taxonomies principales appelées catégories et balises. Alors que les catégories sont utilisées pour les principaux domaines de votre contenu, les balises vous permettent de trier le contenu en sujets plus spécifiques.
De nombreux thèmes WordPress populaires affichent des balises en haut ou en bas de vos articles par défaut.
Cependant, vous pouvez également afficher des balises sur les pages d’archives, le pied de page, les barres latérales et presque partout où vous le souhaitez.
Pour insérer un nuage de tags dans vos articles, pages et widgets de la barre latérale, vous pouvez simplement ajouter le bloc Tag Cloud.
Un nuage de tags attribue à chaque tag une taille de police différente en fonction du nombre de messages. Vous pouvez également choisir d’afficher le nombre de publications à côté de chaque balise.
Ce ne sont que les options par défaut disponibles dans WordPress, mais si vous vouliez personnaliser encore plus vos balises ? Nous allons vous montrer comment.
Voyons comment styliser facilement les balises dans WordPress.
Styliser le nuage de tags par défaut dans WordPress
Après avoir ajouté le bloc Tag Cloud à un article ou à une page, vous pouvez le personnaliser en ajoutant un CSS personnalisé.
Le bloc de nuage de tags inclut automatiquement des classes CSS générées par WordPress par défaut qui peuvent être utilisées pour les styliser.
Pour ajouter du CSS personnalisé à votre site WordPress, rendez-vous simplement sur Apparence » Personnaliser page et passez à l’onglet CSS supplémentaire.
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 le .tag-link-position
classe pour ajuster le style en fonction de la position des liens. Les balises avec plus de messages sont plus hautes en position et les balises avec moins de messages sont plus basses.
Si vous souhaitez que toutes les balises de votre bloc de nuage de balises 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 balises de publication dans WordPress
En plus de styliser vos nuages de tags, vous souhaiterez peut-être également styliser les balises de publication 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 la publication ou du contenu de la publication.
Vous pouvez passer la souris sur les balises et cliquer avec le bouton droit pour utiliser l’outil Inspecter afin d’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 des classes CSS sur 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 voudront peut-être le personnaliser afin d’avoir plus de flexibilité.
Cette méthode vous permet d’ajouter vos propres classes HTML et CSS autour du nuage de tags. Vous pouvez ensuite l’utiliser pour personnaliser l’apparence du nuage de tags selon vos propres besoins.
La première chose que vous devez faire est de copier et coller ce code dans le fichier functions.php de votre thème ou dans le plugin spécifique au site.
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' );
Ce code ajoute un shortcode qui affiche toutes vos balises avec leur nombre de publications à côté d’elles. 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 simplement les liens des balises et le nombre de publications à côté d’eux. Ajoutons du CSS pour le rendre plus beau. 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 à styliser facilement les balises dans WordPress. Vous pouvez également consulter notre guide sur la création de pages de destination personnalisées dans WordPress ou consulter cette liste de conseils, astuces et hacks WordPress pratiques.