Comment styliser facilement les identifiants dans WordPress (avec des exemples)

Souhaitez-vous donner un style aux identifiants dans WordPress afin de les mettre en valeur ?

Les identifiés vous aident à organiser votre contenu en sujets. Ils sont comme des hashtags pour vos publications de blog WordPress et aident les utilisateurs/utilisatrices à découvrir plus de contenu.

Dans cet article, nous allons vous afficher comment styliser facilement les identifiants dans WordPress afin d’obtenir plus d’engagement de la part des utilisateurs et plus de vues sur votre site.

Comment identifier les identifiants dans WordPress

WordPress propose deux taxonomies principales : les catégories et les identifiants. Alors que les catégories sont utilisées pour les principaux domaines de votre contenu, les identifiants vous permettent de trier le contenu dans des sujets plus spécifiques.

De nombreux thèmes WordPress populaires affichent par défaut des identifiants en haut ou en bas de vos publications.

Cependant, vous pouvez également afficher les identifiants sur les pages d’archives, dans le pied de page, dans les colonnes latérales et presque partout où vous le souhaitez dans WordPress.

Pour insérer un nuage de tags dans vos publications, pages et widgets de la colonne latérale, il vous suffit d’ajouter le bloc  » Nuage de tags « .

Un nuage de tags donne à chaque identifié une taille de police différente en fonction du nombre de publications. Vous pouvez également choisir d’afficher le nombre de publications à côté de chaque identifié.

Il ne s’agit là que des options par défaut disponibles dans WordPress, mais que se passerait-il si vous vouliez personnaliser encore plus vos identifiants ? Nous allons vous afficher comment.

Voyons comment styliser facilement les identifiants dans WordPress.

Identifier le nuage de tags par défaut dans WordPress

Après avoir ajouté le bloc Nuage de tags à une publication ou à une page, vous pouvez le personnaliser en ajoutant une feuille de style CSS.

Le bloc de nuages d’identifiants inclut automatiquement des classes CSS générées par défaut par WordPress qui peuvent être utilisées pour les styliser.

Pour ajouter des CSS personnalisés à votre site WordPress, il vous suffit de vous rendre sur la page Apparence  » Personnaliser et de passer à l’onglet CSS supplémentaires.

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 identifiants avec plus de publications sont plus haut dans la position et les identifiants avec moins de publications sont plus bas.

Si vous souhaitez que tous les identifiants de votre bloc de nuage de tags 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 ce que cela donne sur notre site d’essai :

Identifier les publications dans WordPress

En plus de styliser vos nuages de tags, vous voudrez peut-être aussi styliser les tags de publication qui s’affichent sur vos articles de blog individuels. En général, votre thème WordPress les affiche en haut ou en bas du titre ou du contenu de l’article.

Vous pouvez passer la souris sur les identifiants et cliquer avec le bouton droit de la souris pour utiliser l’outil Inspecter afin de voir les classes CSS utilisées par votre thème WordPress.

Ensuite, 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 ce que cela donne sur notre site d’essai.

Créer un nuage de tags personnalisé dans WordPress

Le bloc de nuage de tags par défaut est facile à utiliser, mais certains utilisateurs/utilisatrices 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 d’étiquettes. Vous pouvez ainsi personnaliser l’apparence du nuage de tags en fonction de vos propres prérequis.

La première chose à faire est de copier et de coller ce code dans le fichier functions.php de votre thème ou dans une extension 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 vous recommandons d’ajouter ce code avec WPCode, la meilleure extension d’extraits 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, de sorte que vous ne casserez pas votre site.

Pour Premiers pas, installez et activez l’extension gratuite WPCode. Si vous avez besoin d’aide, consultez notre tutoriel sur l ‘installation d’une extension WordPress.

Une fois l’extension activée, rendez-vous dans la rubrique Code Snippets  » Add Snippet du tableau de bord WordPress.

Ensuite, survolez l’option « Ajouter votre code personnalisé (nouvel extrait) » et cliquez sur le bouton « Utiliser l’extrait ».

À partir de là, vous pouvez ajouter un titre pour l’extrait en haut de la page. Il peut s’agir de n’importe quoi pour vous aider à vous souvenir de l’objet du code.

Ensuite, collez le code ci-dessus dans le champ « Prévisualisation du code » et sélectionnez « PHP Snippet » comme type de code dans le menu déroulant.

Ensuite, il suffit de permuter le commutateur de « Inactif » à « Actif » et de cliquer sur le bouton « Enregistrer l’extrait ».

Ce code ajoute un code court qui affiche tous vos identifiés avec leur nombre de publications à côté d’eux.

Pour l’afficher sur votre page d’archives ou dans un widget, vous devez utiliser ce code court:

[wpbtags]

L’utilisation de ce code seul ne fera qu’afficher les liens identifiés et le nombre de publications à côté d’eux. Ajoutons un peu de CSS pour améliorer l’affichage. Copiez et collez simplement ce CSS personnalisé sur votre site.

.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 ressemble sur notre site de démonstration :

Nous espérons que cet article vous a aidé à apprendre comment styliser facilement les identifiants dans WordPress. Vous pouvez également consulter notre guide sur la façon de créer des pages d’atterrissage personnalisées dans WordPress ou voir cette liste d’astuces , de trucs et de bidouilles WordPress très pratiques.

If you liked this article, then please subscribe to our YouTube Channel for WordPress video tutorials. You can also find us on Twitter and Facebook.