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... et de qui veut.

Utilisé à ce jour dans 483 sites
logo article ou rubrique
Nuage de Mots clés
Article mis en ligne le 16 janvier 2016
dernière modification le 25 juin 2019

par Jean Christophe Villeneuve, SpipFactory

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

Ce fichier dont voici le code pour info est maintenant intégré dans le fichier escal-fontions.html

  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. /*           styles pour le nuage de mots             */
  3. /***************************************/
  4. #tag_cloud {
  5.         border: 1px solid #178FCB;
  6.         border-radius: 10px;
  7.         line-height: 1.5;
  8.         text-align: center;
  9.         margin: 10px -5px;
  10.         padding: 10px 0;
  11.         background-color: #DAE6F6;
  12. }
  13. .tag {
  14.         display: inline-flex;
  15.         vertical-align: middle;
  16.         margin: 0 5px
  17. }
  18. /***** definition des couleurs *****/
  19. .tag_color_1 {
  20.         color: #0066ff !important;
  21. }
  22. .tag_color_2 {
  23.         color: #642725 !important;
  24. }
  25. .tag_color_3 {
  26.         color: #4E6D68 !important;
  27. }
  28. .tag_color_4 {
  29.         color: #B79E47 !important;
  30. }
  31. .tag_color_5 {
  32.         color: #D3491B !important;
  33. }

Télécharger

Vous devez donc avoir 2 fichiers dans votre dossier /squelettes

  • /squelettes/modeles/tag.html
  • /squelettes/styles/perso.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}

qrcode:http://escal.ac-lyon.fr/spip/spip.php?article258

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

2009-2019 © Escal V4 - Tous droits réservés
Haut de page
Réalisé sous SPIP
Habillage ESCAL 4.2.99