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 à exécuter 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.

function carbon_setup(){}
add_action( 'after_setup_theme', 'carbon_setup' );
functions.php

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.

function carbon_setup(){
    register_nav_menu( array(
        'menu-1' => __( 'Primary menu', 'carbon' ),
    ) );
}
add_action( 'after_setup_theme', 'carbon_setup' );
functions.php

 

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 :

register_nav_menu( array(
    'menu-1' => 'Primary menu',
) );
functions.php (NE PAS FAIRE !)

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

function carbon_setup(){
    register_nav_menu( array(
        'menu-1' => __( 'Primary menu', 'carbon' ),
        'menu-2' => __( 'Main social menu', 'carbon' ),
        'menu-3' => __( 'Footer social menu', 'carbon' ),
    ) );
}
add_action( 'after_setup_theme', 'carbon_setup' );
functions.php

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 à sa place.

wp_nav_menu( array(
    'theme_location' => 'menu-1',
) );
header.php

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.

wp_nav_menu( array(
    'theme_location' => 'menu-1',
    'menu_class'     => 'primary-menu',
) );
header.php

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.


wp_nav_menu( array(
    'theme_location' => 'menu-1',
    'menu_class'     => 'primary-menu,
    'container'      => false,
) );
header.php

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 !

Laisser un commentaire

Votre adresse de messagerie ne sera pas publiée. Les champs obligatoires sont indiqués avec *


9a744925c2489701a23ded41961650dbLLLLLLLLLLLLLLLLLLLLLL
%d blogueurs aiment cette page :