Bandeau
Escal V3
Site de démonstration

Site de démonstration du jeu de squelettes ESCAL fonctionnant sous SPIP3 et mis à la disposition des Etablissements SColaires de l’Académie de Lyon.

Nuage de Mots clés
Article mis en ligne le 16 janvier 2016
dernière modification le 18 février 2017

par Stéphane, Jean Christophe Villeneuve
logo imprimer
Enregistrer au format PDF

Vous voudriez afficher un nuage de mots-clés mais sans installer et mettre en œuvre un plugin comme

et encore moins utiliser un service en ligne sur le Web pour créer des Nuages de mots-clés ? voici une solution :-))


Objectif  : afficher les mots-clés (sauf ceux nécessaires au fonctionnement d’Escal) en faisant varier la taille de la police en fonction de leur fréquence d’utilisation.

 Le principe

  • on crée un modèle dans lequel on écrira les mots-clés du site que l’on ira rechercher dans une boucle MOTS.
  • on exclut les groupes créés et/ou utilisés par Escal (affichage, trombino, type_rubrique, Agenda_couleur)
  • on affiche les mots-clés en faisant varier les couleurs (5 couleurs ici)

 Le code

Il va falloir créer 3 fichiers (ou les compléter s’il existent déjà) :

 tag.html

C’est le modèle qui sera appelé dans votre noisette. Ce fichier tag.html est à créer dans le dossier /squelettes/modeles

  1. <div id="tag_cloud">
  2. #SET{#maxMot, 0}
  3. <BOUCLE_max(MOTS){tout}>
  4. <BOUCLE_max_art(ARTICLES){id_mot}>
  5. </BOUCLE_max_art>
  6. #SET{#maxMot, #_max_art:TOTAL_BOUCLE|max_mot{#GET{#maxMot}}}
  7. </B_max_art>
  8. </BOUCLE_max>
  9.  
  10. <B_mots>
  11. <BOUCLE_mots(MOTS){par hasard}{type !IN affichage, trombino, type_rubrique, Agenda_couleur}{0, 40}>
  12. <BOUCLE_mots_art(ARTICLES) {id_mot}> </BOUCLE_mots_art>
  13. [<a
  14. href="#URL_MOT"
  15. style="font-size: [(#_mots_art:TOTAL_BOUCLE|coef{#GET{#maxMot},2,0.8})]em"
  16. class="tag tag_color_(#_mots:COMPTEUR_BOUCLE|alterner{'1','2','3','4','5'})"
  17. title='#_mots_art:TOTAL_BOUCLE article(s)'>
  18. #TITRE
  19. </a>]
  20. </B_mots_art>
  21. </BOUCLE_mots>
  22. </BOUCLE_aff>
  23. </B_mots>
  24. </div>

Télécharger

NB1 : on peut changer la limite du nombre de mots-clés en modifiant la valeur dans le critère {0, 40} de la BOUCLE_mots

NB2 : on peut cibler un ou plusieurs groupe de mots précis en remplaçant

{type !IN affichage, trombino, type_rubrique, Agenda_couleur}

par
{type IN groupe_un, groupe_deux, groupe_trois}

groupe_un, groupe_deux, groupe_trois étant bien sur à remplacer par les noms de vos groupes.

 mes_fonctions.php

Fichier à créer à la racine de votre dossier/squelettes si pas encore existant pour les deux fonctions coeff() et max_mot()

  1. <?php
  2. // Nuage de tags
  3. function coef($texte, $max, $nbrMax= 2, $minFont= 0.8) {
  4. return ($texte/$max*$nbrMax + $minFont);
  5. }
  6.  
  7. function max_mot($texte, $max) {
  8. return max($texte, $max);
  9. }
  10. ?>

Télécharger

 perso.css

