BTS NDRC, épreuve E5B : tutoriel WordPress

Créer un menu hors champ

Sur un téléphone, le menu ne tient pas dans l'en-tête : il se range derrière un bouton, souvent trois traits, et s'ouvre par-dessus la page ou depuis le bord de l'écran. C'est le menu hors champ. Bien conçu, il mène le client mobile en un geste aux pages essentielles ; pour l'entreprise, c'est le menu de tous les visiteurs qui consultent le site sur leur téléphone.

Dans la circulaire

Famille « Menu » de la liste WordPress : « Créer un menu hors champ » (annexe VI-3 de la circulaire nationale d'organisation, session 2026).

Critères de la grille d'évaluation concernés : 3. « la cohérence entre les techniques, les outils mobilisés, les contenus et les moyens de diffusion » ; 6. « la pertinence des choix et des actions menées pour développer les ventes et créer de la valeur ».

Où le trouver

Le menu : Apparence › Menus, « créez un nouveau menu », emplacement Menu hors-champ.

Son affichage : Apparence › Personnaliser › En-tête, aperçu mobile, zone « Off Canvas » (section « Hors-champ ») et élément « Bouton ouvrir/fermer ».

Les étapes

  1. Créer le menu : Apparence > Menus, lien créez un nouveau menu. Saisir le Nom du menu, « Menu mobile » par exemple, cocher l'emplacement Menu hors-champ dans « Réglages du menu », puis cliquer sur Créer le menu. Tant que le menu n'est pas créé, la colonne « Ajouter des éléments de menu » reste grisée.

    Capture 1. Apparence > Menus, création d'un menu : encadrés, le lien « créez un nouveau menu », le nom du menu, l'emplacement « Menu hors-champ » et le bouton « Créer le menu » :

    Écran Menus de WordPress après un clic sur le lien créez un nouveau menu, encadré en rouge : la colonne Ajouter des éléments de menu est grisée ; à droite, le champ Nom du menu, vide, encadré en rouge, la phrase Donnez à votre menu un nom, puis cliquez sur Créer le menu, et les Réglages du menu, avec les cinq emplacements, dont Menu hors-champ, décoché, encadré en rouge ; en bas, le bouton Créer le menu, encadré en rouge.

    Voir la capture en grand

  2. Le remplir : ajouter les pages utiles depuis la colonne de gauche, les ordonner (voir le tutoriel sur les menus), puis cliquer sur Enregistrer le menu. L'emplacement se choisit aussi plus tard, dans l'onglet « Gérer les emplacements ».
  3. Régler l'affichage : Apparence > Personnaliser > En-tête. Passer l'aperçu en mode mobile, avec les icônes en bas du panneau : le constructeur d'en-tête montre alors la rangée du téléphone, avec le Bouton ouvrir/fermer, et la zone Off Canvas, qui contient l'élément Menu hors-champ. Cet élément affiche le menu attribué à l'emplacement du même nom ; son lien « Configurez le menu ici. » mène aux emplacements des menus.
  4. Cliquer sur la roue de la zone Off Canvas : la section Hors-champ s'ouvre. « Type d'entête » choisit la forme du menu : Volte-face, un panneau qui glisse depuis le bord gauche ou droit, Plein écran ou Liste déroulante, sous l'en-tête, le choix du modèle. « Cible HTML du permutateur » règle l'ouverture des sous-menus, par la flèche (« Icône ») ou par tout le libellé (« Lien ») ; « Alignement du contenu » place les liens à gauche, au centre ou à droite.

    Capture 2. Apparence > Personnaliser > En-tête, aperçu mobile, section « Hors-champ » : encadrés, le type d'entête, le bouton du menu dans l'aperçu, la zone Off Canvas et l'élément « Bouton ouvrir/fermer » :

    Outil de personnalisation en aperçu mobile : à gauche, la section Hors-champ, onglet General, avec Type d'entête (Volte-face, Plein écran, Liste déroulante, choisie), encadré en rouge, puis Déplacer le corps, Cible HTML du permutateur et Alignement du contenu ; au centre, l'aperçu du téléphone, avec le logo, le titre Alia Nature coupé sur quatre lignes et le bouton à trois traits, encadré en rouge ; en bas, le constructeur d'en-tête mobile, avec la zone Off Canvas et son élément Menu hors-champ, encadrée en rouge, et, dans la rangée principale, Titre du site et logo à gauche et Bouton ouvrir/fermer à droite, encadré en rouge.

    Voir la capture en grand

  5. Un clic sur l'élément Bouton ouvrir/fermer règle le bouton lui-même : son icône, son style (« Plein », « Contours uniquement », « Minimal ») et un « Libellé du menu » affiché à côté, « Menu » par exemple.
  6. Cliquer sur Publier, puis contrôler dans l'aperçu mobile et sur un téléphone : un toucher sur le bouton ouvre le menu, la croix le referme.

    Capture 3. Le menu mobile du modèle, ouvert dans l'aperçu : encadrés, le bouton de fermeture et la liste des pages :

    Aperçu mobile du site Alia Nature, menu ouvert sous l'en-tête : le bouton marqué d'une croix, encadré en rouge ; dessous, encadrée en rouge, la liste des pages par ordre alphabétique : Accueil, Conditions Générales de Vente, Contactez-nous, Devenez conseiller, FAQ, Fonctionnement de l'activité de VDI, Nos engagements, Nos produits, et la suite.

    Voir la capture en grand

Attention

Sur le modèle, aucun menu n'est attribué à l'emplacement « Menu hors-champ » : le menu mobile affiche alors les quinze pages publiées par ordre alphabétique, y compris la « Page d'exemple » de WordPress et des pages absentes du menu principal (capture 3). Créer le menu hors champ, c'est choisir ce que voit le client sur son téléphone.

Captures réalisées sur le site modèle Alia Nature (WordPress 7.0.2, thème Astra 4.13, extension Spectra) : selon la version installée le jour de l'épreuve, un libellé peut changer.

Bien concevoir le menu mobile

Le menu hors champ se lit sur un petit écran et se manipule au pouce : peu d'entrées, des libellés courts, l'essentiel en premier. Exemple pour le menu mobile d'Alia Nature :

Exemple : le menu mobile d'Alia Nature
Choix Réussi À éviter
ContenuCinq pages : Nos produits, Notre concept, Notre blog, Devenez conseiller, Contactez-nousLes quinze pages du site, « Page d'exemple » comprise, comme sur le modèle
OrdreLes pages qui font agir en premier : produits, devenir conseillerL'ordre alphabétique, qui place « Conditions Générales de Vente » en deuxième position
En-têteLe logo et un bouton de menu bien visible, avec le libellé « Menu »Le titre « Alia Nature » coupé en quatre morceaux à côté du logo, comme sur le modèle
  • Garder les mêmes libellés que dans le menu principal, pour que le client s'y retrouve d'un écran à l'autre.
  • Choisir « Volte-face » ou « Liste déroulante » pour un menu court, « Plein écran » si les liens doivent être très lisibles.
  • Tester l'ouverture et la fermeture du menu dans l'aperçu mobile, puis sur un vrai téléphone.

Sur le modèle, le menu hors champ n'a jamais été créé : sur téléphone, le bouton du menu ouvre une liste déroulante des quinze pages par ordre alphabétique, et le titre du site se coupe en quatre lignes à côté du logo (captures 2 et 3). C'est l'exemple à ne pas suivre.

À l'épreuve

Exemple de consigne

Beaucoup de clientes d'Alia Nature consultent le site sur leur téléphone. Créez un menu « Menu mobile » de cinq entrées (Nos produits, Notre concept, Notre blog, Devenez conseiller, Contactez-nous), attribuez-le à l'emplacement Menu hors-champ, affichez-le dans un panneau latéral (« Volte-face ») et contrôlez le résultat dans l'aperçu mobile.

Ce que l'examinateur vérifie

  • Le menu créé, avec les cinq entrées dans l'ordre demandé, sur l'emplacement Menu hors-champ.
  • Le type « Volte-face » choisi et publié.
  • Un menu qui s'ouvre et se ferme correctement sur mobile.
  • Le menu principal de l'ordinateur inchangé.

Les erreurs fréquentes

  • Créer le menu sans cocher l'emplacement Menu hors-champ : le téléphone garde la liste de toutes les pages.
  • Régler le type d'affichage sans cliquer sur « Publier ».
  • Chercher la zone Off Canvas dans l'aperçu ordinateur : elle n'apparaît qu'en mode tablette ou mobile.
  • Modifier le menu principal en croyant modifier le menu mobile.

L'essentiel à retenir

  • Apparence > Menus : créer le menu, cocher l'emplacement « Menu hors-champ », ajouter les pages, « Enregistrer le menu ».
  • Apparence > Personnaliser > En-tête, aperçu mobile : zone Off Canvas (Volte-face, Plein écran, Liste déroulante) et Bouton ouvrir/fermer, puis « Publier ».
  • Sans menu sur cet emplacement, le modèle affiche toutes les pages par ordre alphabétique.

Voir aussi

Dans la série des tutoriels WordPress :

Dans le tutoriel WordPress complet :

Documentation officielle de WordPress, en anglais : l'écran Menus.

Tous les tutoriels WordPress