Menus WordPress : Guide Technique Complet de l’Architecture de Navigation

Les menus WordPress sont une collection structurée de liens de navigation — rendus sous forme d’éléments HTML <nav> — qui connectent les visiteurs aux pages, articles, catégories, URL personnalisées ou taxonomies de votre site. Ils sont enregistrés par les thèmes à l’aide de register_nav_menus() et gérés via l’interface d’administration WordPress ou le Customizer, donnant aux propriétaires de sites un contrôle total sur la hiérarchie de navigation sans toucher au code.

Pour la plupart des installations WordPress, les menus constituent le système de navigation principal. Les configurer correctement affecte non seulement l’expérience utilisateur, mais aussi l’efficacité d’exploration, la distribution de l’équité des liens internes et la façon dont les moteurs de recherche interprètent la hiérarchie du contenu de votre site.

Comment fonctionnent réellement les menus WordPress en coulisses

Avant de toucher au panneau d’administration, il est utile de comprendre l’architecture. Les menus WordPress fonctionnent à travers trois couches interconnectées :

• Enregistrement du thème : Un thème déclare les emplacements de menu disponibles en utilisant register_nav_menus() dans functions.php. Sans cet appel, l’écran d’administration des menus n’affiche aucun emplacement assignable.
• Stockage en base de données : Les éléments de menu sont stockés comme un type de publication personnalisé (nav_menu_item) dans wp_posts, avec les relations gérées via wp_term_relationships. Chaque élément contient des métadonnées telles que l’URL, le libellé, l’ID parent et la position.
• Rendu du template : Le thème appelle wp_nav_menu() dans ses fichiers de template, en passant un argument theme_location. WordPress résout le menu assigné, construit l’arborescence des éléments et génère du HTML sémantique.

Comprendre cela signifie que vous savez exactement où chercher quand quelque chose ne fonctionne pas — un appel wp_nav_menu() manquant dans le template, un thème qui n’a jamais enregistré l’emplacement, ou une relation de terme corrompue dans la base de données.

Étape 1 : Accéder au gestionnaire de menus WordPress

Connectez-vous à votre tableau de bord WordPress et naviguez vers Apparence > Menus. Cet écran est le panneau de contrôle central pour toutes les opérations de menu.

Si vous ne voyez pas le menu Apparence dans la barre latérale, votre rôle d’utilisateur manque probablement de la capacité edit_theme_options. Un compte administrateur est requis.

Chemin alternatif via le Customizer :

Allez dans Apparence > Personnaliser > Menus. Cette voie fournit un panneau d’aperçu en direct à côté de l’éditeur, ce qui est utile pour le positionnement visuel mais offre moins d’options d’édition en masse que l’écran Menus dédié.

Étape 2 : Créer un nouveau menu

Sur l’écran Menus, cliquez sur le lien « Créer un nouveau menu » en haut de la page.

1. Entrez un nom interne descriptif — par exemple, Primary Navigation, Footer Legal Links, ou Mobile Sidebar. Ce nom n’est jamais affiché aux visiteurs ; il existe uniquement pour votre référence lors de la gestion de plusieurs menus.
2. Cliquez sur Créer le menu.

Une bonne pratique consiste à nommer les menus par leur fonction et leur emplacement plutôt que par des libellés génériques comme « Menu 1 ». Lorsqu’un site atteint cinq ou six menus, un nommage clair évite des erreurs d’assignation coûteuses.

Étape 3 : Ajouter des éléments à votre menu

Le panneau de gauche sur l’écran Menus présente tous les types de contenu disponibles que vous pouvez ajouter comme éléments de menu.

Pages

Cochez les cases à côté des pages existantes (par ex., Accueil, À propos, Services, Contact) et cliquez sur Ajouter au menu. Par défaut, WordPress affiche uniquement les pages les plus récentes. Cliquez sur Tout afficher pour voir la liste complète, ou utilisez l’onglet Recherche pour trouver une page spécifique par titre.

Articles et types de publications personnalisés

Les articles individuels peuvent être ajoutés de la même façon. Si votre thème ou un plugin enregistre des types de publications personnalisés (par ex., portfolio, product), ces types de publications apparaissent comme des panneaux séparés — à condition qu’ils aient été enregistrés avec show_in_nav_menus => true.

Catégories et étiquettes

