Un nuage de tag – tag cloud en anglais – affiche la liste des mots-clés ou étiquettes dans lequel la taille de chaque tag est déterminée par le nombre d’occurrences présentes dans les articles.
En natif, l’insertion d’un nuage de tag s’effectue via l’ajout d’un widget. Or, aucune option de personnalisation n’est proposée ; seul le nom du nuage est modifiable. Je vous propose donc de créer votre propre nuage de tags entièrement personnalisé et ce, sans passer par un plugin additionnel.
Description
A la différence des outils de navigations traditionnels (colonne latérale, barre de navigation, etc.), les tag clouds n’offrent pas nécessairement une navigation plus intuitive.
En effet, ils peuvent très vite devenir encombrés de mots-clés en tout genre ne reflétant guère les principaux sujets abordés sur le blog en question.
Cependant, utilisés à bon escient, les tag clouds s’avèrent très utiles pour donner une approche alternative et visuelle au contenu présent sur votre blog en mettant en avant les sujets les plus importants ce qui ne saurait être le cas avec les outils de navigations conventionnels.
Ainsi, un choix efficace des paramètres du nuage que sont, entre autres : la taille des tags, le nombre de tags affichés, le mode de tri, etc. joue un rôle capital dans l’efficacité même de celui-ci.
Mise en place du nuage de tags
Insertion du code
Le bout de code nécessaire pour générer un nuage de tags est le suivant :
Il suffit donc de l’insérer là où bon vous semble, par exemple dans la colonne latérale (sidebar).
Ajout d’un titre
Pour ajouter un titre à votre nuage, utilisez le morceau de code suivant :
Libre à vous ensuite de remplacer le niveau de titre par h3 au lieu de h2, par exemple ; ou encore d’appliquer une classe CSS particulière.
Ajout de paramètres
La liste des différents paramètres autorisés est la suivante :
smallest: taille en unité de la police à utiliser pour afficher les tags les moins courants ;largest: taille en unité de la police à utiliser pour afficher les tags les plus courants ;unit: unité de mesure de la police utilisée pour les paramètres smallest et largest. Utiliser pt pour le point ;number: le nombre de tags à afficher dans le nuage. Utiliser 0 pour tous les afficher ;format: format d’affichage du nuage. Les valeurs suivantes sont admises :- flat (par défaut) : les tags sont séparés par des espaces ;
- list : les tags sont dans une liste non-ordonnées ;
- array : les tags sont dans un tableau ;
orderby: clé de tri des tags. Les valeurs autorisées sont :- name (par défaut) : ordre alphabétique ;
- count : nombre d’occurrences ;
order: ordre de tri. Les valeurs valides sont :- ASC (par défaut) : ordre croissant ;
- DESC : ordre décroissant ;
exclude: liste de tags à exclure, séparés par des virgules (term_id). Par exemple, exclude=5,27 signifie que les tags qui ont les term_id 5 ou 27 ne seront PAS affichés. Par défaut, aucun tag n’est exclus ;include: liste de tags à inclure, séparés par des virgules (term_id). Par exemple, include=5,27 signifie que les tags qui ont les term_id 5 ou 27 seront les seuls à être affichés. Par défaut, tous les tags sont inclus ;
Pour ajouter l’un des paramètres ci-dessous dans votre nuage de tags, vous devez respecter la syntaxe suivante :
- Saisir le ou les paramètre(s) entre les apostrophes dans les parenthèses du bout de code ;
- Chaque paramètre doit correspondre à une valeur. De fait, inscrivez un = après chaque paramètre puis saisissez la valeur adéquate ;
- Pour ajouter un nouveau paramètre, tapez sur
&;
Voici un exemple de nuage limité en taille et trié par nombre d’occurrences plutôt que par nom :
On retrouve donc les paramètres smallest, largest, number et orderby suivis du signe égal puis des valeurs correspondantes : 8, 22, 30 et count.
De manière littérale, la police des tags les moins courants est établie à 8 pt, la police des tags les plus courants est établie à 22, le nombre de tags à afficher est de 30 et le tri s’effectue en fonction du nombre de fois que le tag a été utilisé.
Les valeurs 8 et 22 fournissent une fourchette pour la taille des différents tags. Il s’agit donc d’un minimum et d’un maximum.
Vous avez désormais toutes les clés nécessaires pour, à votre tour, créer votre propre nuage de tags personnalisé. Comme vous pouvez le constater ce ne sont pas les variantes qui manquent, faites preuve d’inventivité tout en respectant votre design général et faites-nous part de votre résultat !
Crédits photo : juandesant
Bonjour
Je souhaite créer un nuage de mots clés à partir d’un champ texte sur une page publique pour donner la possibilité à un groupe de personnes d’ajouter des mots clés et de générer le nuage automatiquement en validant la saisie de ce champ texte. Je ne trouve pas cette possibilité sous forme de plugin. Avez vous une idée pour réaliser ça ? Merci
Faisable mais compliqué et générateur de problématiques de sécurité / référencement. Je déconseille !
Bonjour Bonjour !
Tout d’abord merci Aurélien pour ce blog très instructif pour la bidouilleuse inexpérimentée que je suis (même si certains articles restent hors de ma portée).
J’ai créé un nuage de tag sur mon blog (www.juliebodin.fr) spécialisé en tout et rien (pour l’instant 😉 ) il y a quelques minutes grâce à ton code. Je le voulais dans le footer pour qu’il soit plus allongé que haut. Par contre, est-ce que quelqu’un aurait un truc pour qu’il soit centré ? Et éventuellement qu’il retrouve une belle couleur ? (que je puisse mettre la couleur que je veux quoi). Je suis débrouillarde, mais seulement quand on me dit quoi coller où 😉
J’utilise Cyberduck, et la dernière version de wordpress (thème : origin).
D’avance merci 🙂
Julie
Bonjour Julie,
il te faut modifier les styles via le code CSS. 😉
Bonjour Aurélien,
Pour faire suite, j’ai intégré le code de ce tuto non plus dans mon fichier tag.php mais dans sidebar.php puisque c’est dans la colonne latérale sur mon site que je veux voir le nuage de mots clés affiché.
Pour rappel, la liste de widgets dispo sur mon thème me permet à la base d’afficher des mots clés, comme aussi le calendrier, les derniers tweets, les articles récents, les liens vers réseaux sociaux, etc… Le problème c’est que mon widget de mots clés n’affiche qu’une simple liste de mots clés dans ma sidebar (pas grand intérêt). C’est plus cool avec des mots clés plus hauts, plus gras, plus petits les uns que les autres.
J’ai testé l’insertion du code un peu partout dans mon sidebar.php Il s’avère que le nuage de mots s’affiche uniquement lorsque je place le code directement après le . Nulle part ailleurs dans le fichier sidebar.php
Le problème, c’est qu’une fois sur le site, mon nuage s’affiche derrière tous les autres widgets déjà en place dans cette colonne latérale, et non pas à la suite de mon dernier widget qui est pour “les commentaires récents”. Cela fait donc un truc illisible puisque du texte est affiché sur d’autres textes.
Comment faire pour mon nuage s’affiche en dessous de mon dernier widget ? (faut-il désormais toucher le css ou autre fichier)? Car là je ne vois plus quoi faire.
ps: désolé du comm un peu long
Il faut effectivement par un widget dans ton cas. Si le formatage ne convient, à voir si cela ne vient pas du CSS ou essaies de voir avec un plugin. Mais en principe, tu dois obtenir un résultat similaire à la fonction PHP.
Salut quand je veut faire mon tag nuage je peux mettre que le titre mais pour apres inserert les mots clefs je peux pas est que tu pourras m aider stp ? 🙂
Si le code te pose souci, passes par l’ajout d’un widget dans Apparence > Widgets et choisis le nuage de tags. 😉
En fait, j’utilise le widget intégré au thème qui me permet d’afficher mes tags. Du coup, ça affiche mes tags dans une colonne à droite dans mon site. Et ce que je fais, c’est que je modifie dans l’éditeur mon tag.php (mais est-ce que ce fichier tag.php me permet en fait de modifier l’apparence de mon widget ? car j’ai bien suivi le tuto et remplacé par ton code mais rien ne se passe)
Le fichier tag.php modifie uniquement l’affichage des pages d’archives générées par chaque mot-clé.
Bonjour,
j’ai crée un “custom post type” avec l’extension “Custom Post Type UI”, J’ai crée un nouveau type de post appelé “vidéos” les mots clés peuvent y être ajoutés, mais il n’apparaissent pas avec la fonction wp_tag_cloud() seuls ceux des articles apparaissent.
Comment faire ?
Si vous avez créé un taxonomie personnalisée, alors il faut configurer le nuage de tags pour prendre en compte cet aspect. Sinon, s’il s’agit bien des mots-clés (les mêmes que pour les articles) ça doit fonctionner.
Bonjour Aurélien.
J’ai lu avec attention ton article sur les nuages de mots clefs. J’utilise actuellement le thème Max Magazine en local avec Wamp. Dans l’éditeur wordpress, j’ai un fichier tag.php dans lequel je peux éditer mon nuage. J’aimerais avoir un nuage de mots comme tu peux le présenter dans l’article en choisissant des options. Mais je ne suis pas du tout à l’aise dans le codage et je voudrais juste savoir (au travers le code ci-dessous) s’il est possible que vous m’indiquiez où je peux intégrer: (‘smallest=8&largest=22&number=30&orderby=count’);
Voici le code:
<?php printf( __( 'Tag Archives: %s', 'max-magazine' ), '’ . single_tag_title( ”, false ) . ” ); ?>
<?php
$tag_description = tag_description();
if ( ! empty( $tag_description ) )
echo apply_filters( 'tag_archive_meta', '’ . $tag_description . ” );
?>
Je comprendrais s’il ne vous est pas possible de me répondre. Dans tous les cas merci.
Bonjour,
il te faut suivre le tutoriel et tu devrais obtenir le même résultat. Ajoute la fonction PHP dans ton code avant ou après celui que tu m’indiques et supprimes les lignes inutiles le cas échéant.
@Augmentation des ***** : merci beaucoup de tes compliments ! 😎
@Alpha : danke viele ! 🙂
Oh gut zu wissen, werde das Tool Auto-Tagger mal ausprobieren.
Vielen Dank dafür
und schöner Artikel 😉
mfg
Alpha
Señores Maigret et Yves merci ! Voila deux heures que je suis sur ce blog et je ne m’en sors pas ! je trouve ici toutes les réponses au questions que je me suis toujours posées, c’est parfait, pour ceux qui galère il y a ici la solution. Le s réflexions sont très bonnes et constructive. Je suis vraiment conquise ! Je suis en pleine création d’un site et j’avoue avoir besoin de petits conseils… je reviens vite chercher l’info et partager ici !
A bientôt
Hé hé hé, pour ceux qui auraient des soucis avec le couple Simple Tag / WordPress 2.6.1, je vous conseille Auto Tagger qui s’avère une excellente aletrnative 🙂
Ré@gissons, [email protected]…
Bannière insérée avec succès et désolé que ça n’est pas réglé ton problème 🙁
@ Maigret, merci pour l’astuce du .htaccess mais le résultat est le même (de mémoire 1&1 est passé en php5 depuis ce post sur le forum de WordPress, sinon je t’ai envoyé la demande d’échange de liens par mail comme demandé 😉
Ré @gissons, [email protected]…
@Wolforg : je ne sais pas si tu as le problème des erreurs 500 sur 1&1 à cause de Simple Tags, mais il y a une solution au commentaire 14 sur le forum : http://www.wordpress-fr.net/support/sujet-14825-1and1-satisfait
Pour l’échange de lien, le mieux serait que tu m’envoie un mail directement par la page Contact pour définir les termes de l’échange (emplacement, bannière, etc.). 😉
@ Maigret : Pour la demande support, j’ai bien évidemment commencé par là en suivant lumière de lune, mais le souci a l’air tellement rare et les vacances aidant, rien de bien nouveau sous le soleil. J’ai moi aussi vu la maj auto prevue pour wp 2.7 et j’attends de voir. En attedant je tourne “à la mano”, ça me dérange pas plus que ça en fait 😉
P.S : Congratulations pour ton 100ème billet, je pensais moi aussi que ton blog était plus ancien que ça, bon boulot :o)
P.S (bis) : Je me tate pour un échange de liens mais plus sur http://portail.wolforg.eu que sur le site vitrine http://www.wolforg.eu, qu’en penses tu?
@Wolforg : peut-être que tu peux espérer une mise à jour automatique pour WordPress 2.7 – un plugin le fait actuellement d’après ce que j’ai lu sur le blog officiel aujourd’hui même.
Je pense que le mieux c’est que tu postes sur le forum de WordPress francophone pour que la communauté t’aides dans ton problème… mais bon si tu l’as remplacée par un tag cloud personnalisé tant pis.
@Maigret, moui, vive les maj perpetuelles, mais bon…
Quand t’essaies de tenir une SSLL orientée CMS sérieusement (cad en faisant les maj en temps et en heure) et que tu gères des sites sous worpdress, spip, joomla and co ça use un peu le bout des doigts 😉
Sinon j’ai upgradé en 2.6.1 et le souci avec simple tags est tjs là (erreur 500 dès que tu passes en partie privée), j’ai réglé le souci avec un tag-cloud fait main mais j’aimais bien la gestion des tags en automatique de simple tag quand meme….
Mais c’est ça qui fait que WordPress est génial : les mises à jour quasi-continuelles 😀
@Maigret : Quoi 2.6.1? Elle est sortie quand celle-là? Ils dorment jamais chez WordPress ou quoi?
Bon ben je suis “tricard” pour upgrader quoi…
Marci à toi 😉
@Wolforg : je viens d’installer un test blog en WordPress 2.6.1 et Simple Tags fonctionne sans problèmes. Par contre, aucun autre plugin n’était activé lors du test.
@Wolforg : je n’utilise plus Simple Tags depuis que j’ai découvert la possibilité de créer un nuage personnalisé. Mais je vais vérifier cela dès que je peux sur un blog test et je te tiens au courant 😉
P.S : j’aime bien ta devise 😎
Le nuage de mot-clés possède aussi une autre fonction que la navigation thématique et cette fonction est loin d’être négligeable.
Il permet à un visiteur d’avoir une idée du premier coup d’oeil de la thématique générale d’un site, blog ou portail/ En effet les thématiques les plus récurentes y sont plus visibles et donc la “ligne éditoriale” y apparait aussi claire que de l’eau de roche 🙂
@Maigret, merci pour ton commentaire sur le forum WordPress.fr et peut-être va tu pouvoir répondre à une question qui me turlupine (non, c’est pas un gros mot :-p ) depuis mon passage à wp2.6 :
“Simple Tags est il compatible avec wp2.6,ou pas?”
J’ai eu pas mal de soucis avec et comme le sujet de ce billet est le tag cloud, je suis pas à 100% à côté de la plaque, non? 🙂
Ré@gissons; [email protected]…
@Olivier : je suis d’accord avec toi une telle fonction n’est guère très utilisé pour la navigation mais appréciée des robots d’où l’idée de placer mon tag cloud en bas de page.
Moi je suis pas fan du tout des tags cloud. J’ai fini par intégrer les tags sur mon blog le mois dernier mais c’est très très peu utilisé pour la navigation…
Ouep plus d’excuses pour PERSONNE 🙂
Je teste…
[edit] Ben voilà, c’est génial!!! Plus d’excuses si je fais des fautes maintenant…
MERCI
Vœu exaucé, il est désormais possible d’éditer son commentaire pendant 5 minutes. Plus de souci ni de stress inutile désormais 😉
L’édition des commentaires serait une bonne chose..
Surtout que je tape vite pour pas laisser filer les idées, que je valide le commentaire (des fois que je ne puisse pas 1mn après) et que je relis qu’après validation. Du coup, je vois des tonnes de fautes d’orthographe et je me dis que je suis un grand naze! (rire)
@Yves : Je suis sur la même longueur d’onde que toi. Beaucoup de sites proposent de créer des tag clouds super animés pour en fin de compte, un nuage, certes joli – quoique, souvent lourd à charger faisant fuir les visiteurs.
J’utilisais également Simple Tag dans l’ancienne version du blog. C’est quand j’ai recréé le design et que je souhaitais réduire au maximum le nombre de plugins, que j’ai découvert que WordPress proposait pas mal de paramètres de personnalisations en natif. C’est par la suite que j’ai eu l’idée de partager cette “découverte” – si on peut appeler comme ça, constatant que pas mal de blogueurs utilisés un plugin.
Côté référencement, j’indexe même les pages de tags ce qui me permet de glaner quelques visiteurs supplémentaires mais surtout d’améliorer mon positionnement dans Google.
P.S : il faudrait peut-être que je permette aux lecteurs d’éditer leurs commentaires durant un laps de temps, surtout quand ceux-ci sont constructifs… 😉
J’ai validé trop vite et prématurément le commentaire précédent par errueur, je reprends donc la suite ici…
Je disais donc que maintenant, le tag cloud est important dans la home page et que je pense que son intérêt essentiel réside dans un meilleur référencement.
J’ai fais l’essai sur me 2 blogs, un avec tag, l’autre sans. Celui sans tag remontait bien moin dans les moteurs, et même si les tests sont forcément empiriques, Je reste persuadé que le nuage de mots clés est plus qu’important pour le référencement.
J’ajouterai aussi que ce que je dis pour les nuages de tags par rapport au référencement est exact que si on n’utilise pas des nuages de tags “exotique”, réalisés par exemple en flash qui sont très beau esthétiquement mais on en restera là quand à leur intérêt!
J’utilise le plugin “simple tag” d’Amaury Balmer. Ton article m’a permis de voir qu’on pouvait pas mal personnaliser “le tag cloud” standard. Je m’y étais jamais attardé. Merci pour ça!
Le nuage de tags n’est pas qu’une autre façon (visuel) de naviguer.
Je dirais même que, sa fonction essentielle n’est pas, la navigation.
C’est paradoxale puisqu’au départ, le tag clouds servait à voir très rapidement les mots clés (et donc avoir une idée des sujets traités) et servait donc à accéèder rapidement à l’information, via un mode de navigation disons esthétique”.
Maintenant, le tag Cloud est très important dans l
Je suis d’accord avec toi, si un élément est trop long à charger, 2 solutions : soit on l’enlève, soit on fait en sorte d’optimiser son temps de chargement. Les visiteurs n’aiment pas patienter sur un page Web.
Un autre atout du tag cloud – que j’ai oublié d’évoquer ici, concerne les moteurs de recherche qui aiment bien les utiliser.
L’intérêt du TagCloud est, c’est vrai, essentiellement visuel : peu de visiteurs s’en servent comme outil de navigation. J’en ai eu un, j’aime bien, mais il était long à charger, je l’ai donc enlever.