Pour le titre, désolé, je n’ai pas pu m’en empêcher… Mais c’est juste pour dire qu’en ce qui concerne les menus, l’environnement WordPress en général, et Genesis en particulier, fournit de nombreuses possibilités.
Emplacement des menus
On a, dans le nouveau (V2.2.3) thème enfant Genesis-Sample, deux emplacements standards de menus : un emplacement primaire « After Header N0avigation » donc après l’en-tête (header) contenant le titre du site, et un emplacement secondaire « Footer Navigation » en pied de page (footer). Dans l’ancien thème (V2.2.2.), les deux menus étaient placés ensemble, après l’en-tête.
Pour les séparer, le concepteur de la V2.2.3. a simplement ajouté ces lignes dans le fichier functions.php :
//* Reposition the secondary navigation menu
remove_action( ‘genesis_after_header’, ‘genesis_do_subnav’ );
add_action( ‘genesis_footer’, ‘genesis_do_subnav’, 5 );
genesis_do_subnav est le nom d’un ensemble de lignes de code construisant la zone que l’on veut mettre en place dans la page : subnav, désigne un emplacement de menu secondaire, alors que nav désignerait un emplacement de menu principal. Aucun rapport entre subnav et une quelconque idée de sous-menu, pour un sous-menu on parle de sub-menu). En fait, c’est un « sous-emplacement de navigation ».
genesis_after_header est l’endroit (le « hook ») où le concepteur de la V2.2.2 l’avait placé (accroché), et genesis_footer est le hook auquel le concepteur de la V2.2.3 a ensuite voulu l’accrocher.
Le problème est que cette nouveauté de la V2.2.3. (les menus séparés) ne me convient pas. Donc maintenant que j’ai fait la mise à jour, je veux revenir en arrière sur ce point de détail. Il me suffit de désactiver les deux lignes de code ci-dessus, et pour ce faire de les transformer en commentaire en plaçant /* au début de la première ligne et */ à la fin de la seconde, de façon à ce que le code soit purement et simplement ignoré.
J’ai maintenant un menu principal bleu foncé, et juste en-dessous un menu secondaire bleu ciel (c’est normal, c’est pour la partie aviation du site).
Mais on est loin du maximum possible en matière de menus : dans tout emplacement prévu pour recevoir des widgets on peut choisir de placer le widget « Menu personnalisé ». Et s’il n’y a pas d’emplacement de widget, on peut en créer un là où on veut. C’est une façon compliquée de dire une banalité : partout où on peut mettre du code (donc partout…), ce code peut décrire la structure d’un menu. Il suffit alors d’un fichier CSS pour, en complément, en préciser l’aspect.
Menu conditionnel
Comme mon menu secondaire bleu clair n’est utile que pour la partie aviation, il me suffit de lui indiquer pour quelles pages il doit s’afficher.
Chaque page ou article du site est identifié par un numéro unique (ID). WordPress ne l’indique pas en clair, mais quand, dans la liste « Toutes les pages » du tableau de bord WordPress, le curseur survole le nom d’une page quelconque, on voit apparaitre en bas à gauche un lien contenant, par exemple, ?post=327 ; dans ce cas, l’ID de la page est 327. Bien sûr « il y a des plugins pour ça » : par exemple Reveal IDs de Oliver Schlöbe, qui rajoute une colonne ID dans la liste des pages, la liste des articles, etc.
Quand je relève les ID de toutes les pages de la partie aviation du site, je peux en faire la liste sous la forme (22,24,25,…,225,483) et introduire le tableau array(22,24,25,…,225,483) comme paramètre des lignes de code qui vont bien dans le fichier (encore lui) functions.php du thème enfant. Le site de Victor Font explique ça très bien ; je me suis contenté de copier/coller dans functions.php les lignes de code qu’il fournit en ajoutant mon array() contenant l’énumération des pages à accompagner du menu.
Et le coup des barres de menu qui se bloquent en haut de la page ?
J’avais utilisé un peu de javascript par le passé, mais sans plus. Il suffit de tourner le dos pendant 15 ans pour ne plus rien reconnaitre quand on remet les mains dans le code.
Comme si j’avais hiberné durant ces dernières années (en fait j’ai fait autre chose…), je viens de découvrir jQuery. On ne rigole pas, s’il vous plait. jQuery est une bibliothèque de fonctions javascript diverses permettant d’animer le site en interaction avec le visiteur (ou plus exactement avec ses actions sur la souris ou l’écran tactile).
En faisant une recherche sur les mots-clés « jquery sticky menu », il tombe une avalanche de sites qui indiquent comment bloquer le menu quand il arrive en haut de la page. Comme beaucoup se copient les uns les autres, je ne vais pas m’y mettre à mon tour. Je laisse chacun copier/coller, comme je l’ai fait, les scripts (lignes de code) qui vont bien.
Mais comme tout n’est pas très expliqué, je peux peut-être vous faire gagner du temps là où j’en ai perdu…
- Où est-ce que je peux télécharger jQuery ?
Très drôle : il est déjà dans WordPress.
Merci à tous les sites mettant des liens vers jQuery, Google, Microsoft. Ça m’a bien occupé jusqu’à ce que je voie en utilisant Firebug (outil de mon explorateur Firefox) que je tentais de charger jQuery plusieurs fois sur mon site, et en versions différentes. Donc il est inutile d’aller chercher jQuery en ligne, on se contentera d’appeler les fonctions qui vont bien, comme dans Excel on appelle SIN() ou SOMME() : elles sont déjà là. - Quand j’ai trouvé un script truffé de $ et avec des fonctions de fonctions, j’en fais quoi ?
Déjà, j’essaie de comprendre ce qu’il fait pour éventuellement l’adapter à ce que je veux faire. On y reviendra.
Ensuite, je le colle dans un fichier avec un nom évocateur (!) genre sticky-menus.js (js comme javascript), et je place ce fichier dans un répertoire js (que je crée si besoin est, mais qui peut déjà exister). Ce répertoire js est situé au même niveau que les fichiers function.php, style.css, etc. du thème enfant. - Maintenant comment l’activer ?
Il faut le mettre dans la bonne file où il (le script) sera lancé à son tour.
Il y a un hook pour ça, wp_enqueue_scripts, et une fonction à appeler wp_enqueue_script sans le « s » à la fin.
Pour ce faire, j’ai emprunté à StudioPress le code à placer comme toujours dans functions.php mais il est dans une zone réservée aux clients. Cependant, une petite recherche montre qu’ils le mettent aussi en accès libre sur cette page github (à la première rubrique intitulée « functions.php »). - Et ça suffit ?
Non, il faut créer des classes CSS, nom barbare pour désigner un paquet de code CSS à qui on attribue un nom.
Dans mon fichier mon-style.com qui regroupe toutes les modifs que j’ai apportées au fichier d’origine (style.css), j’ai ajouté le code
.bloque-haut {
position: fixed;
top: 0;
width: 100%;
z-index: 999; /*si avec ça mon menu n’est pas au premier plan…*/
}
Si j’attribue cette classe « bloque-haut » à ma barre de menu principale, elle est bloquée en haut de la page. Si je l’enlève, elle rejoint sa place d’origine et bouge en même temps que la page.
Dans la foulée, j’ai créé la classe « bloque-plus-bas » (pourquoi pas ?) avec top égal à 80px. Si j’attribue cette classe à ma barre de menu secondaire, elle est bloquée 80 pixels en-dessous de la barre principale.
On peut maintenant revenir au script contenu dans le fichier sticky-menus.js. Il n’est pas trivial de savoir l’écrire (c’est bien pour ça que j’ai copié sur mes petits camarades), mais le modifier est très facile. Si besoin est, une recherche Google sur une fonction un peu obscure donne toutes les informations nécessaires.
Le voici, il ressemble étrangement à ce que l’on trouve ici ou là, à part le fait qu’il y a deux menus (nav-primary et nav-secondary) et non un seul :
jQuery(function( $ ){
$(window).scroll(function() {
var TopMenuPrim = ($(‘.nav-primary’).position().top);
yPos = ( $(window).scrollTop() );
if( yPos > TopMenuPrim ) { /* bloquer les menus en haut*/
$(‘.nav-primary’).addClass(‘bloque-haut’);
$(‘.nav-secondary’).addClass(‘bloque-plus-bas’);
} else { /* débloquer les menus */
$(‘.nav-primary’).removeClass(‘bloque-haut’);
$(‘.nav-secondary’).removeClass(‘bloque-plus-bas’);
}
});
});
Quand j’actionne l’ascenseur de la fenêtre vers le bas, ou la roue de la souris vers l’arrière, la page monte dans la fenêtre.
$(window).scrollTop() indique de combien la page est montée.
$(‘.nav-primary’).position().top donne la position du haut de la barre principale dans la page.
Quand ces deux valeurs sont égales, la barre a atteint le haut de la fenêtre. Je lui dis de s’arrêter là en lui attribuant la classe « bloque-haut » par addClass(‘bloque-haut’).
Si la page redescend suffisamment dans la fenêtre, removeClass(‘bloque-haut’) rend sa mobilité à la barre.
Conclusion
On sait maintenant utiliser/modifier du code javascript pour attribuer un aspect (une classe) ou un autre à un objet quelconque en fonction des actions de l’opérateur. Avec des fonctions de jQuery comme .fadeIn() et .fadeOut() on peut le faire apparaitre ou disparaitre (l’objet, pas l’opérateur). Ça ouvre des possibilités infinies.
