Formation « Développer un thème WordPress sur mesure »

Les menus et le moteur de recherche

Lecture : 5 minutes • 31

WordPress nous permet d’administrer des menus, et d’afficher un moteur de recherche sur le site. On va voir les notions de menus et emplacements de menus, et voir pourquoi cette distinction est fondamentale.

Jusqu’à maintenant on s’est débrouillés sans menu, mais on voit bien que ça nous manquait : en effet le menu est l’un des éléments les plus importants d’un site. C’est lui qui va porter votre internaute vers les réponses qu’il recherche. C’est pour cela qu’il ne faut jamais négliger la réflexion de l’arborescence d’un site.

Dans ce cours, on va voir comment créer nos menus administrables dans notre thème.

Les menus dans WordPress

Il y a deux façons de gérer les menus dans WordPress, soit en passant par Apparence > Menus, soit via le customizer dans Apparence > Personnaliser > Menus.

Mais pour le moment, comme on n’a pas déclaré de menus dans notre thème, vous ne trouverez pas ces entrées dans l’administration WordPress.

L'interface de gestion des menus dans WordPress.
C’est d’ici que l’on peut gérer ses menus et en créer d’autres

Dans les deux cas, c’est exactement la même chose. À vous de choisir la technique que vous préférez.

Le Customizer est surtout utile pour les personnes qui utilisent un thème premium, qui propose alors plein d’options de personnalisation à ses utilisateurs.

Vous, quand vous créez votre thème, c’est soit pour vous, soit pour le client, du coup le but c’est d’avoir un thème qui répond a un besoin précis.

La modification des menus depuis l'interface du customizer WordPress
Le customizer permet de repérer facilement les menus que l’on peut modifier

Depuis chacune de ces deux interfaces, on voit que l’on peut créer plusieurs menus. Mais pour le voir apparaitre il faut l’assigner à un emplacement de menu.

On peut utiliser un menu de plusieurs manières dans WordPress : l’assigner quelque part dans le thème, ou le mettre dans un Widget.

Ce qui va nous intéresser ici c’est d’assigner le menu dans notre thème. Mais pour cela on va devoir déclarer un ou plusieurs emplacements de menus.

L’emplacement de menu est une zone dans laquelle l’utilisateur va pouvoir créer et assigner un menu qu’il aura créé.

Alors pourquoi distinguer un menu et un emplacement de menus ?

Imaginez que vous utilisez un thème comme twentynineteen. Vous créez un menu et vous l’assignez à l’emplacement “Menu Principal”. Mais demain, vous décidez de changer de thème. Cette fois les emplacements ne seront pas forcément les mêmes, il n’y aura plus d’emplacement “Menu Principal”, mais à la place “Menu primaire”. C’est la même chose, seul le nom change.

Du coup, votre menu saute : mais heureusement, il ne disparaitra pas pour autant. Il existe toujours sous forme de menu dans WordPress, la seule chose à faire est de l’assigner dans le nouvel emplacement.

Assigner un menu à un emplacement du thème
De cette manière, le menu sera assigné à l’emplacement prévu

Les emplacements sont également utiles dans le cas d’un site multilingue : un même emplacement pourra accueillir plusieurs menus, un pour chaque langue !

C’est pour ces raisons qu’il est utile de distinguer un emplacement de menu, et le menu lui même.

Déclarer un emplacement de menu

On va maintenant aller déclarer 2 emplacements dans notre thème, un que l’on mettra dans l’entête, ce sera le menu principal, et un autre en pied de page (pour les mentions légales, la politique de confidentialité, le lien vers contact… ).

Pour cela, rendez-vous dans functions.php et ajoutez :

PHP
functions.php

Le premier paramètre est le slug du menu, le second le nom qui apparaitra dans l’administration de WordPress.

On vient de déclarer nos emplacements de menu, ce qui aura pour effet d’afficher le menu Apparence > Menu dans notre administration WordPress. On va alors pouvoir créer un nouveau menu, et l’assigner à notre emplacement.

Mais une minute ! On n’a toujours pas dit où se trouvaient ces menus dans notre template. On va donc ouvrir header.php et ajouter la fonction wp_nav_menu() :

PHP
header.php

Le paramètre theme_location me permet de définir le slug de l’emplacement, parmi ceux définis juste au-dessus dans le functions.php.

Et faire de même dans footer.php mais cette fois avec le slug footer :

PHP
footer.php

wp_nav_menu() va nous permettre d’afficher le contenu d’un emplacement de menu, donc un menu si celui-ci est bien assigné.

Il existe d’autres paramètres qui vont par exemple nous permettre de contrôler le HTML et le CSS généré par ce menu. Dans mes thèmes j’applique ces deux paramètres :

