Créer un emplacement de menu personnalisé pour WordPress

Depuis WordPress 3.0, il n’a jamais été aussi facile de créer et modifier des menus de navigation.

Cette fonctionnalité n’en reste pas moins compliquée à utiliser si votre thème ne prend pas en charge les emplacements de menus.

Dans ce tutoriel, nous verrons comment définir un emplacement de menu de navigation personnalisé.

Autrement dit, il vous sera possible d’indiquer directement depuis Apparence > Menus où chaque menu devra s’afficher, en sélectionnant l’un des emplacements que nous aurons déclarés. Cette méthode concerne les thèmes classiques ; avec un thème à blocs, rendez-vous à la dernière partie.

Étape n°1 – Modification du fichier functions.php

N.B : vérifiez d’abord que votre thème ne déclare pas déjà ses propres emplacements. Ils sont listés dans Apparence > Menus, onglet Gérer les emplacements, visible dès que vous avez créé un menu. S’ils vous suffisent, passez directement à l’étape n°3 ; si vous en ajoutez, choisissez des identifiants différents des leurs.

Comme souvent, il nous faut éditer le fichier functions.php présent dans le dossier /wp-content/themes/NOM_DU_THEME/functions.php accessible via un client FTP.

Pour ne pas perdre vos modifications à la prochaine mise à jour du thème, travaillez de préférence dans un thème enfant : son fichier functions.php se charge en plus de celui du thème parent.

Vous pouvez également passer par Apparence > Éditeur de fichiers des thèmes.

En fin de fichier, ajoutez les lignes de code suivantes :

/**
 * Register custom navigation menu locations.
 */
function wpc_register_menu_locations() {
	register_nav_menus(
		array(
			'primary' => __( 'Main menu', 'wpchannel' ),
			'footer'  => __( 'Footer menu', 'wpchannel' ),
		)
	);
}
add_action( 'after_setup_theme', 'wpc_register_menu_locations' );

Ce bout de code aura pour effet de créer 2 emplacements de menu pour votre thème, identifiés par primary et footer, et d’activer la prise en charge des menus : si votre thème ne la déclarait pas, le sous-menu Menus apparaît alors dans Apparence.

Main menu et Footer menu sont les libellés de ces emplacements dans l’administration. Ils passent par la fonction de traduction __() : remplacez le domaine wpchannel par celui de votre thème, ou saisissez directement des libellés en français.

Étape n°2 – Modification de votre thème WordPress

Évidemment, cette technique présuppose d’avoir inséré dans votre thème la fonction qui va afficher le menu en question, wp_nav_menu() :

<?php
wp_nav_menu(
	array(
		'theme_location'       => 'primary',
		'container'            => 'nav',
		'container_aria_label' => __( 'Main menu', 'wpchannel' ),
	)
);
?>

Cette commande va donc afficher le menu affecté à l’emplacement primary, que vous pouvez créer et modifier depuis l’administration de WordPress, dans une balise nav dotée d’un libellé destiné aux lecteurs d’écran. À insérer généralement dans le fichier header.php, là où le menu doit apparaître (avec un thème enfant, copiez d’abord ce fichier depuis le thème parent). Pour l’emplacement footer, procédez de même dans footer.php avec 'theme_location' => 'footer'.

Tant qu’aucun menu n’est affecté à l’emplacement, WordPress affiche à sa place la liste de vos pages : ajoutez 'fallback_cb' => false au tableau d’arguments pour ne rien afficher dans ce cas. Les autres paramètres de la fonction sont détaillés dans le tutoriel sur les menus personnalisés cité en introduction.

Étape n°3 – Choix de l’emplacement des menus

Retournez ensuite dans Apparence > Menus et créez votre menu si ce n’est pas déjà fait. En bas de l’onglet Modifier les menus, la section Réglages du menu liste désormais vos emplacements sous Emplacement du menu : cochez celui où afficher le menu, puis cliquez sur Enregistrer le menu.

Dans notre exemple, ce sont donc les libellés « Main menu » et « Footer menu » qui s’affichent : WordPress ne les traduit que si votre thème fournit une traduction pour son domaine.

L’onglet Gérer les emplacements, en haut de l’écran, permet aussi d’affecter tous vos menus d’un coup : choisissez un menu dans la liste déroulante de chaque emplacement, puis cliquez sur Enregistrer les modifications.

Et avec un thème à blocs ?

Avec un thème à blocs, comme Twenty Twenty-Five, le thème par défaut de WordPress, cette méthode ne s’applique pas : pas de fichier header.php à modifier, ni d’emplacements de menus. Le menu est un bloc Navigation, placé dans l’en-tête du thème, auquel vous associez directement le menu de votre choix depuis Apparence > Éditeur. Je détaille cette méthode dans la dernière partie du tutoriel pour créer des menus personnalisés avec WordPress.

Déclarer des emplacements avec register_nav_menus() dans un thème à blocs fait certes apparaître Apparence > Menus, mais c’est dans le bloc Navigation lui-même que vous choisissez le menu affiché. Seule exception : tant qu’aucun menu de navigation n’existe, WordPress crée le premier à partir du menu affecté à l’emplacement primary, s’il y en a un. Et si vous passez d’un thème classique à un thème à blocs, vos menus ne sont pas perdus : le bloc Navigation peut les importer.

Vous êtes désormais capable de définir des emplacements de menus de navigation dans votre thème WordPress. Pratique, non ?

Une fois vos menus en place, vous pouvez ajouter des icônes à vos éléments de menu.