Dans les articles précédents, on a chargé nos ressources CSS et JavaScript correctement. Notre zone de menu est fonctionnelle, mais le contenu de ce menu est encore codé en dur dans le fichier header.php.

Dans cet article, on va donc régler ce souci et on va enregistrer une zone de menu dans WordPress, pour la rendre disponible dans l’administration et avoir une navigation qui fonctionne sur le devant de notre site.

Déclarer notre menu

Si on va dans l’administration, sous “Apparence” on peut voir qu’on n’a même pas la possibilité de créer un menu. Simplement parce que rien dans le thème n’est mis en place pour gérer les menus.

La première chose à faire est de déclarer un emplacement de menu dans le fichier functions.php thème.
Pour cela, on utilise la fonction register_nav_menu();

Cette fonction est à éxecuter sur le hook after_setup_theme. Donc on va créer une nouvelle fonction qui va contenir tout le code à exécuter sur ce hook.

[pastacode lang=”php” manual=”function%20carbon_setup()%7B%7D%0Aadd_action(%20’after_setup_theme’%2C%20’carbon_setup’%20)%3B” message=”functions.php” highlight=”” provider=”manual”/]

En utilisant add_action, je dis à WordPress d’exécuter ma fonction carbon_setup juste après le chargement du thème. C’est sur ce hook qu’on va déclarer la plupart des fonctionnalités supportées par le thème.

[pastacode lang=”php” manual=”function%20carbon_setup()%7B%0A%20%20%20%20register_nav_menu(%20array(%0A%20%20%20%20%20%20%20%20’menu-1’%20%3D%26gt%3B%20__(%20’Primary%20menu’%2C%20’carbon’%20)%2C%0A%20%20%20%20)%20)%3B%0A%7D%0Aadd_action(%20’after_setup_theme’%2C%20’carbon_setup’%20)%3B” message=”functions.php” highlight=”3″ provider=”manual”/]

 

La fonction register_nav_menu() prend un tableau en paramètre, dont les clés sont l’identifiant du menu que l’on veut déclarer et la valeur le label affichable du menu. Donc on lui passe l’identifiant 'menu-1' et un nom pour le label.

La fonction __() renvoie une chaîne traduite. Le premier paramètre est la chaîne dans la langue par défaut (EN) et le deuxième paramètre est le text-domain, c’est-à-dire, pour simplifier, un mot clé qui va être associé à toutes les chaînes du thème, pour que WordPress ne s’emmêle pas les pinceaux quand il va chercher les traductions. On pourra alors créer un fichier de traduction, qui contiendra toutes les chaînes de notre thème.

Ce qui est important ici, c’est de ne jamais hardcoder une chaîne. C’est-à-dire de ne jamais écrire :

[pastacode lang=”php” manual=”register_nav_menu(%20array(%0A%20%20%20%20’menu-1’%20%3D%26gt%3B%20’Primary%20menu’%2C%0A)%20)%3B” message=”functions.php (NE PAS FAIRE !)” highlight=”” provider=”manual”/]

Car ici, il n’y a aucun moyen de traduire cette chaîne, à part aller modifier le code du thème directement (sale !) ou alors via Javascript (très sale !).

Maintenant, si on sauvegarde notre fichier et qu’on retourne dans l’admin, on voit qu’il y a un emplacement de menu déclaré.

Mais si crée un menu et qu’on retourne sur le devant du site, on a toujours notre menu hardcodé, simplement parce qu’on n’a pas dit à notre template header.php d’afficher le menu associé à cet emplacement.

Tant qu’on y est, si vous vous souvenez bien, on a aussi un menu de réseaux sociaux juste sous le menu principal et dans le footer. On va les déclarer de suite dans notre admin.

