Nuage de Mots clés
Article mis en ligne le 16 janvier 2016
dernière modification le 23 janvier 2020

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

<div id="tag_cloud">
	#SET{#maxMot, 0}
	<BOUCLE_max(MOTS){tout}>
		<BOUCLE_max_art(ARTICLES){id_mot}>
		</BOUCLE_max_art>
			#SET{#maxMot, #_max_art:TOTAL_BOUCLE|max_mot{#GET{#maxMot}}}
		</B_max_art>
	</BOUCLE_max>
 
	<B_mots>
		<BOUCLE_mots(MOTS){par hasard}{type !IN affichage, trombino, type_rubrique, Agenda_couleur}{0, 40}>
			<BOUCLE_mots_art(ARTICLES) {id_mot}> </BOUCLE_mots_art>
				[<a
                href="#URL_MOT"
                style="font-size: [(#_mots_art:TOTAL_BOUCLE|coef{#GET{#maxMot},2,0.8})]em"
				class="tag tag_color_(#_mots:COMPTEUR_BOUCLE|alterner{'1','2','3','4','5'})"
				title='#_mots_art:TOTAL_BOUCLE article(s)'>
                #TITRE
                </a>]
			</B_mots_art>
		 </BOUCLE_mots>	
		</BOUCLE_aff>
	</B_mots>
</div>

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

<?php
// Nuage de tags
function coef($texte, $max, $nbrMax= 2, $minFont= 0.8) {
	return ($texte/$max*$nbrMax + $minFont);
}
 
function max_mot($texte, $max) {
	return max($texte, $max);
}
?>

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).

/***************************************/
/*           styles pour le nuage de mots             */
/***************************************/
#tag_cloud {
	border: 1px solid #178FCB;
	border-radius: 10px;
	line-height: 1.5;
	text-align: center;
	margin: 10px -5px;
	padding: 10px 0;
	background-color: #DAE6F6;
}
.tag {
	display: inline-flex;
	vertical-align: middle;
	margin: 0 5px
}
/***** definition des couleurs *****/
.tag_color_1 {
	color: #0066ff !important;
}
.tag_color_2 {
	color: #642725 !important;
}
.tag_color_3 {
	color: #4E6D68 !important;
}
.tag_color_4 {
	color: #B79E47 !important;
}
.tag_color_5 {
	color: #D3491B !important;
}

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