WordPress 5.9 révolutionne la création de sous-menus avec les thèmes FSE et classiques.
- Identification de l’environnement : thèmes classiques via Apparence > Menus, thèmes FSE via l’Éditeur de site
- Structure hiérarchique : glisser-déposer pour créer des sous-éléments avec indentation visuelle, maximum deux niveaux
- Personnalisation avancée : titre de navigation, classes CSS, attributs ARIA pour l’accessibilité
- Optimisation responsive : transformation automatique en menu burger sur mobile, styles configurables
La navigation reste l’épine dorsale de tout site WordPress efficace. Depuis l’arrivée des thèmes basés sur des blocs en janvier 2022 avec WordPress 5.9, créer des sous-menus nécessite une approche adaptée à votre environnement technique. Que vous travailliez sur un thème classique ou FSE (Full Site Editing), maîtriser cette fonctionnalité transforme l’expérience utilisateur de vos projets.
Cette navigation hiérarchisée permet d’organiser logiquement vos contenus tout en respectant les bonnes pratiques d’ergonomie web. Comme un photographe organise ses clichés par séries thématiques, structurer vos menus demande une vision d’ensemble et une attention particulière aux détails.
Identifier votre environnement WordPress et choisir la méthode appropriée
Avant de plonger dans la création, déterminez quel type de thème anime votre site. Cette distinction conditionne entièrement votre approche technique. Les thèmes classiques utilisent l’Outil de personnalisation accessible via Apparence > Personnaliser, tandis que les thèmes FSE exploitent l’Éditeur de site disponible dans Apparence > Éditeur.
Pour les thèmes traditionnels, dirigez-vous vers Apparence > Menus ou Apparence > Personnaliser > Menus. Cette dernière option offre l’avantage d’une prévisualisation en temps réel, particulièrement utile lors de l’ajustement de structures complexes. L’interface présente une zone d’édition centrale entourée de panneaux latéraux pour ajouter différents types d’éléments.
Les thèmes FSE révolutionnent cette approche en intégrant la création de menus directement dans l’éditeur de contenu. Accédez à Apparence > Éditeur > Navigation pour découvrir une interface unifiée où les menus se construisent via le bloc Navigation. Cette méthode moderne s’avère particulièrement pertinente pour installer WordPress en général, chez 1&1 en particulier, car elle simplifie la personnalisation post-installation.
| Type de thème | Méthode d’accès | Interface |
|---|---|---|
| Classique | Apparence > Menus | Glisser-déposer traditionnel |
| FSE | Apparence > Éditeur | Bloc Navigation intégré |
Construire la structure de votre menu principal
La création débute par l’établissement d’une architecture claire. Cliquez sur « Créer un nouveau menu » et attribuez-lui un nom explicite comme « Menu principal » ou « Navigation header ». Cette nomenclature facilite la gestion ultérieure, surtout sur des projets comportant plusieurs zones de navigation.
L’attribution d’un emplacement de menu reste obligatoire pour l’affichage. Les thèmes proposent généralement plusieurs options : menu principal (header), menu secondaire, menu footer ou menu sidebar. Cochez l’emplacement approprié dans les « Réglages du menu » ou utilisez l’onglet « Gérer les emplacements » pour une vue d’ensemble.
Alimentez ensuite votre menu via les sections de gauche. Les pages statiques constituent l’ossature principale, créées préalablement dans Pages > Ajouter. Les catégories s’avèrent particulièrement utiles pour les blogs, permettant d’afficher automatiquement les articles par thématique. Évitez d’inclure directement des articles individuels ; préférez une page dédiée regroupant ces contenus.
Les liens personnalisés enrichissent vos possibilités en redirigeant vers des sites externes ou en créant des éléments non cliquables. Pour ce dernier cas, saisissez « # » dans le champ « Adresse web », ajoutez l’élément, puis supprimez cette valeur. Alternativement, utilisez « javascript :void(0); » pour un comportement plus propre techniquement.
Organiser vos sous-menus par la méthode du glisser-déposer
La création de sous-menus repose sur une manipulation visuelle intuitive. Sélectionnez l’élément destiné à devenir un sous-menu et décalez-le légèrement vers la droite par rapport à son futur parent. Cette indentation transforme automatiquement l’élément en « sous-élément », matérialisée par une ligne de connexion visuelle.
Cette technique du glisser-déposer permet de créer plusieurs niveaux hiérarchiques, bien que la pratique déconseille de dépasser deux niveaux pour préserver l’ergonomie. Un menu trop profond complexifie la navigation et nuit à l’expérience utilisateur, particulièrement sur mobile où l’espace d’affichage reste contraint.
L’organisation s’affine par réorganisation continue. L’élément positionné en première place s’affiche à gauche du menu, suivant les conventions de lecture occidentale. Respectez cette logique en plaçant l’accueil à gauche et le contact à droite, conformément aux attentes des visiteurs.
Pour les thèmes FSE, cliquez sur l’élément parent puis sélectionnez « Ajouter un sous-menu ». L’icône « + » permet d’insérer l’élément enfant, tandis que les flèches directionnelles gèrent l’ordre d’affichage. Cette approche unifiée simplifie la gestion tout en conservant la flexibilité nécessaire aux structures complexes.
- Sélectionnez l’élément à transformer en sous-menu
- Glissez-le légèrement vers la droite
- Vérifiez l’indentation visuelle
- Ajustez l’ordre si nécessaire
- Enregistrez les modifications
Personnaliser l’affichage et optimiser l’accessibilité
La personnalisation va bien au-delà de l’ajout d’éléments. Chaque item dispose d’options avancées accessibles en cliquant sur la flèche située à droite de son nom. Le titre de navigation modifie l’intitulé affiché sans affecter le titre de la page source, particulièrement utile pour raccourcir des noms trop longs.
L’attribut de titre affiche une infobulle au survol, bien que son usage reste limité dans les interfaces modernes. La cible du lien contrôle l’ouverture dans un nouvel onglet, recommandée pour les liens externes afin de conserver les visiteurs sur votre site.
Les classes CSS personnalisées permettent un contrôle granulaire de l’apparence via votre feuille de style. Cette fonctionnalité s’avère précieuse pour appliquer des styles spécifiques à certains éléments sans modifier l’ensemble du menu. La description s’affiche sous le titre principal selon les capacités du thème utilisé.
L’accessibilité des menus multiniveaux nécessite une attention particulière. Implémentez les attributs ARIA appropriés : aria-current="page" pour la page courante, aria-expanded="false/true" pour les boutons contrôlant les sous-menus. Cette optimisation technique améliore l’expérience des utilisateurs de technologies d’assistance tout en respectant les standards web modernes.
Les thèmes FSE enrichissent ces possibilités via l’onglet Styles : couleurs personnalisées, typographie ajustable, espacement configurable. L’onglet Réglages gère la justification, l’orientation et le comportement responsive, notamment la transformation automatique en menu burger sur mobile. Cette approche moderne s’adapte naturellement aux différentes tailles d’écran.
Pour des besoins avancés, cherchez les solutions comme placer vos uploads et images dans un sous-domaine, optimisant ainsi les performances de navigation sur des sites riches en médias. Cette stratégie technique complète parfaitement une architecture de menu bien pensée.