[pastacode lang=”php” manual=”function%20carbon_setup()%7B%0A%20%20%20%20register_nav_menu(%20array(%0A%20%20%20%20%20%20%20%20’menu-1’%20%3D%26gt%3B%20__(%20’Primary%20menu’%2C%20’carbon’%20)%2C%0A%20%20%20%20%20%20%20%20’menu-2’%20%3D%26gt%3B%20__(%20’Main%20social%20menu’%2C%20’carbon’%20)%2C%0A%20%20%20%20%20%20%20%20’menu-3’%20%3D%26gt%3B%20__(%20’Footer%20social%20menu’%2C%20’carbon’%20)%2C%0A%20%20%20%20)%20)%3B%0A%7D%0Aadd_action(%20’after_setup_theme’%2C%20’carbon_setup’%20)%3B” message=”functions.php” highlight=”4,5″ provider=”manual”/]

Afficher notre menu

L’idée c’est de remplacer tout ce morceau codé en dur par notre menu dynamique WordPress.

Pour ça, on utilise la fonction wp_nav_menu(). Cette fonction prend un tableau de paramètres, et il y en a quelques uns. On peut choisir un menu spécifique, lui donner une classe, un id, un conteneur, etc…

Mais le paramètre le plus important pour nous ici est 'theme_location'. Avec ce paramètre, on va dire à WordPress d’afficher le menu associé à cet emplacement de menu.

Dans header.php, on va donc commenter l’<ul> qui est hardcodée et on va afficher notre menu.

[pastacode lang=”php” manual=”wp_nav_menu(%20array(%0A%20%20%20%20’theme_location’%20%3D%26gt%3B%20’menu-1’%2C%0A)%20)%3B” message=”header.php” highlight=”” provider=”manual”/]

En allant sur notre site, on peut voir que maintenant, on a notre menu qui s’affiche, mais le CSS n’est pas bon.

Une des raisons, c’est qu’il manque la classe 'primary-menu' sur la <ul> du menu. Donc, on va ajouter ce paramètre.

[pastacode lang=”php” manual=”wp_nav_menu(%20array(%0A%20%20%20%20’theme_location’%20%3D%26gt%3B%20’menu-1’%2C%0A%20%20%20%20’menu_class’%20%20%20%20%20%3D%26gt%3B%20’primary-menu’%2C%0A)%20)%3B” message=”header.php” highlight=”3″ provider=”manual”/]

Ensuite, on a aussi une balise <div> qui vient embêter le monde. C’est dû au paramètre 'container' qui par défaut vaut 'div'. On ne veut pas de conteneur donc on va passer false.

[pastacode lang=”php” manual=”%0Awp_nav_menu(%20array(%0A%20%20%20%20’theme_location’%20%3D%26gt%3B%20’menu-1’%2C%0A%20%20%20%20’menu_class’%20%20%20%20%20%3D%26gt%3B%20’primary-menu%2C%0A%20%20%20%20’container’%20%20%20%20%20%20%3D%26gt%3B%20false%2C%0A)%20)%3B” message=”header.php” highlight=”4″ provider=”manual”/]

Et voilà ! Notre menu fonctionne !

Si on retourne dans l’administration enlever le menu associé à cet emplacement, et qu’on retourne sur le site, on a un menu qui correspond à celui des pages du site. C’est dû au comportement de la fonction qui utilise wp_page_menu() si elle ne trouve pas de menu à afficher.

On s’occupera des menus sociaux plus tard, car ils demandent une manipulation bien plus technique et on a des choses plus fondamentales à voir en priorité. Donc on s’occupera du bling bling plus tard !

Vu que notre menu est fonctionnel, maintenant, on peut s’occuper de notre zone de contenu, car quand on visite chaque page, on a le même contenu codé en dur dans notre index.php. C’est pas terrible quand même.

Donc on va dans le prochain article parler d’un concept fondamental de WordPress : la boucle, qui est responsable de l’affichage du contenu de chaque page.

A bientôt !

PS: Si vous avez aimé ce article et êtes intéressé pour apprendre à développer pour WordPress en utilisant les meilleures pratiques, jetez-un oeil à WPCookBook ! C’est un vrai livre de recettes WordPress pour apprendre à développer pour WordPress proprement et exploiter au maximum tous les outils et APIs mis à notre disposition. Inscrivez-vous pour être notifié de sa publication !