Code à rajouter dans votre fichier /squelettes/styles/perso.css (fichier à créer si pas encore existant) pour gérer l’aspect et les couleurs de votre nuage de mot clés (à modifier selon vos goûts).

  1. /**************************************************/
  2. /* definition des couleurs pour le nuage de mots */
  3. /**************************************************/
  4. #tag_cloud {
  5. line-height: 0.7;
  6. text-align: center;
  7. margin: 10px 5px;
  8. }
  9. .tag {
  10. display: inline-block;
  11. vertical-align: middle;
  12. }
  13. .tag_color_1, .tag_color_2, .tag_color_3, .tag_color_4, .tag_color_5{
  14. width:100%;
  15. overflow-wrap: break-word;
  16. }
  17. .tag_color_1 {
  18. color: #0066ff !important;
  19. }
  20. .tag_color_2 {
  21. color: #642725 !important;
  22. }
  23. .tag_color_3 {
  24. color: #4E6D68 !important;
  25. }
  26. .tag_color_4 {
  27. color: #B79E47 !important;
  28. }
  29. .tag_color_5 {
  30. color: #D3491B !important;
  31. }

Télécharger

Vous devez donc avoir 3 fichiers dans votre dossier /squelettes

  • /squelettes/mes_fonctions.php
  • /squelettes/modeles/tag.html
  • /squelettes/styles/perco.css

 La mise en œuvre

il suffit de mettre <tag|> dans une de vos noisettes ou article pour afficher votre nuage de mot clés

Et voici le résultat, ici avec {type IN Thèmes, Onglet de paramétrage}


Forum
Répondre à cet article
Nuage de Mots clés
Laurence - le 18 février 2017

Bonjour ,
merci pour cette astuce, c’est très pratique et les instructions sont très claires. Je viens de l’installer sur mon site https://www.droit-immo.com/
2 petites questions : est-ce qu’on peut augmenter la taille des interlignes ? J’ai un mot qui dépasse du cadre : y a-t-il une solution ?
Merci d’avance !

Nuage de Mots clés
Jean Christophe Villeneuve - le 18 février 2017

Bonjour

Oui, tu peux régler le line-height de #tag-cloud dans le fichier perso.css

Et je ne vois rien qui dépasse sur ton site.

Nuage de Mots clés
Laurence - le 18 février 2017

Bonjour,

merci beaucoup pour ta réponse. J’ai modifié line-height ! le mot qui dépasse est "copropriétaires" . Il ne dépassait plus car j’avais ajouté un espace entre "coproprié" et "taires" mais cette solution n’est pas terrible pour le référencement... Est-ce que tu vois un autre moyen ?

Nuage de Mots clés
Jean Christophe Villeneuve - le 18 février 2017

Ok j’ai vu.

Il faut rajouter

  1. width:100%;
  2. overflow-wrap: break-word;

Télécharger

pour chaque tag_color

Je l’ai rajouté dans l’article.

Nuage de Mots clés
Laurence - le 18 février 2017

Merci, je viens de le faire, ça fonctionne nickel !

Nuage de Mots clés
stephane - le 5 septembre 2016

Bon depuis le temps que je dois l’installer ....

visible ici

Nuage de Mots clés
Christian voillemont - le 27 janvier 2016

Merci,
Tres belle astuce. Je vais l’utiliser.
Pourquoi ne pas l’inclure dans les noisettes par defaut d’escal ? c’est un plus certain.

Nuage de Mots clés
Jean Christophe Villeneuve - le 27 janvier 2016

Parce que

  • cela nécessite au préalable de créer les groupes de mots-clés que l’on peut cibler ensuite et le titre du groupe ne peut être connu à l’avance
  • ça permet de rentrer un peu dans le code html/Spip et css sans trop de difficultés, ça a donc un côté pédagogique
  • je pense que trop peu d’utilisateurs seront intéressés par cette fonctionnalité un peu gadget

Mais si j’ai beaucoup de retours en ce sens, je l’intègrerai.

Merci en tout cas à Stéphane qui a proposé cette fonctionnalité que je n’ai eu qu’à corriger sur des broutilles.



Plan du site Contact Mentions légales Espace rédacteurs squelette

RSS Valid XHTML 1.0 Strict

2009-2017 © Escal V3 - Tous droits réservés
Site réalisé sous SPIP
avec le squelette ESCAL-V3
Version : 3.87.27