Sommaire
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
<tag|> dans une de vos noisettes ou article pour afficher votre nuage de mot clésEt voici le résultat, ici avec {type IN Thèmes, Onglet de paramétrage}
