Créer un Tag cloud ou nuage de mots clés

Attention, depuis PHP 5.5.0, certaines extensions SQL sans doute utilisées dans ce tutoriel peuvent être obsolètes et seront supprimées dans le futur, vous devez donc adapter les codes! Exemples ici.

Comment créer un tag cloud ou nuage de mots clés sans base de donnée.

Le nuage de mots-clés (tag cloud en anglais) est une représentation visuelle des mots-clés (tags) les plus utilisés sur un site web. Généralement, les mots les plus utilisés s'affichent dans des polices plus grandes.
Je vais vous montrer ici comment procéder en utilisant un peut de php et du CSS.
Dans un premier temps nous allons dabord créer un fichier PHP nomé "tag-cloud.php" qui va vous permettre de tester tout celà. Nous allons ensuite utiliser une fonction PHP qui permet d'afficher de façon alléatoire des mots dans un tableau.

<?php
 $tablo = array(' Créer un site ',' Créer un blog ',' CSS ',' htaccess ');
 srand((float)microtime()*1000000);
 shuffle($tablo);
 $nbcol=2;  // nombre de colonne. Ici 2
 echo '<table>';
 $nb=count($tablo);
 for($i=0;$i<$nb;$i++)
 {
 //les valeurs à afficher
 $valeur1=$tablo[$i];
 if($i%$nbcol==0)
 echo '<tr>';
 echo '<td>',$valeur1,'</td>';
 if($i%$nbcol==($nbcol-1))
 echo '</tr>';
 }
 echo '</tr></table>';
 ?>

Le code ci-dessus affiche donc 4 mots clés alléatoirement dans un tableau de 2 collones. Nous allons donc maintenant changer les mots par des liens.

<?php
  $tablo = array(' <a href="http://creer-un-site.fr">CSS</a>','
<a href="http://creer-un-site.fr">Créer un blog</a>'
,'
<a href="http://creer-un-site.fr">Créer un site</a>'
,'
<a href="http://creer-un-site.fr">htaccess</a>'
); srand((float)microtime()*1000000); shuffle($tablo); $nbcol=2; // permet de changer le nombre de colonne. Ici 2 echo '<table>'; $nb=count($tablo); for($i=0;$i<$nb;$i++) { //les valeurs à afficher $valeur1=$tablo[$i]; if($i%$nbcol==0) echo '<tr>'; echo '<td>',$valeur1,'</td>'; if($i%$nbcol==($nbcol-1)) echo '</tr>'; } echo '</tr></table>'; ?>

Voilà, on peut dire que notre tag cloud ou nuage de mots clés est fonctionnelle mais c'est moche ^^ et sa ne ressemble pas à un tag cloud. Nous allons donc créer une feuille de style ou CSS qui va permettre de changer la couleur des liens ainsi que la taille des mots clés. Nous allons par la meme occassion donner une couleur de fond et une bordure à notre tableau.
Selon vos propres besoins, le style css est à inclure dans une feuille de style ou directement entre les balises <head> et </head> en prenant soin d'ajouter au debut une balise d'ouverture <style> et une balise de fin </style>.

Voici un exemple de style css:

/*debut tag cloud*/
.tagcloud
{
background-color: #FCFFCF; width: 200px; /* couleur de fond du tableau+taille */
border: 1px solid #BFBFBF; /* bordure+couleur du tableau */
padding: 2px; /* espace entre la bordure et le texte */
text-align: center; /* texte centré */
font-family: Arial, Helvetica, sans-serif; /* style d'écriture */
}
.tagcloud a {
text-decoration:none; /* pas de décoration sur les liens */
}
.tagcloud a:hover { /* changement de couleur au passage de la souris */
text-decoration:none;
background-color:#DDDDDD; /* couleur d'arriere plan du lien survolé */
color:#FFFFFF; /* couleur du lien survolé */
}
.tag-1 { /* nom de la class*/
color:#AA3406; /* couleur du lien */
font-size: 16px; /* taille d'écriture */
font-weight:bold; /* gras */
}
.tag-2 {
font-size: 14px;
color:#070089;
}
.tag-3 {
font-size: 12px;
color:#BF2470;
}
.tag-4 {
font-size: 10px;
color:#333333;
}
/*fin tag cloud*/

Ceci fait, il suffit maintenant d'attribuer notre style css aux éléments du tableau et des liens comme ci-dessous:

<?php $tablo = array(' <a href="http://creer-un-site.fr" class="tag-1">CSS</a>','
<a href="http://creer-un-site.fr" class="tag-2">Créer un blog</a>','
<a href="http://creer-un-site.fr" class="tag-3">Créer un site</a>','
<a href="http://creer-un-site.fr" class="tag-4">htaccess</a>');
srand((float)microtime()*1000000);
shuffle($tablo);
$nbcol=2; // permet de changer le nombre de colonne. Ici 2
echo '<table class="tagcloud">';
$nb=count($tablo);
for($i=0;$i<$nb;$i++)
{
//les valeurs à afficher
$valeur1=$tablo[$i];
if($i%$nbcol==0)
echo '<tr>';
echo '<td>',$valeur1,'</td>';
if($i%$nbcol==($nbcol-1))
echo '</tr>';
}
echo '</tr></table>';
?>
Voir/déposer un commentaire (3) | Signaler un problème