Nuage de tags: ce truc dans la barre latérale que beaucoup installent puis oublient. Mécaniquement, «juste pour l’avoir». C’est une erreur: un nuage bien conçu collecte les clics de navigation interne aussi efficacement qu’un menu de navigation. Surtout sur les sites qui comptent des centaines d’articles, là où la navigation par catégories ne suffit plus.

Le problème, c’est que le widget standard «Nuage de tags» est à peine configurable. La taille de police, tout au plus. Les couleurs, aucune. La forme, une liste plate de liens qu’on a presque honte d’afficher. Si le thème n’a pas prévu de styles pour lui, le résultat est déprimant.

Heureusement, WordPress propose deux voies: appeler manuellement wp_tag_cloud() directement dans les fichiers du thème et utiliser le bloc natif «Nuage de tags» dans Gutenberg. La première donne un contrôle total sur le balisage, la seconde fonctionne quand vous avez besoin de quelque chose de rapide et sans code. Nous allons détailler les deux ci-dessous, avec des extraits de code prêts à l’emploi, des captures d’écran et une vidéo.

💡 Aperçu rapide:

• Insérez wp_tag_cloud() dans sidebar.php ou footer.php pour obtenir un nuage de tags n’importe où
• Stylisez le rendu via CSS: boutons avec fonds, coins arrondis et effets au survol
• Utilisez le bloc «Nuage de tags» dans l’éditeur Gutenberg (trois clics, zéro code)
• Regardez le tutoriel vidéo de mise en place directement depuis l’administration de WordPress

Sortie manuelle via wp_tag_cloud()

WordPress intègre la fonction wp_tag_cloud() depuis la version 2.3. Elle collecte tous les tags du site, compte leur fréquence d’utilisation et génère un nuage où la taille de police de chaque tag est proportionnelle au nombre d’articles qui le contiennent. L’appel s’insère directement dans un fichier du thème, là où le nuage doit apparaître.

Extrait de base pour sidebar.php, footer.php ou un template personnalisé:

1
<?php
2
wp_tag_cloud( array(
3
    'smallest' => 8,
4
    'largest'  => 22,
5
    'unit'     => 'pt',
6
    'number'   => 45,
7
    'orderby'  => 'name',
8
    'order'    => 'ASC',
9
    'taxonomy' => 'post_tag',
10
    'format'   => 'flat',
11
) );

Signification des paramètres (liste complète dans la documentation WordPress):

smallest et largest: taille de police minimale et maximale. Par défaut, 8 et 22 points. Si l’écart paraît trop brutal, réduisez-le (par exemple, 10 et 18).

unit: unité de mesure. Par défaut pt, mais accepte n’importe quelle unité CSS: px, em et rem. Pour les écrans, les pixels sont plus courants.

number: combien de tags afficher. Zéro signifie «tous». En pratique, 45 à 50 suffisent largement; au-delà, le nuage se transforme en un fouillis de centaines de liens de tailles différentes.

orderby: méthode de tri. name donne l’ordre alphabétique, count affiche les plus fréquents en premier. Combiner orderby => 'count' avec order => 'DESC' place les tags populaires en tête.

taxonomy: la taxonomie. Par défaut post_tag, mais vous pouvez indiquer category ou une taxonomie personnalisée issue d’une boutique en ligne pour obtenir un nuage de catégories ou de tags produits.

format: format de sortie. flat (liens séparés par des espaces), list (liste à puces) ou array (tableau pour un traitement PHP ultérieur).

La fonction peut être placée en toute sécurité n’importe où dans le thème. Si vous avez besoin d’un modèle de page distinct avec le nuage, créez page-tagcloud.php, ajoutez l’appel wp_tag_cloud() entre get_header() et get_footer(), puis attribuez ce modèle à une page dans l’administration.

Styliser les tags via CSS

La fonction produit du HTML brut: des tags à l’intérieur d’éléments <a>, enveloppés dans <div class="tagcloud">. Sans CSS, c’est un amas de liens de tailles différentes. Les styles ci-dessous les transforment en boutons soignés:

1
.tagcloud a {
2
    display: inline-block;
3
    padding: 4px 10px;
4
    margin-right: 7px;
5
    margin-bottom: 7px;
6
    background: #f0f0f0;
7
    color: #555;
8
    font-size: 11px;
9
    font-weight: bold;
10
    text-transform: lowercase;
11
    border-radius: 5px;
12
    border: 1px solid #ccc;
13
    text-decoration: none;
14
}
15
.tagcloud a:hover {
16
    background: #e0e0e0;
17
    color: #000;
18
    text-decoration: none;
19
}

Le CSS est minimal et ciblé: inline-block maintient les boutons en ligne, margin-bottom compense les retours à la ligne, et border-radius arrondit les coins. Le fond gris et le texte sobre ne jurent avec aucune palette de marque. Au survol, le bouton s’assombrit doucement.

Ajoutez ce code au style.css de votre thème enfant ou dans le champ «CSS additionnel» de l’outil de personnalisation («Apparence» → «Personnaliser» → «CSS additionnel»). La seconde option est plus sûre: les styles ne disparaîtront pas à la prochaine mise à jour du thème.

Astuce: si le nuage dans la barre latérale et dans un template personnalisé doivent avoir un aspect différent, enveloppez l’appel dans une <div class="custom-tagcloud"> supplémentaire et définissez les styles avec une spécificité double: .custom-tagcloud .tagcloud a { ... }.

