Très chère Kozlika,

Me voilà de retour après quelque temps passé à autre chose, il faut dire que le travail ne manque pas non plus pour la prochaine version à venir de Dotclear. Ordoncques, j’ai repris mon bâton de pèlerin codeur et j’ai décidé de m’attaquer à un petit morceau particulier requis pour la construction du thème : son menu.

Nous avons réfléchi tous les deux, souviens-toi, à la meilleure façon de proposer la gestion de ce menu qui orne le haut du thème. Je ne vais pas rappeler ici le détail de nos débats mais simplement signaler que nous nous étions finalement décidés pour le développement d’un plugin qui prendrait cette partie en charge.

Ce plugin fonctionne ma foi fort bien aujourd’hui, en tout cas sur mon installation de test, et je te propose de l’utiliser en lieu et place de ce que tu avais en attendant placé dans le fichier _top.html du thème.

L’insertion de ce menu se fait via l’utilisation d’une balise template {{tpl:SimpleMenu}} pour laquelle tu peux, si tu le souhaites, préciser deux attributs supplémentaires (mais optionnels) :

  • class : qui permet de préciser la ou les classes à affecter à la balise <ul>
  • id : qui permet de préciser l’id à affecter à la même balise <ul>

Comme tu l’as certainement deviné, j’utilise une liste non ordonnée pour afficher le menu.

La balise <ul class="simple-menu"> sera éventuellement complétée avec le contenu des paramètres décrits ci-dessus; le premier élément, <li> donc, de la liste recevra une classe li-first, le dernier recevra une classe li-last et l’item actif recevra de plus une classe active. Ah oui, j’oubliais, chaque élément de cette liste reçoit également un id numéroté li<numéro> et la description fournie et affiché après le libellé de chaque option est encadrée par un <span>.

Voilà le code complet correspondant au menu que tu as défini :

<ul id="simple-menu">
	<li id="li1" class="li-first active"><a href="http://ductile.dotaddict.org/">Accueil<span class="nomobile"> articles récents</span></a></li>
	<li id="li2"><a href="#">Construire un thème<span class="nomobile"> tutoriels</span></a></li>
	<li id="li3"><a href="#">Maquettes<span class="nomobile"> projets graphiques</span></a></li>
	<li id="li4" class="li-last"><a href="http://ductile.dotaddict.org/archive">Archives<span class="nomobile">2005-2011</span></a></li>
</ul>

Côté administration ce plugin est assez simple à utiliser. J’ai en effet pris le parti de guider l’utilisateur pas à pas pour l’aider à créer les différents items de son menu. Ainsi, une fois que tu auras choisi le type d’élément à créer, par exemple une page, tu passeras par un second petit formulaire qui te permettra de sélectionner la page en question dans un menu déroulant. Enfin tu auras la possibilité de modifier à ton gré les propositions de libellé, description et même d’URL — bien que cela puisse être aventureux de le faire pour qui ne maitrise pas cela correctement — de ton élément avant de l’enregistrer.

Premier pas d'un ajout d'item de menu

Tu pourras également, si tu le souhaites, supprimer tout ou partie des items du menu ou simplement les ré-ordonner selon ton goût.

Voilà en ce qui me concerne, j’ai encore plein de choses à faire pour le configurateur de thème et il n’est que temps que je m’y mette. Je te laisse la parole car je sais que tu as, de ton côté, apporté plein de nouveautés et d’amélioration au thème Ductile.

PS : Le plugin est autonome et peut tout à fait être utilisé par n’importe qui, pour peu qu’il insère la balise idoine dans son thème, c’est pourquoi je le place en pièce jointe de ce billet.