Le menu est le squelette de votre site. Un visiteur le scanne en quelques secondes: si l’endroit où cliquer n’est pas clair, il quitte la page. L’outil de base de WordPress sous «Apparence → Menus» assemble une navigation en une minute, mais le résultat ressemble à une simple chaîne de texte. Pas d’icônes, pas de comportement sticky au défilement, pas de version mobile correcte.

Le problème est plus profond qu’il n’y paraît: la fonctionnalité par défaut suffit les premiers jours après le lancement, mais très vite vous avez besoin de choses qui n’existent tout simplement pas dans le cœur. Des icônes pour les éléments de menu, un bouton de connexion directement dans la navigation, un shortcode pour insérer un menu dans le corps d’un article, un panneau mobile intelligent: tout cela nécessite soit du code, soit une extension.

Cet article couvre les deux approches: des ajustements légers via functions.php et style.css ainsi que les meilleures extensions activement maintenues pour les menus avancés. Le contenu fonctionne avec les thèmes classiques, les thèmes bloc et en combinaison avec n’importe quel framework populaire.

💡 Aperçu rapide:

• Installez l’extension Menu Icons et ajoutez des icônes aux éléments de menu en cinq minutes sans code
• Insérez la fonction wp_loginout dans functions.php, et un bouton de connexion apparaît directement dans la navigation
• Enregistrez un shortcode de menu et affichez un menu prêt à l’emploi n’importe où sur le site
• Rendez le menu sticky au défilement avec trois lignes de CSS ou l’une des trois extensions
• Choisissez un constructeur avancé parmi trois options: UberMenu, Max Mega Menu ou QuadMenu
• Configurez la navigation mobile avec WP Mobile Menu ou Mobi, dotés d’une interface adaptée au tactile

1. Icônes d’éléments de menu via Menu Icons

Un moyen rapide d’animer la navigation: ajoutez des icônes à côté des noms de rubrique. L’œil «accroche» une icône avant le texte, et après quelques visites, l’icône reste en mémoire mieux que n’importe quel libellé.

L’extension gratuite Menu Icons de l’équipe ThemeIsle gère cette tâche, avec plus de 400 000 installations actives sur WordPress.org et une note de 4,4. Aucun code requis.

Étapes:

• Installez l’extension via «Extensions → Ajouter» et recherchez «Menu Icons»
• Activez-la et allez dans «Apparence → Menus»
• Dépliez n’importe quel élément, un bloc de sélection d’icône apparaît
• Choisissez une icône parmi Dashicons (intégré à WordPress), Font Awesome, ou téléversez la vôtre
• Ajustez la position et la taille, puis enregistrez

Sous le capot, l’extension ajoute une classe CSS avec l’icône à l’élément <li>: une solution propre sans conflit de thème. Elle prend en charge Dashicons, Font Awesome, Elusive Icons et Genericons. Fonctionne avec tout menu enregistré via le wp_nav_menu standard.

🔗 Menu Icons sur WordPress.org

2. Bouton de connexion et de déconnexion directement dans le menu

Si votre site propose une inscription, les utilisateurs ont besoin d’un accès rapide sans chercher la page /wp-login.php. Un lien «Connexion» ou «Déconnexion» se trouve directement dans le menu principal et change automatiquement selon le statut.

Cela se résout avec une fonction dans functions.php:

1
function add_login_logout_link($items, $args) {
2
    $loginoutlink = wp_loginout('index.php', false);
3
    $items .= '<li>'. $loginoutlink .'</li>';
4
    return $items;
5
}
6
add_filter('wp_nav_menu_items', 'add_login_logout_link', 10, 2);

L’extrait s’accroche à wp_nav_menu_items et ajoute un <li> avec le lien à la fin de n’importe quel menu. La fonction wp_loginout() détecte le statut toute seule: si l’utilisateur est déconnecté, elle affiche «Connexion»; s’il est authentifié, «Déconnexion» avec une redirection vers la même page.

