Comment personnaliser l’affichage des tags (étiquettes) sur WordPress

Sur WordPress, on peut attribuer des étiquettes (« tags ») à ses articles pour proposer aux lecteurs un classement encore plus fin des articles. J’ai déjà expliqué comment utiliser ces étiquettes… mais aujourd’hui, je vais vous montrer comment faire pour personnaliser l’affichage des tags WordPress.

En effet, on peut mettre en valeur ses étiquettes autrement que par un simple lien.

Notez que dans cet article, nous allons modifier le thème de votre blog. Il est préférable d’effectuer toute modification du thème non sur ce que l’on appelle un thème enfant : ainsi, si vous mettez à jour votre thème principal (le thème « parent »), les personnalisations effectuées sur le thème enfant seront tout de même conservées.

Modifier le code des tags pour prendre le contrôle de l’affichage

Ça fait un peu super-héros, cette histoire… mais c’est bel et bien ce qu’on va faire ! Pour afficher les tags sur les articles de votre blog, vous utilisez en principe un code qui ressemble à ça dans le fichier single.php de votre thème WordPress :
<?php the_tags('Thèmes : ', '&nbsp;', ''); ?>

Le vôtre est peut-être encore plus simple ou un peu plus élaboré… mais c’est lui que nous allons modifier.

Parfois, votre thème est plus complexe et ne comporte pas de fichier single.php. Une recherche dans les fichiers du thème avec le mot-clé « the_tags » peut vous aider à retrouver le fichier qui contrôle l’affichage des tags.

Pourquoi modifier le code ?

En l’état, le code que je vous ai montré affiche bien les tags associés à l’article mais nous n’avons aucun contrôle sur leur affichage. Le texte est-il gros ou petit ? En gras ou pas ? Impossible de le définir ! Pour pouvoir agir sur tous ces paramètres, nous allons dans un premier temps modifier le code et y ajouter une classe CSS.

Une classe CSS permet de fixer des règles de mise en forme qui s’appliquent à tous les éléments contenus à l’intérieur de la classe. C’est un peu comme la maîtresse d’école qui définit les règles qui s’appliquent à ses élèves ;)

Voici un exemple :
<div class="merveilleux">Mary Poppins</div>

J’ai créé la classe « merveilleux » qui va nous permettre de contrôler l’affichage de l’élève « Mary Poppins ». Je n’entre pas ici dans les détails de ce qu’est une classe, comment ça marche. Je veux juste que vous compreniez le principe !

Pour que ma classe « merveilleux » fonctionne, il faut :

• Qu’elle apparaisse dans le code de la page (c’est du langage HTML) ;
• Qu’on lui donne des caractéristiques (ça, c’est du langage CSS). Par exemple, on dira en CSS que « Mary Poppins » doit s’afficher en rose et en majuscules.

Comment modifier le code des tags ?

Nous commençons par modifier ce qui concerne le langage HTML. Nous sommes toujours dans le fichier single.php. Je vais créer une classe « mestags » autour de… mes tags (je suis une fille logique dans la vie). Le code va maintenant ressembler à ça :

<?php the_tags('<div class="mestags">Thèmes : ', '&nbsp;', '</div>'); ?>

Pour vérifier que tout marche bien, allez sur l’un de vos articles de blog comportant des tags et regardez le code de la page (en faisant Ctrl + U sur PC, ⌘-Option-U sur Mac). En principe, la zone des tags est maintenant encadrée par ces balises <div class="mestags"></div>, comme ceci :

Nous allons passer à la personnalisation proprement dite, qui utilise le langage CSS.

Personnaliser les tags en CSS

Nous allons maintenant donner à notre classe « mestags » ses caractéristiques. Je vous donne d’abord un exemple de code à insérer dans le fichier style.css du thème WordPress, je vous explique ensuite comment il fonctionne !

/* AFFICHAGE DES TAGS */

.mestags {
font-size:0.8em; 
text-transform: uppercase;
margin:10px;
}

.mestags a { 
background: #0052A4;
color: #FFFFFF;
padding: 5px; 
}

.mestags a:hover {
background: #99CCFF;
}

Règles générales pour écrire le CSS

Il faut d’abord bien comprendre qu’un tag s’affiche sous forme de lien (puisque vos lecteurs peuvent cliquer dessus pour accéder à d’autres articles comportant le même tag). Un lien, en HTML, se fait à l’aide d’une balise « a ». Une liste de tags avec le tag « WordPress » et le tag « Blogging » se présentera donc comme ça :

<div class="mestags">
<a href="https://adressedelapagedutagwordpress">WordPress</a>
<a href="https://adressedelapagedutagblogging">Blogging</a>
</div>

Vous remarquez ensuite que le code CSS se présente toujours un peu pareil :

• Un intitulé : .mestags quand on parle de toute la zone des tags sur la page, .mestags a quand on parle des liens contenus dans la zone des tags (vous savez maintenant pourquoi il y a ce « a », c’est parce que c’est un lien), .mestags a:hover quand on parle du survol de chaque tag (car « hover » signifie planer en anglais => c’est ce qui se passe quand la souris plane au-dessus du lien !).
• Des accolades : toutes les caractéristiques d’affichage sont placées entre des accolades.

A l’intérieur de chaque accolade, on a toujours une présentation similaire, avec :

• Le nom de la caractéristique : la marge (margin), le fond (background), la couleur du texte (color), la taille de la police (font-size), etc.
• Deux points.
• La valeur de la caractéristique : quelle taille fait la marge ? De quelle couleur est le fond ou le texte ?
• Un point-virgule.

Exemple : le code des liens

Maintenant que vous savez tout ça, essayons de comprendre ce que j’ai fait avec le code des liens (qui contrôlera donc l’affichage de chaque tag). Le voici :

.mestags a { 
background: #0052A4;
color: #FFFFFF;
padding: 5px; 
}

Vous constatez d’abord que je lui ai donné une couleur de fond bleu foncé (#0052A4). La couleur doit être exprimée en notation hexadécimale. Vous pouvez utiliser un nuancier hexadécimal pour trouver la bonne couleur : passez la souris sur la couleur de vos rêves, il vous donnera sa valeur en hexadécimal. Vous remarquez que j’ai procédé de la même manière pour la couleur du texte, que j’ai choisie blanche (#FFFFFF).

J’ai ensuite défini un espace de 5 pixels autour du nom du tag (le « padding »), histoire que la couleur de fond déborde un peu de chaque côté. Voilà ce que ça donne (en haut) et voilà ce que ça aurait donné sans ce padding (en bas) :

A vous de jouer !

J’espère qu’à travers cette explication, vous comprendrez un peu mieux comment on peut agir sur l’affichage des tags WordPress en utilisant les classes CSS. Vous pouvez maintenant vous amuser à changer les couleurs, réduire ou augmenter la taille du texte et pourquoi pas ajouter des bordures, des ombres et autres originalités en fonction de votre niveau !

J’affiche pour ma part une petite icône d’étiquette à côté du nom de l’étiquette WordPress. Je le fais grâce à la police d’icônes FontAwesome qui permet de bénéficier d’une foule d’icônes à utiliser sur son blog !