Bandeau

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.

Utilisé à ce jour dans 1511 sites
Nuage de Mots clés
Article mis en ligne le 16 janvier 2016
dernière modification le 18 février 2017

par Jean Christophe Villeneuve, Stéphane
Visites : 485 - Popularité :
3%
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-2018 © Escal V3 - Tous droits réservés
Site réalisé sous SPIP
avec le squelette ESCAL-V3
Version : 3.87.86
Version Escal-V4 disponible pour SPIP3.2