Après avoir enregistré le fichier, rechargez le site et vérifiez les deux états. Si vous devez rediriger l’utilisateur vers une page spécifique après la connexion, remplacez le premier argument de wp_loginout() de 'index.php' par l’URL souhaitée.

3. Shortcode pour afficher un menu n’importe où

WordPress vous permet d’assigner un menu à l’en-tête, au pied de page ou à une zone de barre latérale, exactement là où le thème a prévu de l’espace. Mais que faire si vous avez besoin d’un menu à l’intérieur d’un article, sur une page d’atterrissage ou dans un widget texte?

La réponse consiste à enregistrer votre propre shortcode:

1
function menu_function($atts, $content = null) {
2
    extract(
3
        shortcode_atts(
4
            array( 'name' => null, ),
5
            $atts
6
        )
7
    );
8
    return wp_nav_menu(
9
        array(
10
            'menu' => $name,
11
            'echo' => false
12
        )
13
    );
14
}
15
add_shortcode('menu', 'menu_function');

Ajoutez le code à functions.php, enregistrez, et n’importe où sur le site écrivez:

[menu name="main-menu"]

Prenez le nom depuis «Apparence → Menus», là où il apparaît au-dessus de la liste des éléments. Le shortcode appelle le wp_nav_menu() standard avec une sortie supprimée ('echo' => false) et retourne le balisage HTML terminé.

De cette façon, vous pouvez conserver une navigation commune dans le pied de page, une navigation supplémentaire dans la barre latérale d’un article spécifique, et assembler un menu séparé pour une page d’atterrissage sans aucune dépendance au thème.

4. Champ de recherche dans la barre de navigation

Le widget de recherche standard de WordPress vit dans la barre latérale. Mais s’il n’y a pas de barre latérale ou qu’elle passe en bas sur mobile, les visiteurs ne trouveront tout simplement pas la recherche. Déplaçons-la directement dans le menu.

Version de base utilisant la même technique de filtre wp_nav_menu_items:

1
add_filter( 'wp_nav_menu_items','add_search_box', 10, 2 );
2
function add_search_box( $items, $args) {
3
    $items .= '<li>'. get_search_form( false ). '</li>';
4
    return $items;
5
}

La fonction get_search_form(false) retourne le formulaire de recherche en HTML sans l’afficher à l’écran. Le champ s’attachera au dernier élément du menu; vous aurez probablement besoin de le positionner. Ajoutez une classe CSS au <li>:

1
$items .= '<li class="searchbox-position">'. get_search_form( false ). '</li>';

Et dans le style.css de votre thème, précisez les marges:

1
.searchbox-position {
2
    margin-top: 15px;
3
    margin-right: 20px;
4
}

Trois lignes de PHP et quelques lignes de CSS. Résultat: le champ de recherche reste toujours visible, quelle que soit la résolution.

5. Menu fixe au défilement

Un menu fixe, c’est lorsque la barre de navigation reste collée en haut de l’écran et suit l’utilisateur pendant qu’il fait défiler la page. C’est pratique sur les pages d’atterrissage, les articles longs et les boutiques en ligne: plus besoin de remonter pour accéder à une autre section.

Méthode 1: CSS (gratuit, sans extension)

Identifiez le sélecteur du menu principal dans votre thème, généralement .nav-menu, .genesis-nav-menu ou .main-navigation. Ajoutez ceci à votre style.css:

1
.nav-menu {
2
    position: fixed;
3
    background: #333;
4
    top: 0px;
5
    right: 0px;
6
    left: 0px;
7
    z-index: 99;
8
}

La ligne clé est position: fixed. Elle retire le bloc du flux et le fixe par rapport à la fenêtre du navigateur. top: 0; right: 0; left: 0 étire le menu sur toute la largeur. Ajoutez un padding supérieur au contenu pour que le menu ne recouvre pas l’en-tête.

La méthode CSS présente un inconvénient: une fois fixé, le menu sort du flux et le contenu «saute» vers le haut. On résout cela en ajoutant un padding-top au body égal à la hauteur du menu.

Méthode 2: extensions (contrôle plus fin, sans code)

