Les menus et le moteur de recherche

Jusqu’à maintenant on s’est débrouillé 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. A 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 pleins 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 chacun 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 facheuse tendance à 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éé 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é 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.