Introduction

Nous allons voir maintenant comment faire pour remplacer la bannière de notre site, ainsi que le menu par défaut de WordPress, par un menu complètement customisé.

Dans ce qui suit, nous allons nous focaliser sur un menu « carte cliquable », mais la méthode est bien sûr reproductible pour tout autre type de menu que vous pourriez fabriquer extérieurement à WordPress, c’est à dire hors menus par défaut ou plugins.

Commençons par le principe général : une image cliquable, que l’on va insérer en haut de notre site WordPress par une ligne PHP.
Cette image doit être travaillée à l’aide d’un éditeur d’images : « Photoshop » ou sa version libre « The Gimp ».
Pour notre exemple, voici l’image dont on va se servir :

C’est une image en 1400 x 150 (à l’aide de FireBug, faites plusieurs essais avant de trouver une taille qui convient). C’est une image trafiquée composée de deux images superposées :

et

J’ai ensuite « décolorisé » cinq nœuds, puis ajouter du texte dessus, de manière à figurer les cinq parties de mon site WordPress.
La partie graphique étant terminée, passons maintenant au code sous-jacent.

Based on ...

Je me suis contenté pour cette partie d’adapter des scripts existants. Mon souci était de ne pas trop compliquer le tutoriel, donc j’ai choisi une solution uniquement à base de CSS, m’inspirant de trois scripts :

- ici pour l’effet : http://tympanus.net/Tutorials/CircleHoverEffects/index2.html
- ici pour le placement des liens sur une image : http://alistapart.com/article/imagemap
- et ici pour l’apparition d’une boîte de type « tooltip » au survol de mes liens : http://www.menucool.com/tooltip/css-tooltip

Le résultat est visible ici : http://controverses.ensmp.fr/extras/atelier-webmaster/map-menu-final/

Et les résultats intermédiaires ici : http://controverses.ensmp.fr/extras/atelier-webmaster/map-menu/

Et ici : http://controverses.ensmp.fr/extras/atelier-webmaster/map-menu2/

Après avoir télécharger l’archive « custom-menu.zip » et mis celle-ci à la racine de votre site, regardons en détail les fichiers qui la compose.

Détails des fichiers (1)

Le fichier index.html :

Rien de bien compliqué, juste une succession de balise avec des identifiants et classes différents qui seront traités distinctement par la feuille de style : « id=map », « id=menu », « class=item » …etc. Ces vont nous permettre de diviser la page HTML, comme si on y posait des calques.

Voyons maintenant plus en détails la feuille de style « style.css » :

La première partie définie nos identifiants (#)« map » et « menu » :

L’identifiant « map » pointe vers notre image de fond créée tout à l’heure. On y ajoute sa longueur et sa largeur : « width » et « height ».
L’identifiant « menu » définie la position des liens (« absolute » : qui ne bougeront pas), leur taille, et leur apparence (souligné ou autre : ici, rien – « none »).
La seconde partie définie la classe « item » :

Vous pouvez ici modifier l’apparence de l’effet :

- l’arrondi du calque : radius (plus ici : http://www.alsacreations.com/astuce/lire/979-ovale-forme-elliptique-css3-sans-image.html)
- l’aspect ombré : propriétés « shadow »
- item à l’état normal: classe « .item »
- item à l’état survolé: classe « .item :hover »

Attention : veillez à respecter les mêmes longueurs et largeurs pour « #menu » et « .item ».

Détails des fichiers (2)

La partie suivante définie le placement de nos différents calques cliquables :

Remarquez la première ligne commentée « border :1px dotted black ». Je m’en sers pour bien localiser la zone sur l’image. Une fois cette zone localisée, je « recommente » la ligne. Faites donc jouer les paramètres « top » (distance par rapport au bord supérieur) et « left » (distance par rapport au bord gauche) pour placer exactement le calque sur la zone voulue.

Enfin, la dernière partie définie le comportement de la boite qui apparaît au survol d’un lien :

Si vous voulez personnaliser cette boite, modifier les paramètres de couleur de police (« color »), de taille (« width » et « height »), de distance aux bords (« padding », « margin ») …etc.

Attention cependant, car ce script est accompagnée de deux images (« callout-black.gif » et « css-tooltip-gradient-bg.png »), dont il faudra peut être modifier les couleurs également :

Intégration WordPress

Passons maintenant à l’intégration dans WordPress. Tout d’abord, rendez-vous dans le menu « Apparence/Editeur », puis sélectionnez à droite la page « En-tête – header.php » :

Commentez à l’aide de « < !-- » la balise « <a> », comme sur l’image, afin de supprimer votre bannière et votre barre de navigation :

Insérez ensuite le code suivant qui va insérer votre image / menu de navigation à la place de votre bannière et de votre menu que vous venez de supprimer

<?php include('custom-menu/index.html');?>

Pour obtenir ceci :

Voilà, vous n’avez plus qu’à modifier la cible des liens de votre fichier « index.html », de manière à ce qu’ils pointent vers des pages de votre site (de la forme « index.php ?page_id= …») :

Et voilà votre nouveau menu en place :