PHP
header.php

Ici j’indique que je ne veux pas de conteneur supplémentaire autour de mon menu : WordPress a la fâcheuse tendance d’ajouter une <div> par forcément très utile autour du <ul>.

Et je personnalise aussi la classe CSS afin qu’elle soit en accord avec les autres classes de mon document.

Comparez le HTML généré avec et sans ces paramètres, afin de voir la différence :

HTML

Il existe d’autres paramètres que vous pourrez retrouver dans la documentation des menus WordPress.

Information

Si vous n’assignez pas de menu à un emplacement, WordPress listera automatiquement les Pages que vous avez créées.

Créer un menu et l’assigner à un emplacement

On peut maintenant aller créer notre menu, y ajouter des pages, le blog, éventuellement des catégories…

Créez votre menu, sans oublier de l’assigner à votre emplacement

Et enfin l’assigner à notre emplacement “Menu Principal”.

Je crée des pages « Mentions légales » et je publie « Politique de confidentialité », puis je les ajoute dans un nouveau menu que j’assigne cette fois en pied de page.

Voici le résultat :

Les menus apparaissent bien sur le site dans leur emplacement
Le menu principal en haut, le menu pied de page en bas !

Vous êtes maintenant parés pour créer autant d’emplacements de menus que vous le désirez dans votre thème !

Ajouter un moteur de recherche

WordPress nous propose également son moteur de recherche, afin de trouver facilement un contenu dans une page ou les articles du blog. Et pour l’utiliser, c’est extrêmement simple. Ajoutez simplement cette fonction dans votre header.php par exemple :

PHP
header.php

Notez qu’il n’y a pas besoin de mettre de echo avant car le formulaire s’affiche par défaut dans votre template. Voici le résultat :

Le moteur de recherche de WordPress
Le moteur de recherche affiché dans le header, avec un peu de CSS

Il est également possible de personnaliser le HTML du moteur de recherche si celui par défaut ne vous convient pas. Pour cela créez un fichier searchform.php à la racine de votre thème et ajoutez ce code de base que vous pourrez personnaliser selon votre envie :

PHP
searchform.php

C’est intéressant de le faire pour notamment retirer le label “Rechercher” qui prend de la place et le mettre en placeholder du champ de recherche.

Lorsque vous faites une recherche, c’est le template search.php qui est appelé par le Template Hierarchy de WordPress. Pour réviser le fonctionnement de la hiérarchie des templates, par ici !

Vous pourrez également ajouter le moteur de recherche sous forme de Widget, et c’est justement ce que l’on va aborder dans le prochain cours.


Votre thème possède maintenant des zones dynamiques permettant d’afficher des menus administrables ! Dans le prochain cours, on va voir ce que sont les Widgets, et leur utilité dans le blog.

31

