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.
Sommaire du cours
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.
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.
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.
Menus et emplacement de menus, quelle différence ?
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.
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 :
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()
:
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 :
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 :
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 :
Il existe d’autres paramètres que vous pourrez retrouver dans la documentation des menus WordPress.
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…
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 :
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 :
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 :
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 :
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.
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?
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.
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
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
.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.
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.
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.
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 !
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.
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…)
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)
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 !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.
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 » ?).
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.