Si vous préférez ne pas toucher aux fichiers du thème, voici trois outils éprouvés.

myStickymenu est une extension gratuite qui compte plus de 200 000 installations actives sur WordPress.org et une note de 4,6. Elle s’attache à la classe CSS de navigation de votre thème; il suffit de la renseigner dans les réglages. Elle est responsive: sur mobile, l’effet sticky est automatiquement désactivé. Elle propose un champ pour des styles CSS personnalisés et un mode «collage avec délai» basé sur le nombre de pixels défilés.

Sticky Menu (or Anything!) On Scroll est une autre option gratuite capable de «coller» n’importe quel élément via un sélecteur CSS: pas seulement un menu, mais aussi un logo, un en-tête complet ou un bouton. Elle demande une compréhension de base du HTML et du CSS pour trouver le bon sélecteur, mais offre une liberté totale.

UberMenu Sticky Extension est un module complémentaire de l’extension UberMenu, vendu 8 $. Si UberMenu est déjà installé, l’extension ajoute le mode sticky d’un simple clic. Sur mobile, elle se désactive automatiquement pour ne pas encombrer l’écran.

6. Supprimer des éléments de menu dans l’administration WordPress

Lorsque vous remettez un site à un client ou donnez un accès à des auteurs, l’administration standard est trop «riche»: plus de 10 sections, dont beaucoup sont inutiles pour l’utilisateur, voire dangereuses. Les réglages des extensions et du thème doivent rester accessibles uniquement aux administrateurs.

Le code ci-dessous supprime toutes les sections de premier niveau pour tous les utilisateurs, à l’exception des administrateurs:

1
if (!current_user_can( 'manage_options' )) {
2
    add_action( 'admin_menu', 'my_remove_menus', 999 );
3
}
4
function my_remove_menus() {
5
    remove_menu_page( 'index.php' );                  //Dashboard
6
    remove_menu_page( 'edit.php' );                   //Posts
7
    remove_menu_page( 'upload.php' );                 //Media
8
    remove_menu_page( 'edit.php?post_type=page' );    //Pages
9
    remove_menu_page( 'edit-comments.php' );          //Comments
10
    remove_menu_page( 'themes.php' );                 //Appearance
11
    remove_menu_page( 'plugins.php' );                //Plugins
12
    remove_menu_page( 'users.php' );                  //Users
13
    remove_menu_page( 'tools.php' );                  //Tools
14
    remove_menu_page( 'options-general.php' );        //Settings
15
}

Ce snippet se place dans functions.php. La condition !current_user_can('manage_options') exclut les administrateurs; eux voient tout. Les autres rôles obtiennent une liste allégée selon ce que vous laissez.

Ne retirez que les lignes remove_menu_page dont vous avez besoin. Par exemple, pour un éditeur, vous pourriez conserver «Articles», «Médias» et «Pages» tout en supprimant tout le reste. Remarque importante: la fonction masque les éléments du menu, mais ne bloque pas l’accès direct par URL. Pour un verrouillage complet des pages, configurez les capacités dans le rôle utilisateur.

7. Plugins avancés pour la création de menus

Quand l’éditeur standard ne suffit plus, vous avez besoin de méga menus avec images, onglets, formulaires et éléments dynamiques. Voici trois plugins activement maintenus, adaptés à différents besoins et budgets.

7.1 UberMenu: le constructeur le plus riche en fonctionnalités

Un vétéran du marché avec plus de 43 000 ventes sur CodeCanyon. Il crée des méga menus responsives avec prise en charge du tactile. Vous pouvez placer des images, des vidéos, des cartes et un formulaire de contact prêt à l’emploi dans les sous-menus. Plus de 50 paramètres de style avec aperçu en direct, génération automatique des sous-menus à partir du contenu et onglets sous les éléments. Il s’intègre avec WooCommerce: peut récupérer dynamiquement les catégories de produits.

Prix: à partir de 26 $. 🔗 UberMenu sur CodeCanyon

7.2 Max Mega Menu: le leader gratuit

