Bonjour,

cet article concerne mon ancien thème qui avait un beau menu latéral en javascript.
Voilà, on me demandait régulièrement comment changer les liens du menu de gauche, et j’ai souvent des recherches qui viennent chez moi genre « changer le menu picture perfect ».

Alors picture perfect : pour le télécharger, c’est là : http://wordpress.org/extend/themes/picture-perfect

Ensuite, vous dézippez, puis vous l’installez dans votre ftp, dans les thèmes.
Pour modifier, vous allez sur le fichier « functions », via votre wordpress (apparence > éditeur) ou via votre éditeur préféré.

Donc dans le fichiers « functions », vous cherchez ça :

<!– default links – these are not used if you have your own pages–>

<li class= »bk1″><a href= »http://mac-host.com/install.html »>About</a></li>

<li class= »bk2″><a href= »http://mac-host.com/install.html »>Weddings</a></li>

et vous remplacez par vos liens à vous, pour ma part, cela donne :

<li class= »bk1″><a href= »http://drine.info/category/photo-nature/ »>Photos Nature</a></li>

<li class= »bk2″><a href= »http://drine.info/category/photo-faune/ »>Photos Faune</a></li>
…etc
Voilà, donc les liens sont changés, et aussi les noms des catégories.

Mais si vous voulez par exemple insérer vos propres images, le plus simple est de ne pas toucher au code, et d’aller dans le répertoire « image menu > images » et là vous remplacez les images par celles de votre choix, en faisant attention de bien respecter les dimensions 240*300, sauf si vous voulez que votre menu soit moins large. Renommez bien vos images comme les images de base, sinon, cela ne fonctionnera pas (moi j’avais un souci avec un .JPG au lieu de .jpg, et ça changeait tout)

D’ailleurs en parlant de CSS, je vous dis vite fait comment j’ai inséré ma bannière :
J’ai rajouté dans le fichier de css (style) avant le premier « #welcomeheading »
#welcomeheading h1 a {

width: 704px;

height: 170px;

display: block;

background: url(/wp-content/uploads/adresse_de_votre_bannière.jpg) no-repeat top center;;

EDIT  : cela semble ne plus fonctionner avec les dernières mises à jour, j’ai alors rajouté au premier #welcomheading la ligne : background: url(/wp-content/uploads/adresse_de_votre_bannière.jpg) no-repeat top center; et j’ai joué avec les padding et margin pour le texte si vous voulez le laisser
Pour la taille, j’ai mis de façon à ce que ça s’adapte à un maximum de tailles d’écran, selon la vôtre ou elle est juste centrée au dessus de la colonne centrale, ou elle va aussi au dessus de la colonne de droite.

Par contre, je n’ai toujours pas compris pourquoi si j’essaie d’insérer une page « table des matières », ça me modifie toute la structure du thème, entre autre en remplaçant les catégories du menu par les pages…. sans doute une incompatibilité… EDIT : en effet ce thème présente pas mal d’incompatibilités avec de nombreux plugins…

26/01/11 : EDIT :

Ce qui revient le plus souvent : vous voulez rajouter ou enlever des liens, et donc des images dans le menu, parce que 7 c’est pas le nombre qui vous va :

Vous commencez par modifier le fichier functions.php. Soit vous enlevez des lignes, soit vous en rajoutez, selon la structure :

<li classe= »bk8″><a href= »http://votre lien »>nom du lien</a></li>
<li classe= »bk9″><a href= »http://votre lien »>nom du lien</a></li>

Ensuite, modifier la css. En effet, votre menu est maintenant ou trop grand ou trop petit.

Attention, les modifications interviennent dans la css du menu, le fichier imageMenu.css contenu dans le  dossier imagemenu ! Celui-ci n’est pas accessible via l’admin wordpress, il vous faudra aller le chercher directement dans votre ftp, et modifier avec un éditeur de texte (celui par défaut de windows est moche moche, je vous conseille l’excellent notepad ++)

Alors, si vous enlevez des liens, il vous faut modifier la taille globale du menu :

#imageMenu {
width: 240px;         /*overall image container width*/
overflow: hidden;
background-color: #000;
border-style: none;
height: 708px; /*overall container height*/

vous diminuez de 100 ou 101 px par lien enlevé.

Si vous rajoutez des liens à votre menu, vous pouvez augmenter la taille globale de votre menu, ce que je vous déconseille de faire. En effet, certains de vos visiteurs ont une petite résolution d’écran, genre 1024*768, encore très répandue. Alors, vos derniers liens en bas ne seront pas visibles, et il n’y aura pas de barre de défilement pour les voir…

Donc je vous conseille de modifier la hauteur de chaque lien. Votre menu paraitra un peu plus « compacté », mais tous vos liens seront accessibles, et là, ça se passe ici :

#imageMenu ul li a {

/* change to     text-indent: -1000px; if you want to use images in the menu instead of text*/
background:#FFFFFF none repeat scroll 0%;    border-right: 2px solid #fff;
cursor:pointer;
display:block;
overflow:hidden;
width:240px;                /*image width*/
height: XXpx;

Si vous voulez 8 liens, vous mettez 88 (qui en fait est la hauteur globale du menu divisée par le nombre de liens : 708/8), etc..

voilà passez une  bonne journée

EDIT : Si comme Morgane, vous rencontrez des problèmes avec ce thème, n’hésitez pas à me contacter, je commence à méchamment bien le maitriser, même si je ne l’utilise plus