Pluxopolis

Tout savoir pour devenir un pro de PluXml, mais pas seulement...

Rajouter des couleurs dans son nuage de tags

Rédigé par Stéphane 3 commentaires
PluXml gère les tags et permet d’afficher un nuage tag.

Pour rappel un tag est un mot clé que l’on associe à un ou plusieurs articles. L’objectif de l’utilisation des tags est de regrouper les articles de même thématique. Cela permet de connaître facilement la liste de tous les articles identifiés par un même mot clé.
Le nuage de tags permet d’afficher tous les tags avec une taille de police de caractère différente, plus ou moins grande, en fonction du nombre d’utilisation des mots clés. Plus un tag est grand, plus il y a d’articles rédigés associés à ce tag. Ce système donne une information aux visiteurs pour orienter ses lectures. Il est donc important de bien les choisir.

Voyons comment dans ce nuage mettre des couleurs différentes en fonction de la taille de chaque tag.

Le nuage de tags de PluXml est affiché grâce à fonction tagList de la class plxShow.Elle est généralement utilisée dans la sidebar (fichier sidebar.php de son thème).

<?php $plxShow->tagList('<span class="tag #tag_size"><a class="#tag_status" href="http://pluxopolis.net/article7/rajouter-des-couleurs-dans-son-nuage-de-tags#tag_url" title="#tag_name">#tag_name</a></span>', 20); ?>
Nb: le deuxième paramètre de la fonction tagList permet de limiter le nombre de tags affichés (ici à 20).

La taille de chaque tag est définie dans la feuille de style (fichier style.css dans le dossier du thème). Pour le thème par défaut de PluXml nous avons:

.tag-size-1 	{ font-size: 1em; }
.tag-size-2 	{ font-size: 1.1em; }
.tag-size-3 	{ font-size: 1.2em; }
.tag-size-4 	{ font-size: 1.3em; }
.tag-size-5 	{ font-size: 1.4em; }
.tag-size-6 	{ font-size: 1.5em; }
.tag-size-7 	{ font-size: 1.6em; }
.tag-size-8 	{ font-size: 1.7em; }
.tag-size-9 	{ font-size: 1.8em }
.tag-size-10 	{ font-size: 1.9em; }
.tag-size-max 	{ font-size: 2em; }
Si un tag n’est utilisé qu’une fois, c’est la classe css .tag-size-1 qui est utilisée et le tag sera afiiché avec une taille de 1em.
Si un tag n’est utilisé que 5 fois, c’est la class css .tag-size-5 qui est utilisée avec donc une taille de 1.4em.
Si un tag est utilisé plus de 10 fois c’est la class .tag-size-max qui est utilisée avec la taille correspondante.

Les tags sont des liens cliquables définit par la balise html <a>.
Pour changer la couleur de leur balise <a> il faut donc intervenir sur tous les arguments:


 .tag-size-x a

Pour définir une couleur différente de chaque tag en fonction de sa taille, rajoutez le code suivant à la fin du fichier style.css

.tag-size-1 a	{ color: #999999; }
.tag-size-2 a	{ color: #000000; }
.tag-size-3 a	{ color: #cc0000; }
.tag-size-4 a	{ color: #3366ff; }
.tag-size-5 a	{ color: #cc66cc; }
.tag-size-6 a	{ color: #996633; }
.tag-size-7 a	{ color: #6666cc; }
.tag-size-8 a	{ color: #339999; }
.tag-size-9 a	{ color: #009900; }
.tag-size-10 a	{ color: #ff99ff; }
.tag-size-max a	{ color: #ff6600; }
Si vous voulez un comportement différent au passage de la souris sur les liens, jouez sur a:hover de chaque tag.

.tag-size-1 a:hover	{ color: #999999; }
Voilà, à vous maitenant de choisir les couleurs qui vous plaisent en modifiant les valeurs #999999, etc...

3 commentaires

#1  - bankai a dit :

Merci pour cette astuce, pour ceux qui ont un thème perso.
Très facile à mettre en place, le rendu est plus agréable à l’œil ^_^

Répondre
#2  - Aspolo a dit :

Dans cette ligne <?php $plxShow->tagList('<span class="tag #tag_size"><a class="#tag_status" href="#tag_url" title="#tag_name">#tag_name</span>', 20); ?>

Une balise <a>n'est pas refermée avant </span>

Répondre
#3  - Stéphane a dit :

@Aspolo :
Merci c'est corrigé

Répondre

Fil RSS des commentaires de cet article

Écrire un commentaire

Quelle est la première lettre du mot fruap ?
Top