Le plugin de méga menu gratuit le plus populaire sur WordPress.org: plus de 400 000 installations actives et une note de 4,8. Il construit des méga menus par glisser-déposer dans l’écran standard «Apparence → Menus», sans interface séparée. Il prend en charge les grilles de colonnes, les widgets dans les sous-menus, les icônes et le mode off-canvas pour le mobile. Le script frontend pèse moins de 2 Ko compressé, ce qui n’impacte pas la vitesse du site.

• Avantages: intégré à l’interface native des menus WordPress, poids du script minimal, widgets dans les sous-menus, la version gratuite couvre 90% des cas d’usage
• Inconvénients: certains styles avancés et les menus à onglets sont réservés à la version Pro (29 $/an)
• Prix: Gratuit / Pro à partir de 29 $/an
• Téléchargement: 🔗 Max Mega Menu sur WordPress.org

7.3 QuadMenu: onglets, carrousels et personnalisation complète

QuadMenu transforme le menu standard en méga menu avec onglets et carrousels, offrant plus de fonctionnalités que Max Mega Menu mais avec une courbe d’apprentissage un peu plus marquée. Il prend en charge les dispositions verticales et horizontales, l’intégration avec Elementor et Beaver Builder, les Google Fonts et plus de 2 000 icônes Font Awesome. Thèmes sombre et clair prêts à l’emploi, version mobile responsive avec panneau off-canvas.

• Avantages: onglets et carrousels à l’intérieur du menu, intégration poussée avec les constructeurs de pages, adapté aux développeurs (hooks et filtres)
• Inconvénients: configuration initiale plus complexe que Max Mega Menu, certaines fonctionnalités uniquement dans la version payante
• Prix: Gratuit / Premium à partir de 15 $/an
• Téléchargement: 🔗 QuadMenu sur WordPress.org

8. Menus mobiles pour smartphones et tablettes

Le trafic mobile a dépassé celui des ordinateurs depuis longtemps. Si le menu devient illisible sur un téléphone, les visiteurs partent. Un thème responsive adapte le menu desktop aux écrans étroits, mais la structure reste la même: cinq ou six éléments en ligne deviennent une longue liste verticale. Un plugin spécialisé apporte un bouton hamburger, des gestes de balayage et une optimisation tactile.

8.1 WP Mobile Menu: un off-canvas rapide pour n’importe quel site

Le plugin gratuit de menu mobile le plus populaire sur WordPress.org: plus de 80 000 installations actives et une note de 4,7. Il ajoute un panneau hors toile qui glisse lorsque l’on appuie sur le bouton hamburger. Il prend en charge trois niveaux d’imbrication, la recherche dans le menu mobile, les icônes et la personnalisation des couleurs. Le comportement selon les résolutions d’écran se configure séparément.

• Avantages: mise en place minimale (fonctionne immédiatement après activation), adaptatif (s’affiche uniquement sur mobile), n’entre pas en conflit avec les thèmes
• Inconvénients: certains styles avancés et l’intégration WooCommerce sont dans la version Pro (19 $/an)
• Prix: Gratuit / Pro à partir de 19 $/an
• Téléchargement: 🔗 WP Mobile Menu sur WordPress.org

8.2 Mobi: constructeur de menu mobile par glisser-déposer

Un constructeur de menu intuitif par glisser-déposer. Le menu peut être placé en haut ou en bas de l’écran. Il comprend plus de 700 icônes intégrées, un nombre illimité d’icônes de réseaux sociaux sur le panneau et les polices Google Fonts pour le style. Vous pouvez contrôler la visibilité du menu pour les visiteurs et les utilisateurs connectés séparément. Bien adapté aux sites où le menu mobile doit ressembler à une interface autonome plutôt qu’à une copie réduite de la version bureau.

Prix: à partir de 16 $. 🔗 Mobi sur CodeCanyon

⁉️🤔 Foire aux questions

Puis-je créer un menu entièrement sans extension, uniquement avec du code?