Les termes de taxonomie sont des éléments de menu puissants pour les sites à fort contenu. L’ajout d’un lien de catégorie dirige les visiteurs vers la page d’archive de cette catégorie, affichant automatiquement tous les articles associés. Cela est particulièrement efficace pour les sites d’actualités ou les blogs multi-thématiques où le contenu est organisé par sujet.

Liens personnalisés

Les liens personnalisés acceptent n’importe quelle URL — interne ou externe — associée au texte de lien de votre choix. Les cas d’utilisation incluent :

• Lier vers un sous-domaine ou un outil externe
• Créer un élément parent de substitution (utiliser # comme URL) qui agit comme déclencheur de liste déroulante sans destination propre
• Lier vers des ancres dans une page (par ex., https://example.com/about/#team)

Pour ajouter un lien personnalisé :

1. Développez le panneau Liens personnalisés.
2. Entrez l’URL complète dans le champ URL.
3. Entrez le libellé visible dans le champ Texte du lien.
4. Cliquez sur Ajouter au menu.

Étape 4 : Organiser la structure et la hiérarchie du menu

Une fois que les éléments apparaissent dans le générateur de menu à droite, vous contrôlez l’ordre et la hiérarchie par glisser-déposer.

Réorganiser les éléments

Cliquez et maintenez n’importe quel élément de menu, puis faites-le glisser vers le haut ou le bas pour changer sa position. Les éléments les plus à gauche s’affichent en premier dans les barres de navigation horizontales.

Créer des sous-menus (navigation déroulante)

Faites glisser un élément de menu légèrement vers la droite et en dessous d’un autre élément. Un retrait visuel apparaît, indiquant une relation parent-enfant. L’élément en retrait devient une entrée de sous-menu qui apparaît dans une liste déroulante sous son parent.

Vous pouvez imbriquer plusieurs niveaux en profondeur, bien que la plupart des thèmes ne stylisent que deux ou trois niveaux. Au-delà, la prise en charge CSS et JavaScript varie et l’expérience utilisateur se dégrade sur les appareils mobiles.

Modifier les éléments de menu individuels

Cliquez sur la flèche à droite de n’importe quel élément de menu pour développer ses paramètres :

• Libellé de navigation : Le texte affiché dans le menu rendu (indépendant du titre de la page).
• Attribut de titre : Renseigne l’attribut HTML title sur la balise d’ancre — utile pour l’accessibilité mais souvent redondant si le libellé est déjà descriptif.
• Ouvrir le lien dans un nouvel onglet : Ajoute target="_blank" et, de manière importante, WordPress ajoute automatiquement rel="noopener noreferrer" pour prévenir le reverse tabjacking.
• Classes CSS : Ajoutez des classes personnalisées aux éléments individuels pour un style ciblé.
• Relation du lien (XFN) : Rarement utilisé dans les flux de travail modernes ; vous permet de définir la relation entre vous et la cible du lien en utilisant les microformats XFN.
• Description : Certains thèmes affichent une courte description sous le libellé du menu. La plupart ne le font pas.

Remarque : Les champs Classes CSS et Description sont masqués par défaut. Pour les afficher, cliquez sur Options de l’écran en haut à droite de la page Menus et activez les cases à cocher correspondantes.

Étape 5 : Assigner le menu à un emplacement de thème

Créer un menu ne le fait pas apparaître sur votre site. Vous devez l’assigner à un emplacement de thème enregistré.

Faites défiler jusqu’à Réglages du menu en bas du générateur de menu et cochez la case à côté de l’emplacement souhaité — généralement intitulé Menu principal, Menu secondaire, Menu pied de page, ou Menu liens sociaux, selon ce que votre thème actif enregistre.

Cliquez sur Enregistrer le menu.

Si un emplacement de thème que vous attendez est manquant, le thème ne l’a pas enregistré. Vous pouvez vérifier les emplacements enregistrés de manière programmatique :

print_r( get_registered_nav_menus() );

Exécutez ceci dans un fichier de template temporaire ou via un plugin comme Query Monitor pour inspecter les emplacements disponibles.

Assigner des menus via le Customizer

Naviguez vers Apparence > Personnaliser > Menus > Voir tous les emplacements. Chaque emplacement enregistré dispose d’une liste déroulante où vous sélectionnez quel menu afficher. Les modifications ici sont prévisualisées en direct avant publication.

Étape 6 : Personnalisation avancée des menus

Ajouter des icônes aux éléments de menu

La plupart des thèmes ne prennent pas nativement en charge les icônes dans les éléments de menu. Les approches courantes sont :

• Pseudo-éléments CSS : Ajoutez une classe à l’élément de menu et utilisez ::before ou ::after dans votre feuille de style pour injecter une icône depuis une bibliothèque comme Font Awesome.
• Libellé de navigation avec HTML : Certains thèmes autorisent le HTML dans le champ Libellé de navigation. Vous pouvez insérer une balise <i> ou <svg> directement, bien que cela soit fragile et se casse si le thème assainit les libellés.
• Sélecteurs d’icônes basés sur des plugins : Des plugins comme Max Mega Menu ou WP Menu Icons ajoutent un sélecteur d’icônes directement dans l’éditeur d’éléments de menu.

Mega menus

Pour les grands sites avec des hiérarchies de contenu profondes, les listes déroulantes standard deviennent encombrantes. Un mega menu affiche un panneau large et multi-colonnes au lieu d’une liste verticale étroite. La mise en œuvre nécessite soit un plugin dédié, soit un thème qui prend nativement en charge ce modèle. La structure du menu dans WordPress reste la même — la différence réside entièrement dans la façon dont le CSS et le JavaScript du thème rendent les éléments imbriqués.

Menus responsives et mobiles

Tous les thèmes modernes réduisent la navigation horizontale en un bouton hamburger sur les petits écrans. Ce comportement est géré par le JavaScript et le CSS du thème, et non par le cœur de WordPress. Si le menu mobile de votre thème est cassé ou inaccessible, le problème se trouve presque toujours dans le fichier navigation.js du thème ou dans un attribut ARIA manquant sur le bouton de bascule.

Pour la conformité à l’accessibilité (WCAG 2.1 AA), le bouton de bascule doit avoir :

• Un attribut aria-expanded basculé entre true et false au clic
• Un attribut aria-controls pointant vers l’ID du conteneur du menu
• Un indicateur de focus visible

Étape 7 : Menus dans les zones de widgets

Vous pouvez afficher n’importe quel menu enregistré dans une barre latérale, une zone de widget de pied de page ou toute autre zone de widgets.

Pour les widgets classiques (avant WordPress 5.8) :

1. Allez dans Apparence > Widgets.
2. Faites glisser le widget Menu de navigation dans la zone de widget souhaitée.
3. Sélectionnez le menu dans la liste déroulante et enregistrez.

Pour l’écran de widgets de l’éditeur de blocs (WordPress 5.8+) :

1. Allez dans Apparence > Widgets.
2. Cliquez sur l’icône + pour ajouter un bloc.
3. Recherchez et insérez le bloc Navigation ou le bloc HTML personnalisé.
4. Le bloc Navigation peut référencer un menu existant par son nom.

Pour les thèmes Full Site Editing (FSE) :

Dans les thèmes basés sur des blocs, les menus traditionnels sont remplacés par le bloc Navigation dans l’éditeur de site (Apparence > Éditeur). Le bloc Navigation puise dans les mêmes données de menu mais est géré entièrement dans l’interface de l’éditeur de blocs. L’écran classique Apparence > Menus peut ne pas apparaître du tout dans les thèmes FSE.

Types de menus WordPress : une comparaison

Gérer plusieurs menus

WordPress prend en charge un nombre illimité de menus enregistrés, mais un seul menu peut être assigné à chaque emplacement de thème à la fois. Une architecture multi-menus pratique pour un site d’entreprise typique :

• Menu principal : Pages de services et de contenu de premier niveau
• Menu pied de page (Colonne 1) : Pages de l’entreprise et pages légales
• Menu pied de page (Colonne 2) : Liens de support et de ressources
• Menu mobile : Une version simplifiée du menu principal avec moins d’éléments pour une navigation au pouce plus rapide
• Menu tableau de bord/compte : Pertinent uniquement si le site dispose d’une zone utilisateur connecté

Pour basculer entre les menus sur l’écran Menus, utilisez la liste déroulante Sélectionner un menu à modifier en haut et cliquez sur Sélectionner.

Gestion programmatique des menus

Pour les développeurs gérant WordPress à grande échelle — notamment sur Hébergement VPS ou Serveurs dédiés où les déploiements sont scriptés — créer et assigner des menus de manière programmatique est bien plus fiable que les clics manuels dans l’administration.

Créer un menu et l’assigner à un emplacement :

// Create the menu
$menu_id = wp_create_nav_menu( 'Primary Navigation' );

// Add a page item
wp_update_nav_menu_item( $menu_id, 0, array(
    'menu-item-title'   => 'Home',
    'menu-item-url'     => home_url( '/' ),
    'menu-item-status'  => 'publish',
    'menu-item-type'    => 'custom',
) );

// Assign to a theme location
$locations = get_theme_mod( 'nav_menu_locations' );
$locations['primary'] = $menu_id;
set_theme_mod( 'nav_menu_locations', $locations );

Exporter et importer des menus entre environnements avec WP-CLI :

# Export the full site (includes menu data in the WXR file)
wp export --path=/var/www/html --dir=/tmp/exports

# On the target server, import
wp import /tmp/exports/site.xml --authors=create

WP-CLI vous permet également d’inspecter les assignations de menus directement :

wp menu list
wp menu location list
wp menu location assign primary my-menu-slug

Cela est inestimable lors de la migration d’installations WordPress entre les environnements de staging et de production sur un VPS avec cPanel ou un serveur Linux nu.

Problèmes courants de menu et comment les résoudre

Le menu n’apparaît pas sur le frontend

• Le menu a été créé mais n’a pas été assigné à un emplacement de thème. Allez dans Apparence > Menus > Réglages du menu et cochez la case d’emplacement.
• Le fichier de template du thème n’appelle pas wp_nav_menu() pour cet emplacement. Inspectez le fichier header.php du thème ou la partie de template concernée.
• Un plugin de cache sert une page obsolète. Videz le cache après avoir enregistré le menu.

Les éléments de menu affichent la mauvaise URL

• L’URL du site a changé (par ex., après une migration de HTTP vers HTTPS ou un déménagement vers un nouveau domaine). Les éléments de liens personnalisés stockent des URL absolues et doivent être mis à jour manuellement ou via une recherche-remplacement en base de données :

wp search-replace 'http://olddomain.com' 'https://newdomain.com' --path=/var/www/html

Les sous-menus déroulants n’apparaissent pas

• Le JavaScript du thème pour les événements de survol ou de clic ne se charge pas. Vérifiez la console du navigateur pour les erreurs JS.
• Une règle CSS masque le conteneur du sous-menu. Inspectez l’élément et recherchez display: none sans état de survol/focus correspondant.
• Les éléments de menu sont correctement imbriqués dans l’administration mais le thème ne prend en charge qu’un seul niveau de profondeur.

Le menu disparaît après un changement de thème

• Les menus sont conservés dans la base de données, mais les emplacements de thème changent entre les thèmes. Après le changement, allez dans Apparence > Menus et réassignez vos menus aux emplacements du nouveau thème.

Considérations de sécurité pour la navigation WordPress

Les éléments de menu qui renvoient vers des URL générées par l’utilisateur ou construites dynamiquement doivent être traités avec le même soin que toute autre entrée. Risques spécifiques :

• Redirection ouverte via des liens personnalisés : Si votre site construit programmatiquement des URL d’éléments de menu à partir de paramètres de requête, validez et assainissez l’entrée. La fonction esc_url() de WordPress doit envelopper toute sortie d’URL.
• Élévation de privilèges via la visibilité du menu : Certains plugins offrent des règles de « visibilité du menu » (afficher cet élément uniquement aux utilisateurs connectés, aux administrateurs, etc.). Assurez-vous que ces règles sont appliquées côté serveur, et non simplement masquées via CSS — masquer un lien dans le DOM ne restreint pas l’accès à la page cible.
• XSS dans les libellés de navigation : WordPress assainit les libellés de menu à la sortie, mais les implémentations wp_nav_menu() personnalisées avec item_spacing => 'discard' ou des classes walker personnalisées peuvent contourner l’échappement par défaut. Utilisez toujours esc_html() ou esc_attr() dans les walkers personnalisés.

Maintenir votre installation WordPress, vos thèmes et vos plugins à jour est la défense de base. Si vous exécutez WordPress sur un plan d’Hébergement Web mutualisé, confirmez que votre hébergeur applique des règles WAF au niveau du serveur qui interceptent les modèles d’injection courants ciblant l’interface d’administration.

SSL et intégrité des URL de menu

Si votre site fonctionne sous HTTPS — ce qui est obligatoire, étant donné que Google traite HTTP comme un signal de classement — toutes les URL des éléments de menu doivent utiliser le schéma https://. Les avertissements de contenu mixte déclenchés par un seul lien http:// dans un menu peuvent supprimer l’indicateur de cadenas sécurisé du navigateur et éroder la confiance des visiteurs.

Vérifiez que votre configuration SSL est correcte et que vos Certificats SSL couvrent tous les sous-domaines référencés dans vos éléments de menu, notamment si vous créez un lien vers un sous-domaine comme shop.example.com ou docs.example.com.

Après l’installation ou le renouvellement d’un certificat SSL, effectuez un audit complet des menus :

wp menu item list --menu=primary --fields=url --format=csv | grep "^http://"

Tout résultat de cette commande est un élément de menu qui doit être mis à jour vers HTTPS.

Points techniques clés à retenir

• Enregistrez les emplacements de menu dans functions.php avec register_nav_menus() avant de vous attendre à ce qu’ils apparaissent dans l’administration.
• Assignez les menus aux emplacements — créer un menu sans l’assigner ne rend rien sur le frontend.
• Utilisez les Options de l’écran pour déverrouiller les champs Classes CSS, Description et Relation du lien dans l’éditeur d’éléments de menu.
• Dans les thèmes Full Site Editing, gérez la navigation via le bloc Navigation dans l’éditeur de site, et non via l’écran Menus classique.
• Utilisez les commandes WP-CLI wp menu pour les déploiements scriptés, les migrations et les mises à jour en masse dans plusieurs environnements.
• Après toute migration de domaine ou passage de HTTP à HTTPS, effectuez une recherche-remplacement sur les URL des éléments de menu — les liens personnalisés stockent des chemins absolus.
• Validez l’accessibilité du menu mobile : aria-expanded, aria-controls et la gestion du focus clavier ne sont pas optionnels pour la conformité.
• L’invalidation du cache est obligatoire après chaque enregistrement de menu dans les environnements de production exécutant un cache d’objets ou de pages.
• Les classes walker personnalisées dans wp_nav_menu() contournent l’échappement par défaut — appliquez toujours esc_html() et esc_url() explicitement.
• Pour les configurations WordPress multi-environnements sur des Panneaux de contrôle VPS, utilisez les exports WP-CLI pour transférer les configurations de menu de manière fiable plutôt que de les recréer manuellement.

FAQ

Puis-je avoir des menus différents pour mobile et bureau sur le même site WordPress ?

Pas nativement via le système de menus WordPress seul. L’approche standard consiste à enregistrer deux emplacements de thème — un pour le bureau, un pour le mobile — à assigner des menus différents à chacun, et à utiliser des media queries CSS pour afficher ou masquer l’emplacement approprié. Certains plugins de mega menu gèrent cela automatiquement avec des panneaux de configuration responsive intégrés.

Pourquoi mon menu affiche-t-il des pages que je n’ai pas ajoutées ?

Si vous avez coché l’option Ajouter automatiquement les nouvelles pages de premier niveau à ce menu lors de la création du menu, WordPress insère chaque page de premier niveau nouvellement publiée dans le menu. Décochez cette option sous Réglages du menu et enregistrez pour arrêter ce comportement.

Quelle est la différence entre un emplacement de menu et un menu ?

Un emplacement de menu est un emplacement défini par le thème (par ex., « Menu principal »). Un menu est la collection réelle de liens que vous construisez dans l’administration. Vous assignez un menu à un emplacement. Un menu peut être assigné à plusieurs emplacements ; un emplacement ne peut contenir qu’un seul menu à la fois.

Comment ajouter un menu WordPress à une page en utilisant un shortcode ou un bloc ?

WordPress core ne fournit pas de shortcode natif pour les menus. La méthode la plus propre dans l’éditeur de blocs est d’insérer un bloc Navigation et de sélectionner votre menu enregistré. Alternativement, utilisez la fonction wp_nav_menu() dans un bloc HTML personnalisé avec l’exécution PHP activée via un plugin, ou utilisez un plugin de shortcode qui encapsule wp_nav_menu().

La structure du menu affecte-t-elle le SEO ?

Oui, indirectement mais de manière significative. Les liens de menu sont explorés par Googlebot et transmettent l’équité des liens internes à leurs cibles. Les pages liées depuis la navigation principale reçoivent généralement une priorité d’exploration plus élevée et des signaux PageRank internes plus forts. Enfouir des pages importantes derrière plusieurs niveaux de sous-menus réduit leur équité de lien effective. Gardez vos pages les plus importantes stratégiquement à un ou deux clics de la page d’accueil via le menu principal.