• Passer à la navigation principale
  • Passer au contenu principal
  • Passer à la barre latérale principale

Le DR400, l'atmosphère et sujets divers

J'explique ce que j'ai compris, en espérant que ça aide

  • Accueil
  • Aviation
  • Electronique
  • Articles sur WordPress
  • J’ai testé
    • Hébergement de sites web
    • Travaux de rénovation (maison et jardin)
  • Voyage au Japon
  • Autres sites réalisés
  • Mentions légales

Menus à la carte

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.

Barre latérale principale

Formulaire de contact


    Merci de compléter tous les champs marqués d'un *.



    La politique de confidentialité du site précise les modalités de collecte, traitement et conservation des données personnelles

     

    Connexion


    Mot de passe oublié ?

    Mot de passe oublié

    Annuler

    Copyright © 2023 - Claude Goumain · Développé en environnement Genesis Framework · Site WordPress

    En poursuivant votre navigation sur ce site, vous acceptez l’utilisation de cookies pour mémoriser vos préférences et nous permettre de réaliser des statistiques sur l'usage du site.
    Configurer les CookiesJe refuseJ'accepte
    Gestion des cookies

    Aperçu de confidentialité

    Ce site Web utilise des cookies pour améliorer votre expérience de navigation. Parmi ceux-ci, les cookies classés comme nécessaires sont stockés sur votre navigateur car ils sont essentiels au fonctionnement des fonctionnalités de base du site Web. Nous utilisons également des cookies tiers qui nous aident à analyser et à comprendre comment vous utilisez ce site. Ces cookies ne seront stockés dans votre navigateur qu'avec votre consentement. Vous avez également la possibilité de désactiver ces cookies. Néanmoins, la désactivation de certains de ces cookies peut affecter votre expérience de navigation. Encore que sur le présent site ce soit sans risque puisque les seuls cookies sont ceux servant à la gestion des cookies ;-)
    Nécessaires
    Toujours activé
    Les cookies nécessaires sont absolument essentiels au bon fonctionnement du site Web. Ces cookies assurent les fonctionnalités de base et les fonctions de sécurité du site Web, de manière anonyme.
    CookieDuréeDescription
    cookielawinfo-checkbox-advertisement1 yearThe cookie is set by GDPR cookie consent to record the user consent for the cookies in the category "Advertisement".
    cookielawinfo-checkbox-analytics1 yearThis cookies is set by GDPR Cookie Consent WordPress Plugin. The cookie is used to remember the user consent for the cookies under the category "Analytics".
    cookielawinfo-checkbox-necessary1 yearThis cookie is set by GDPR Cookie Consent plugin. The cookies is used to store the user consent for the cookies in the category "Necessary".
    cookielawinfo-checkbox-performance1 yearThis cookie is set by GDPR Cookie Consent plugin. The cookie is used to store the user consent for the cookies in the category "Performance".
    Fonctionnels
    Les cookies fonctionnels aident à exécuter certaines fonctionnalités telles que le partage du contenu du site Web sur les plates-formes de médias sociaux, la collecte de commentaires et d’autres fonctionnalités tierces.
    Performance
    Les cookies de performance sont utilisés pour comprendre et analyser les principaux indices de performance du site Web, ce qui contribue à offrir une meilleure expérience utilisateur aux visiteurs.
    Analytiques
    Les cookies analytiques sont utilisés pour comprendre comment les visiteurs interagissent avec le site Web. Ces cookies aident à fournir des informations sur les mesures du nombre de visiteurs, du taux de rebond, de la source du trafic, etc.
    Publicitaires
    Les cookies publicitaires sont utilisés pour fournir aux visiteurs des publicités et des campagnes marketing pertinentes. Ces cookies suivent les visiteurs sur les sites Web et collectent des informations pour fournir des publicités personnalisées.
    Autres
    Les autres cookies sont ceux qui sont en cours d’analyse et n’ont pas encore été classés dans une catégorie particulière.
    CookieDuréeDescription
    cookielawinfo-checkbox-functional1 yearThe cookie is set by GDPR cookie consent to record the user consent for the cookies in the category "Functional".
    cookielawinfo-checkbox-others1 yearNo description
    Enregistrer & appliquer
    Propulsé par CookieYes Logo