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

Les menus et le moteur de recherche

Lecture : 5 minutes • 0

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é 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.

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

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.

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 l’une des interface, 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 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 :

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éé 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é 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.

0

Questions, réponses et commentaires

    Laisser un commentaire