Bloc natif «Nuage de tags» dans Gutenberg

Quand vous n’avez pas envie de modifier les fichiers du thème, WordPress propose une solution intégrée. Depuis la version 5.8, l’éditeur de blocs inclut un bloc «Nuage de tags» qui peut être inséré dans n’importe quel article ou page sans une seule ligne de code.

L’ajout est standard: dans l’éditeur, cliquez sur «+», cherchez «Nuage de tags» et faites-le glisser à l’endroit souhaité. Le bloc récupère automatiquement tous les tags du site, les trie par ordre alphabétique et adapte la taille de police proportionnellement à la fréquence d’utilisation. Le panneau latéral propose ces réglages:

• nombre de tags (par défaut 45, maximum 100)
• activation d’un compteur d’articles à côté de chaque tag
• basculement entre tags et catégories via la liste déroulante de taxonomie

Le bloc fonctionne dans n’importe quel thème moderne, prend en charge les groupes et les colonnes, et se style avec les mêmes règles CSS que dans la première section. C’est la manière la plus simple d’obtenir un nuage de tags sur une page: ouvrez l’éditeur, ajoutez le bloc, publiez. Aucun plugin, aucun functions.php.

📺 Vidéo: configurer un nuage de tags dans WordPress

Un court tutoriel pour ajouter et configurer un nuage de tags directement depuis l’administration de WordPress:

⁉️🤔 Foire aux questions

Puis-je afficher un nuage de tags sans modifier les fichiers PHP?

Oui, de plusieurs façons. La plus simple est le bloc natif «Nuage de tags» dans l’éditeur Gutenberg: ajoutez-le en trois clics via «+», sans plugin ni functions.php. Une autre option est le widget standard «Nuage de tags» dans «Apparence» → «Widgets», qui fonctionne dans tout thème disposant d’une barre latérale ou d’une zone de pied de page. Les deux méthodes utilisent la même fonction wp_tag_cloud() en arrière-plan.

Où dois-je placer l’appel wp_tag_cloud(): dans functions.php ou dans un fichier de template?

Directement dans un fichier de template: sidebar.php, footer.php, page-tagcloud.php ou tout autre fichier responsable du balisage. La fonction wp_tag_cloud() ne s’appelle pas dans functions.php, qui est l’endroit où l’on définit la logique; la sortie se fait dans les templates. Si vous devez personnaliser le comportement de la fonction, utilisez le filtre wp_tag_cloud dans functions.php.

Quelle est la différence entre les tags et les catégories dans un nuage?

Les catégories sont une taxonomie hiérarchique, les tags sont plats. Visuellement, la différence disparaît, mais techniquement l’appel diffère: pour les tags, utilisez taxonomy => 'post_tag', pour les catégories, utilisez taxonomy => 'category'. La fonction reste la même: wp_tag_cloud(), il suffit de passer la clé appropriée.

Comment limiter le nombre de tags affichés?

Avec le paramètre number dans le tableau de wp_tag_cloud(). Une valeur de 0 affiche tous les tags; pour la plupart des sites, 30 à 50 est raisonnable (le nuage reste lisible et ne se transforme pas en un flot interminable de liens).

Puis-je ajouter un compteur d’articles à côté de chaque tag?

Oui, le paramètre show_count => 1 (disponible depuis WordPress 4.8) affiche le nombre d’articles entre parenthèses après le nom du tag. Par exemple: «wordpress (42)». Dans le bloc Gutenberg, cette option s’active via un interrupteur dans le panneau latéral.

Que faire si le widget standard est trop ennuyeux?

Vous avez deux options pour gagner en contrôle. Premièrement, appelez manuellement wp_tag_cloud() avec des paramètres personnalisés et votre propre style CSS, comme dans la section 1. Deuxièmement, utilisez le bloc Gutenberg avec les mêmes règles CSS si vous ne voulez pas toucher aux fichiers du thème. Les deux approches offrent une liberté totale: couleurs, espacements, coins arrondis, effets au survol (tout est entre vos mains).

Méthode manuelle ou bloc: que choisir selon votre besoin?

Si votre site prend de l’ampleur et que le nombre de tags a dépassé les trois douzaines, un nuage personnalisé est vite rentabilisé. Il maintient l’engagement des visiteurs: quelqu’un clique sur un tag, arrive sur une collection d’articles organisée autour de ce sujet, et lit un ou deux articles de plus. La profondeur de page augmente sans coût supplémentaire.

L’approche est simple. Si vous avez besoin d’un nuage tout de suite sans vous embêter avec du code, ouvrez l’éditeur, insérez le bloc «Nuage de tags» et publiez. Trois clics, et le résultat ne dépend pas du thème. Quand vous voulez peaufiner chaque détail et obtenir un contrôle total sur le balisage, copiez l’extrait PHP de la première section, stylisez-le via CSS, et le nuage devient un élément du design plutôt qu’un simple espace réservé standard. Les deux approches fonctionnent dans n’importe quel thème moderne et n’entrent pas en conflit l’une avec l’autre.

Si cet article vous a aidé à y voir plus clair, mettez-le dans vos favoris. Et dites-nous en commentaires comment vous affichez le nuage de tags sur votre site: widget, bloc ou appel manuel?