Terrain 06 — Menus & navigation
⏱️ TL;DR — 20 mini-jeux
⭐⭐pour construire la navigation : le bloc Navigation (FSE), les menus classiques, sous-menus, liens custom, menus sociaux, header/footer. À la fin, tu sais mener un visiteur partout dans le site.
⚠️ Selon ton thème, tu navigues via l’Éditeur de site (thème par blocs) ou via Apparence → Menus (thème classique). Les deux sont couverts.
🕹️ Mini-jeu 1 — Repérer où vit la navigation ⭐⭐ 🛠️
But : savoir quel système tu utilises. Mission : détermine si ton thème gère la nav par bloc Navigation ou menus classiques.
✅ Solution
Thème par blocs → nav éditée dans l’Éditeur de site via le bloc Navigation (dans le header). Thème classique → Apparence → Menus. Le reste du terrain indique la variante quand ça diffère.
🕹️ Mini-jeu 2 — Créer un menu (bloc Navigation) ⭐⭐ 🛠️
But : un menu principal. Mission : ouvre le header et ajoute/édite le bloc Navigation. Étapes :
- Apparence → Éditeur → Modèles → Header (ou Motifs → parties).
- Sélectionne le bloc Navigation → ajoute des liens via
+.
✅ Solution
Le bloc Navigation est un menu géré comme n’importe quel bloc, stocké comme un contenu réutilisable (wp_navigation). Il vit typiquement dans la partie de gabarit Header.
🕹️ Mini-jeu 3 — Créer un menu (thème classique) ⭐⭐ 🛠️
But : l’ancienne voie, encore répandue. Mission : crée un menu dans Apparence → Menus. Étapes :
- Apparence → Menus → « Créer un menu » → nomme-le.
- Coche des pages à gauche → « Ajouter au menu » → Enregistrer.
✅ Solution
L’écran Menus classique reste utilisé par beaucoup de thèmes. On y assemble pages, articles, catégories, liens custom. Puis on l’assigne à un emplacement (jeu 8).
🕹️ Mini-jeu 4 — Ajouter des liens de pages ⭐ 🛠️
But : relier tes pages. Mission : ajoute Accueil, À propos, Contact au menu.
✅ Solution
Un lien de menu peut pointer une page (mis à jour si son URL change) ou une URL brute. Préfère les liens de page pour les contenus internes : plus robustes.
🕹️ Mini-jeu 5 — Un lien personnalisé ⭐⭐ 🛠️
But : pointer où tu veux.
Mission : ajoute un lien custom vers https://exemple.com.
✅ Solution
Le lien personnalisé accepte n’importe quelle URL (externe, ancre, mailto:). Dans le bloc Navigation : + → « Lien personnalisé ». En menu classique : encart « Liens personnalisés ».
🕹️ Mini-jeu 6 — Un sous-menu déroulant ⭐⭐ 🛠️
But : hiérarchiser la nav. Mission : place « Équipe » sous « À propos ». Étapes :
- Bloc Navigation : ajoute un bloc Sous-menu (ou glisse un item « sous » un autre).
- Menu classique : glisse l’item vers la droite (indentation).
✅ Solution
Un item indenté devient enfant → menu déroulant au survol. Attention à ne pas trop imbriquer (UX mobile). Le rendu du dropdown dépend du thème.
🕹️ Mini-jeu 7 — Réordonner les items ⭐ 🛠️
But : l’ordre de lecture. Mission : mets « Contact » en dernier.
✅ Solution
Glisser-déposer (menu classique) ou flèches/Vue en liste (bloc Navigation). L’ordre du menu = l’ordre de lecture du visiteur : mets le plus important à gauche.
🕹️ Mini-jeu 8 — Emplacements de menu ⭐⭐ 🛠️
But : dire OÙ s’affiche un menu. Mission : assigne ton menu à l’emplacement « Principal ». Étapes :
- Menu classique : onglet « Gérer les emplacements » → associe menu ↔ emplacement.
✅ Solution
Un thème déclare des emplacements (principal, pied de page…). Un menu n’apparaît que s’il est assigné à un emplacement. En FSE, l’emplacement = là où tu poses le bloc Navigation.
🕹️ Mini-jeu 9 — Lier une catégorie ⭐⭐ 🛠️
But : naviguer vers une archive. Mission : ajoute un lien vers la catégorie « Tutoriels ».
✅ Solution
Un menu peut pointer une archive de catégorie/étiquette (/category/tutoriels/). Pratique pour une nav de blog par thématique. En menu classique : encart « Catégories ».
🕹️ Mini-jeu 10 — Lien vers une ancre ⭐⭐⭐ 🛠️
But : aller à une section précise.
Mission : crée un item pointant #tarifs d’une page.
✅ Solution
Un lien custom /page/#tarifs saute à l’ancre (définie au terrain 05, jeu 20). Combinaison menu + ancre = navigation intra-page fluide (one-page sites).
🕹️ Mini-jeu 11 — Ouvrir dans un nouvel onglet ⭐⭐ 🛠️
But : liens externes propres. Mission : fais ouvrir le lien externe dans un nouvel onglet. Étapes :
- Item de menu → options → coche « Ouvrir dans un nouvel onglet ».
- (Menu classique : Options de l’écran → active « Ouvrir le lien dans un nouvel onglet ».)
✅ Solution
WordPress ajoute target="_blank" et rel="noopener" (sécurité). Réserve le nouvel onglet aux liens externes : pour l’interne, garde le même onglet (UX).
🕹️ Mini-jeu 12 — Un menu social ⭐⭐ 🛠️
But : icônes réseaux. Mission : ajoute un bloc Icônes de réseaux sociaux dans le pied de page. Étapes :
- Éditeur → Footer →
/icônes sociales→ ajoute LinkedIn, GitHub, X.
✅ Solution
Le bloc Icônes de réseaux sociaux affiche des liens sociaux avec logos, taille/couleur réglables. Colle l’URL du profil, l’icône se choisit automatiquement. Idéal footer.
🕹️ Mini-jeu 13 — Le menu burger (mobile) ⭐⭐ 👁️
But : navigation responsive. Mission : réduis la fenêtre et observe le menu se replier en burger.
✅ Solution
Le bloc Navigation bascule automatiquement en menu burger sous une largeur seuil (réglable : « Toujours »/« Mobile »/« Jamais » + point de rupture). Vérifie toujours la nav en vue mobile.
🕹️ Mini-jeu 14 — Marquer la page courante ⭐⭐⭐ 👁️
But : repère visuel. Mission : navigue et vois quel item est « actif ».
✅ Solution
WordPress ajoute des classes (current-menu-item, aria-current) à l’item de la page en cours : le thème le surligne. Base d’accessibilité (savoir où on est). Stylable en CSS si le thème ne le fait pas.
🕹️ Mini-jeu 15 — Un menu de pied de page ⭐⭐ 🛠️
But : navigation secondaire. Mission : crée un second menu (Mentions, Confidentialité, Contact) dans le footer.
✅ Solution
Un site a souvent 2+ menus : principal (header) et légal (footer). En FSE : un 2e bloc Navigation dans le footer. En classique : un 2e menu assigné à l’emplacement « Footer ».
🕹️ Mini-jeu 16 — Un fil d’Ariane ⭐⭐⭐ 👁️
But : aider à se situer. Mission : ajoute un fil d’Ariane (bloc natif si dispo, sinon plugin SEO).
✅ Solution
Le fil d’Ariane (breadcrumbs) montre le chemin (Accueil › Catégorie › Article). Fourni par certains thèmes/blocs ou les plugins SEO (Yoast/Rank Math, terrain 08). Bon pour l’UX et le SEO.
🕹️ Mini-jeu 17 — Retirer un item proprement ⭐ 🛠️
But : nettoyer. Mission : supprime un item de menu devenu inutile.
✅ Solution
Supprimer un item ne supprime pas la page cible : ça retire juste le lien du menu. Distinction utile : le menu est une vue de navigation, pas le contenu lui-même.
🕹️ Mini-jeu 18 — Ajouter une recherche à l’en-tête ⭐⭐⭐ 🛠️
But : enrichir le header. Mission : insère un bloc Recherche à côté de la navigation.
✅ Solution
Le header FSE accepte d’autres blocs que la nav : Recherche, logo, bouton, panier (WooCommerce). Compose ton en-tête comme une page. Attention à l’alignement (Row/flex) et au responsive.
🕹️ Mini-jeu 19 — Deux menus, deux publics ⭐⭐⭐ 🛠️
But : navigation contextuelle. Mission : imagine un menu « connecté » (compte, déconnexion) vs « visiteur » (connexion) — note comment tu t’y prendrais.
✅ Solution
Nativement, le menu est le même pour tous. Afficher des items selon l’état connecté demande une extension (menus conditionnels) ou du code (filtre wp_nav_menu_items, terrain 12). Bon exemple de limite no-code → besoin de dev.
🕹️ Mini-jeu 20 — Récap navigation ⭐⭐ 🛠️
But : valider le terrain. Mission : un site avec header (logo + nav + recherche), footer (menu légal + social), un sous-menu, un lien externe en nouvel onglet, une nav mobile testée.
✅ Solution
Tu sais construire une navigation complète, header et footer, desktop et mobile, interne et externe. La nav est le squelette d’orientation du site. Place à l’apparence globale (terrain 07).
Terrain suivant : 07 — Apparence & personnalisation.