Oui, toutes les techniques décrites (icônes, effet collant, shortcode, bouton de connexion) peuvent être implémentées via functions.php et style.css sans installer d’outils tiers. Les extensions font simplement gagner du temps et offrent une interface graphique à ceux qui préfèrent ne pas toucher au code. Si vous êtes à l’aise avec PHP et CSS, les extensions ne sont pas obligatoires. Mais lorsque vous avez besoin de méga menus ou d’un panneau hors toile avec des animations, une extension prête à l’emploi vous fait économiser des heures de codage manuel.

Quelle extension choisir pour une boutique WooCommerce?

Pour une boutique, un méga menu avec les catégories de produits, des images et des filtres est essentiel. UberMenu est le plus performant ici: il récupère dynamiquement les catégories WooCommerce et construit les sous-menus à la volée. Une alternative gratuite est Max Mega Menu avec des widgets dans les sous-menus: les images des catégories sont récupérées via le widget WooCommerce standard, et la recherche obtient une ligne séparée.

Que faire si le site cesse de se charger après avoir ajouté du code dans functions.php?

Restaurez le fichier d’origine via FTP ou le gestionnaire de fichiers de votre hébergement. Avant toute modification de functions.php, faites une sauvegarde. Une autre approche sûre est l’extension Code Snippets: elle vous permet d’ajouter des extraits PHP via l’administration et désactive automatiquement le code en cas d’erreur fatale, ce qui remet le site en état de marche.

Dois-je mettre à jour le menu après avoir changé de thème WordPress?

Les menus sont liés à une zone d’affichage (emplacement) que le thème enregistre. Lorsque vous changez de thème, ces zones changent et vous devez réaffecter le menu dans «Apparence → Menus», sous l’onglet «Gérer les emplacements». Les éléments eux-mêmes, leur ordre et leur imbrication sont conservés; seule la liaison à l’emplacement est perdue.

Comment vérifier que le menu mobile fonctionne sur tous les appareils?

Ouvrez le site en mode design responsive dans Chrome DevTools (F12 → icône d’appareil) et parcourez six points de rupture: 320 px, 375 px, 414 px, 768 px, 1024 px, 1280 px. Vérifiez le bouton hamburger (il doit être au-dessus du contenu, sans être recouvert), la vitesse de réponse de l’animation et la visibilité de tous les éléments du menu sans défilement horizontal. Les extensions populaires comme WP Mobile Menu vous permettent de définir manuellement le point de rupture, ce qui vous permet de spécifier différentes largeurs de déclenchement pour votre thème spécifique.

Quoi utiliser pour votre projet: le récapitulatif final

En bref: exploitez d’abord les capacités natives de WordPress et de légères adaptations CSS, puis ajoutez des extensions. Cela permet de garder un empilement technique minimal, un site rapide et une navigation exactement adaptée aux besoins de vos lecteurs.

• Blog simple ou site vitrine: commencez par Menu Icons (gratuit) et un menu collant avec trois lignes de CSS. Cela suffit pour que la navigation cesse d’avoir l’air brute.
• Site avec inscription: ajoutez un bouton de connexion via wp_loginout(). Les utilisateurs cesseront de chercher la page de connexion.
• Page d’atterrissage ou article long: le shortcode [menu] place des blocs de navigation n’importe où dans le corps de la page.
• Boutique e-commerce ou portail de contenu: vous avez besoin ici d’un méga menu. Optez pour UberMenu si le budget le permet et que vous voulez un maximum de fonctionnalités, ou pour Max Mega Menu pour les usages courants (gratuit et sans perte de vitesse).
• Audience majoritairement mobile: WP Mobile Menu couvre 9 scénarios sur 10: il s’installe en une minute et fournit immédiatement un panneau hors toile avec recherche. Si vous avez besoin d’une interface mobile plus autonome, regardez du côté de Mobi.

Adoptez cette règle: une extension par tâche. N’installez pas un méga menu juste pour quelques icônes, et n’écrivez pas de code pour un panneau hors toile alors qu’une extension le fait en une minute. L’équilibre entre la vitesse du site et la commodité de navigation est précisément ce qui retient les lecteurs sur la page.