Questions, réponses et commentaires

  1. steph

    Le 20 février 2020

    Je ne sais pas si c’est une histoire de version wordpress, mais je ne vois pas menu dans la partie apparence. Je peux y accéder seulement dans thèmes.

    1. Maxime BJ

      Le 20 février 2020

      Normalement ça doit s’y trouver peu importe la version de WordPress. Est-ce que tu es bien sur un thème sur mesure et pas un thème téléchargé (qui aurait pu modifier l’emplacement du menu “menu” ?).

      1. Stéphane

        Le 24 février 2020

        Ce qui m’a induit en erreur, c’est de voir “menu” dans apparence sur le screenshot alors qu’on déclare après le menu. Effectivement une fois déclaré ça marche.

        Je suis allé un peu vite, mais de ne pas voir affiché “menu” sur le moment sur le site, m’a donné l’impression de louper une étape.

  2. Aurélie

    Le 27 avril 2020

    J’ai eu un soucis avec le fichier searchform.php au niveau de l’action, visiblement il avait du mal à se retrouver et me renvoyait systématiquement à la racine du serveur… du coup chez moi ça tourne mieux ainsi :
    action=””

    (c’est bien le template search qui ressort)

    1. Maxime BJ

      Le 27 avril 2020

      D’ailleurs je vais changer car ma méthode n’est pas bonne en effet, il vaut mieux mettre la fonction home_url( '/' ). Merci pour ton retour !

      1. Ralph SANGO

        Le 16 juin 2021

        Bonjour monsieur et deja merci beaucoup pour ces informations mais j’ai un soucis que j’aimerais éclaircir en fait j’ai eu à créer un site de vente en ligne en local mais je me heurte au problème de recherche ou filtrage des produits créer lorsque j’inscrit un article à rechercher WP s’en va chercher en fait dans tout le contenu or j’aimerais que la recherche se fasse dans les titres des produits ou le nom des produits mais pas dans tout le contenu. Donc j’aimerais savoir comment y procéder

        1. Maxime BJ

          Le 17 juin 2021

          Ce serait dommage de retirer des fonctionnalités du coeur pour limiter ta recherche. Mais je peux comprendre que ça peut être utile parfois. J’ai trouvé un filtre pour toi : https://wordpress.stackexchange.com/questions/11822/how-to-limit-search-to-post-titles. Je n’ai pas testé et je ne sais pas si ça marche mais ça semble être la bonne approche.

  3. Rebecca

    Le 21 juillet 2020

    Bonjour, dans votre site Capitaine WP vous avez un menu (sommaire ?) latéral déroulant et dynamique. Est-ce sur une base de plugin existant à la vente ou entièrement développé par vous ? En vous remerciant.

    1. Maxime BJ

      Le 21 juillet 2020

      Tout est réalisé sur mesure sur mon site en effet en ce qui concerne le thème et ses fonctionnalités. Après tout c’est le but de ce site : créer son site de A à Z. Mais il est possible que les extensions de LMS proposent un tel sommaire (Sensei, LifterLMS, Learndash…)

  4. Martin

    Le 31 décembre 2020

    Bonjour Maxime, Merci pour vos tutoriels très bien faits. Quand abordez vous CSS et le style dans votre formation? Je suis vos instructions à la lettre et j’ai tous les éléments à l’écran mais rien n’est stylisé à l’heure actuelle. Avez une partie consacrée à CSS pour mettre en page le template? Merci et bonnes fêtes de fin d’année.

    1. Maxime BJ

      Le 31 décembre 2020

      Le CSS n’est pas abordé dans la formation mais je te conseille de suivre la formation CSS d’Openclassroom en parallèle.

      1. Marmouz82

        Le 7 janvier 2021

        Bonjour Maxime
        Un grand bravo pour votre formation. Cependant je reviens sur ce que dit Martin.

        Vous annoncez ceci au point 2A.6 :
        “On abordera le CSS dans WordPress dans quelques cours.”

        Ce qui sous-entend qu’on va faire le CSS.

        Il serait judicieux d’annoncer qu’on ne fait pas le css du site dès le début du cours. Cela nous permettrait de le faire au fur et à mesure.

        1. Maxime BJ

          Le 7 janvier 2021

          Bien vu, ça faisait partie de l’introduction aux ressources à télécharger pour la formation premium, mais comme son écriture est en pause, mieux vaut que je retire ça pour l’instant. Merci !

  5. Ben

    Le 26 janvier 2021

    Bonjour,
    Supers tuto , c’est clair et concis , on ne se perd pas c’est cool !!!
    Seul petit problème je viens de me rendre compte que le searchform ne me sort que des résultat de page . Mes Articles , catégories et étiquettes n’apparaissent pas . Il y a t il une méthodologie particulière ?
    Merci

    1. Maxime BJ

      Le 26 janvier 2021

      Il devrait chercher dans toutes les publications (pages/articles) par défaut. Vérifie si tu n’as pas un plugin qui changerait la recherche. Il y a un hook pour ça aussi : pre_get_post.

  6. Cyril BLANCHET

    Le 7 mars 2021

    Bonjour,

    je me posais une question : on peut enregistrer un menu ou une sidebar dans functions.php direct mais on peut également le faire dans after_setup_theme hook non?

    1. Maxime BJ

      Le 9 mars 2021

      Oui tout à fait, c’est ce que je fais historiquement. Et je pars du principe que tout dans un thème ou une extension doit être mis dans un hook. J’ai été surpris du coup lors de la rédaction de ce cours, de voir dans la doc qu’ils mettaient la déclaration de menu comme ça dans functions.php. J’ai donc suivi la recommandation. Mais les deux marchent en tous cas.

  7. Yassine SGHAIER

    Le 12 juin 2021

    Bonjour,

    Est ce que je peux avoir le code source complet de ce tutoriel ?

    Merci

    1. Maxime BJ

      Le 12 juin 2021

      le code présenté dans le cours est complet et opérationnel, tu ne devrais pas avoir besoin de plus !

  8. Dominique

    Le 30 juillet 2021

    Bonjour

    j’ai un petit soucis avec le footer, j’ai un espace blanc sous le footer. je n’arrive pas a faire le coller le footer en bas de page.

    Merci

    1. Maxime BJ

      Le 30 juillet 2021

      Le plus probable reste un dépassement en CSS. La console du navigateur devrait pouvoir t’aider à trouver le coupable. Vérifie également qu’il ne reste pas un élément invisible qui s’affiche, toujours avec l’inspecteur.

  9. phil

    Le 15 février 2022

    Bonjour Maxime,
    Super site de ressources WordPress et en français ! Je le suis avec attention avec toujours de plaisir. Ça fait du bien 😉

    Je suis en train de développer un site corporate france, ce dernier comporte plusieurs sections (rubriques que l’on peut filtrer avec des tags). C’est à dire des événements et les news que propose le site global.

    Je dois à présent y intégrer 3 villes qui devront utiliser la même structure, c’est à dire, lorsqu’on choisi la ville 1 par ex, la page d’accueil, les catégories et les news n’affichent que ce qui concerne cette ville.

    Pour cette partie, je ne vois pas trop de problème, mais je souhaite faire en sorte que lorsqu’on choisi la ville concernée (à la manière d’un changement de langue d’un site multilingue) tout le site se transforme, header menu footer et contenu.

    Je ne vois pas comment faire. Seules les pages événements et news sont communes, il est facile de les filtrer automatiquement sur la ville concernée, mais je ne vois pas comment filtrer le menu du haut et le footer en fonction de la ville concernée, leur liens pointant vers du contenu différent.

    Ceci afin d’éviter de se retrouver sur le site France lorsqu’on clique sur un lien de menu.

    As-tu une idée de mise en œuvre, je ne sais pas si je me suis bien expliqué.
    Désolé pour le long commentaire. Merci encore !
    Phil

    1. Maxime BJ

      Le 15 février 2022

      Tu vas pouvoir t’aider des Conditional Tags pour savoir dans quelle situation tu te trouves (taxonomie, post type, page en particulier…). Ensuite, tu pourras appeler un header/footer différent (get_header et get_footer acceptent un paramètre pour aller chercher un fichier différent), ou alors appeler un template part en fonction via get_template_part(). Je pense que ça peut solutionner ta problématique !

  10. lila

    Le 10 avril 2022

    Bonjour,et merci pour cette formation très intéressante. j’ai une question: je souhaite integrer 2 menus(lien + icones de connexion et panier) dans le même emplacement principale, il me propose soit l’un soit l’autre, comment faire. Merci

    1. Maxime BJ

      Le 10 avril 2022

      Tu peux soit créer 2 menus et les placer à côté dans ton thème, ou alors en faire un seul pour tout, mais dans ce cas il faudra utiliser ACF pour ajouter un champ image sur les entrées de menu (pour choisir une icône).

  11. Séverine

    Le 29 mai 2022

    Bonjour ! Je suis à quelques sites wp de réalisé et j’ai 1 gros problème de compréhension pour la création de menu. Je n’arrive pas à mettre en relation 1 item du menu comme l’onglet compte avec le fichier compte.php. C’est à dire que j’ai développé le menu avec des classes bootsprap et mon fichier compte.php a du code avec 1 fonction js. Maintenant je souhaite en cliquant sur l’onglet compte du menu atteindre cette page qui a 1 header différent. Par hasard ça a marché mais sans comprendre pourquoi. Je pense que c’est 1 problème de choix du template hierarchy. Ma question est donc comment créer ce lien entre l’onglet d’un menu et 1 fichier php ? Est-ce possible de ne pas utiliser la partie menu du dasboard ? Merci beaucoup pour votre aide !

    1. Maxime BJ

      Le 29 mai 2022

      Pour cela tu vas avoir besoin des templates de pages personnalisés, que l’on voit dans quelques cours. Voici le lien : https://capitainewp.io/formations/developper-theme-wordpress/templates-personnalises/ Tu vas pouvoir créer un modèle compte.php, et l’assigner dans WordPress. C’est de cette manière que tu vas pouvoir créer autant de mises en pages et templates que tu veux.

      1. Séverine

        Le 30 mai 2022

        Merci beaucoup pour ta réponse rapide en plein we ! J’avais en effet dans mes tribulations utilisé cette méthode à un moment indéterminé … ce qui a sans doute fait que ça a marché mais seulement en passant par “voir la page”. Est ce que je dois utiliser le permalien créé pour le copier dans la navbar au niveau du href ? Merci !

        1. Maxime BJ

          Le 30 mai 2022

          Tu peux, mais si tu as fais un menu WP classique, tu pourras trouver ta page directement en tapant son nom dans la recherche, et WordPress ajoutera directement le bon lien.

  12. Loic

    Le 18 février 2023

    Bonjour, savez-vous si il existe une fonction pour savoir si un menu est vide ? Merci.

    1. Maxime BJ

      Le 19 février 2023

      Il existe la fonction has_nav_menu() qui permet de définir si un menu a été assigné à l’emplacement. Mais ce n’est peut-être pas ce que tu veux. Sinon, tu peux utiliser :
      $menu = wp_get_nav_menu_object( $menu_name );
      puis : if( is_object( $menu ) ){
      ou $menu->count > 0

Laisser un commentaire