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é.

Pour modifier les liens :

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.

Insérer vos images dans le menu :

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)

Pour insérer une bannière en haut de la page :

vous rajoutez au premier #welcomheading la ligne suivante :

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

Et ensuite vous jouez avec les padding et les margin pour la mettre à la bonne place.

Si celle- ci a une largeur supérieure à celle du bloc où vous écrivez, le menu déroulant va se superposer à la bannière, ce qui n’est pas forcément intéressant… Il faut alors allez modifier le fichier ImageMenu.css (dans le dossier ImageMenu). Vous ne l’avez pas via l’admin wordpress, il vous faudra aller le chercher avec votre ftp préféré et le modifier avec votre éditeur de texte favori (notepad++pour ma part )

Vous cherchez le code suivant :

#imageMenu {
background-color: #000000;
border-bottom-width: 1px;
border-style: none none solid;
float: left;
height: 708px;
left: 24px;
margin: 0;
overflow: hidden;
padding: 0;
position: fixed;
text-align: left;
width: 240px;
}

Et vous modifiez le « margin:0; » en « margin-top: XXpx; » avec XX correspondant à la hauteur de votre bannière. Votre menu va alors descendre du nombre de pixels indiqué, laissant la place à votre bannière.

Cependant attention : le menu est fixe sur le côté de la page, si vous le descendez trop, les derniers liens ne seront plus accessibles au visiteur qui a une petite résolution d’écran. En effet : beaucoup de monde navigue encore en 1024×768,  de base, votre menu fait 708px de haut, si vous rajoutez une bannière de 100px, le dernier lien sera tout juste visible par les plus petites résolutions d’écran.

Enlever ou ajouter des liens au menu :

… 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 !

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é, la hauteur de base d’un lien.

Si vous rajoutez des liens à votre menu, vous pouvez augmenter la taille globale de votre menu, ce que je vous déconseille de faire, pour les petites résolutions d’écrans…. 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 au survol de la souris, vos images apparaitront.

Ç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), 9 liens, 708/9 = 78px… etc

Fixer le menu en haut de la page

Voilà, ça vous gave, vous avez envie de mettre 12 liens, accessibles à toutes les résolutions d’écran, et d’avoir un grand menu, vous pouvez fixer le menu en haut de la page, ce qui fait que lorsque vous scrollez la page, vous pouvez accéder au reste du menu. Personnellement, je trouve ça un peu moins joli, mais bon, je vous dis :

Dans ImageMenu.css, vous cherchez :

#imageMenu {
width: 240px; /*overall image container width*/
overflow: hidden;
background-color: #000;
border-style: none;
height: 606px; /*overall container height*/
float: left;
text-align: left;
border-bottom-style: solid;
border-bottom-width: 1px;
left: 24px;
position: fixed;
margin: 0;
padding: 0;
}

et vous supprimez tout simplement l’attribut position : fixed.

 

Le point faible de ce thème ?

C’est le grand nombre de plugins avec lesquels il se révèle incompatible. Alors si vous avez un souci, commencez par désactiver vos plugins….

 

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