Par défaut, les tags sont affichés en nuage, ou en liste.
Je vous propose ici de les afficher dans un menu déroulant.
Pour ce faire, il n’est – hélas – pas possible d’utiliser un widget texte.
Deux solutions s’offrent à nous :
- copier le code suivant directement dans le template, mais ça implique qu’on ne pourra pas l’intercaler entre deux widgets depuis l’interface d’administration du blog ET qu’il faudra répéter l’opération dans chaque fichier .html du thème :
<div class="taglist"> <tpl:Tags type="tag"> <tpl:TagsHeader> <h2>{{tpl:lang Tags}}</h2> <form method="get" action="" id="tag"> <fieldset style="border:none;"> <p> <select name="tag" onchange="location = this.options[this.selectedIndex].value;"> <option>Sélection...</option> </tpl:TagsHeader> <option value="{{tpl:TagURL}}">{{tpl:TagID}}</option> <tpl:TagsFooter> </select> </p> </fieldset> </form> </tpl:TagsFooter> </tpl:Tags> </div>
- utiliser le plugin templateWidget et copier ce code-ci dans un nouveau fichier à nommer en "taglist.widget.html" et à placer dans le tpl du thème utilisé :
<tpl:WidgetName>taglist</tpl:WidgetName> <tpl:WidgetDescription>Tags en menu déroulant</tpl:WidgetDescription> <div class="taglist"> <tpl:Tags type="tag"> <tpl:TagsHeader> <h2>{{tpl:lang Tags}}</h2> <form method="get" action="" id="tag"> <fieldset style="border:none;"> <p> <select name="tag" onchange="location = this.options[this.selectedIndex].value;"> <option>Sélection...</option> </tpl:TagsHeader> <option value="{{tpl:TagURL}}">{{tpl:TagID}}</option> <tpl:TagsFooter> </select> </p> </fieldset> </form> </tpl:TagsFooter> </tpl:Tags> </div>
Et voici le résultat en image ;-)
Clap clap clap clap
Commentaires
Bonjour,
Cette présentation permet de gagner beaucoup de place par rapport à un nuage de tags, en effet. Cependant :
La balise fieldset est inutile ici (il n'y a qu'un seul champ à regrouper), il faut donc la supprimer. D'autant plus qu'elle peut avoir été stylée dans le thème d'une manière qui ne tient pas dans la sidebar (si la largeur est définie par exemple).
Il faut une balise label associée à la balise select, ce qui nécessitera de rajouter un identifiant sur le select. Exemple : <label for="tagselect">Afficher la liste des billets taggés...</label> et <select id="tagselect" name="tag">.
Enfin, la technique montrée ici nécessite Javascript, et n'est pas utilisable au clavier (l'évènement onchange est déclenché dès qu'on dépasse la première valeur). Dans l'idéal, il faudrait que le script concatène l'identifiant url du tag à la fin du paramètre action de la balise form, et que la même chose soit fait côté serveur. Mais on s'éloigne du code à copier-coller dans la sidebar...
Bonjour,
La balise <fieldset> est nécessaire pour la validation w3c. Si le thème style cette balise autrement que dans le cadre de celui du thème par défaut, c'est pas vraiment mon problème ;-) Mais plutôt celui du thémeur... Il n'est pas possible de concevoir un truc générique pour tous les thèmes.
Ceci étant, rien ne t'empêche de proposer un tip à ta sauce.