Menus et navigation

Module 4: Créer du contenu · Temps de lecture : 7 minutes

Objectif pédagogique : après cette leçon, vous saurez créer un menu clair, aussi bien dans un thème basé sur des blocs que dans un thème classique, et vous saurez ce qui fait un bon menu.

Notions clés : bloc de navigation, Éditeur de site, Apparence > Menus, emplacement de menu, sous-menu, lien personnalisé, menu mobile, menu de pied de page, texte de lien, accessibilité

Deux méthodes, selon votre thème

L'endroit où vous créez le menu dépend de votre thème (leçon 5.1) :

• Thème basé sur des blocs : le menu est un bloc de navigation dans l'entête du site. Vous le modifiez dans l'Éditeur de site (Apparence > Éditeur > Navigation, ou dans la partie de modèle Entête).
• Thème classique : vous créez le menu via Apparence > Menus et vous y choisissez un emplacement de menu proposé par le thème, comme « Menu principal » ou « Pied de page ».

Vous ne voyez pas Menus dans Apparence, uniquement Éditeur ? C'est que vous utilisez un thème basé sur des blocs. C'est une confusion fréquente après un changement de thème : « mon menu a disparu ». L'ancien menu existe toujours (il se trouve dans la base de données sous forme de liste d'éléments de menu), mais le nouveau thème regarde à un autre endroit. Dans l'Éditeur de site, vous pouvez importer un menu classique existant au niveau du bloc de navigation.

Ce que vous pouvez y mettre

Un élément de menu peut être :

• une page ou un article de votre site ;
• une catégorie (il renvoie alors vers l'archive de cette catégorie) ;
• un lien personnalisé : n'importe quelle adresse, y compris vers un autre site, ou une ancre à l'intérieur d'une page (/diensten/#prijzen) ;
• dans un thème basé sur des blocs, également d'autres blocs dans la navigation, comme un champ de recherche, des icônes de réseaux sociaux ou un bouton « Prendre rendez-vous ».

Vous pouvez faire glisser des éléments de menu les uns sous les autres pour en faire un sous-menu : dans un thème classique en les faisant glisser légèrement vers la droite, dans le bloc de navigation avec « Ajouter un sous-menu » ou en faisant glisser un élément sur un autre.

Un élément de menu renvoie vers une page, mais possède son propre libellé. Si vous modifiez ensuite le titre de la page, le libellé dans le menu ne change pas automatiquement (jamais dans un menu classique, et dans le bloc de navigation cela dépend de la façon dont vous avez ajouté l'élément). Pensez donc à vérifier aussi le menu après une modification de titre.

Un bon menu

Un menu n'est pas une table des matières de l'ensemble de votre site. C'est un panneau indicateur vers les quelques endroits où la plupart des visiteurs veulent se rendre. Quelques recommandations :

• Peu d'éléments principaux : cinq à sept environ. Au-delà, cela ne tient de toute façon pas sur un téléphone, et les visiteurs ne les lisent pas.
• Un seul niveau de sous-menu au maximum. Un sous-menu dans un sous-menu est difficile à utiliser sur un téléphone et déroutant pour les lecteurs d'écran.
• L'intitulé d'un sous-menu est aussi un lien. Dans de nombreux thèmes, un clic sur « Services » ouvre le sous-menu, mais « Services » est lui-même aussi une page. Veillez à ce que cette page existe et affiche quelque chose de pertinent, ou que l'élément soit clairement identifié comme un simple titre.
• Des mots simples que les visiteurs utiliseraient eux-mêmes : « Tarifs », pas « Nos possibilités d'investissement ».
• Le contact et l'action la plus importante (prendre rendez-vous, commander) doivent toujours être accessibles, souvent à droite du menu ou sous forme de bouton.
• Les liens juridiques (politique de confidentialité, conditions générales, paramètres des cookies) ont leur place dans un menu de pied de page, pas dans le menu principal. Mais toujours accessibles, sur chaque page (leçon 9.3).

Mobile et accessible

Sur un téléphone, le menu se replie généralement en un bouton à trois traits (le « menu hamburger »). Avec le bloc de navigation, vous définissez quand cela se produit (toujours, ou uniquement sur les petits écrans). Testez toujours sur un vrai téléphone :

• Pouvez-vous toucher chaque élément avec votre pouce, sans toucher par mégarde l'élément voisin ?
• Les sous-menus s'ouvrent-ils d'un simple toucher, et se referment-ils ensuite ?
• Le menu se ferme-t-il lorsque vous choisissez un élément ?

Pour l'accessibilité (visiteurs utilisant un lecteur d'écran ou naviguant uniquement au clavier), veillez à :

• Des textes de lien clairs. « Lire la suite » ou « Cliquez ici » ne veut rien dire si un lecteur d'écran lit tous les liens les uns à la suite des autres. « En savoir plus sur nos horaires d'ouverture », si.
• Une navigation au clavier : avec Tab pour parcourir le menu, avec Valider pour ouvrir un élément. La plupart des thèmes et le bloc de navigation le font correctement ; les menus faits maison avec des scripts, souvent non.
• Un lien vers un autre site s'ouvre de préférence dans la même fenêtre. S'il doit s'ouvrir dans une nouvelle fenêtre, précisez-le.

Autres éléments de navigation

Outre le menu principal, ces éléments aident les visiteurs à trouver leur chemin :

• un champ de recherche (le bloc de recherche), surtout pour un site comportant de nombreux articles ;
• du fil d'Ariane (« Accueil > Services > Création de site web »), souvent fourni par une extension SEO ou le thème ;
• des liens internes dans vos textes vers d'autres pages (également bon pour le référencement, leçon 9.2) ;
• une page 404 qui aide : avec un champ de recherche et des liens vers les pages les plus importantes plutôt qu'un simple « introuvable ». Dans un thème basé sur des blocs, vous la modifiez en tant que modèle « 404 » dans l'Éditeur de site.

En pratique : à quoi cela ressemble-t-il dans un panneau

Dans l'administration de WordPress :

• Thème basé sur des blocs : Apparence > Éditeur > Navigation. Choisissez le menu, ajoutez des éléments avec le signe plus, faites-les glisser dans le bon ordre, et choisissez dans les réglages du bloc de navigation quand le menu mobile apparaît.
• Thème classique : Apparence > Menus. Créez un menu, cochez des pages à gauche et cliquez sur Ajouter au menu, faites glisser l'ordre, et cochez en bas l'emplacement de menu. Enregistrer.

Résumé

• Dans un thème basé sur des blocs, vous créez le menu avec le bloc de navigation dans l'Éditeur de site ; dans un thème classique, via Apparence > Menus avec un emplacement de menu.
• Un menu indique le chemin vers quelques endroits importants : peu d'éléments, un seul niveau de sous-menu au maximum.
• Les liens juridiques ont leur place dans un menu de pied de page, toujours accessible.
• Testez le menu mobile sur un vrai téléphone et utilisez des textes de lien qui ont du sens par eux-mêmes.
• Un champ de recherche, des liens internes et une page 404 utile complètent le menu.

Quiz

Exercice

Exercice D4.3 : Un menu qui fonctionne. Créez (ou améliorez) le menu principal de votre site avec sept éléments principaux au maximum, un sous-menu et un lien personnalisé, ainsi qu'un menu de pied de page avec votre politique de confidentialité. Testez le menu mobile sur votre téléphone et avec le clavier seul (Tab et Valider). Cochez ce qui fonctionne et notez : quel type de thème avez-vous (basé sur des blocs ou classique), où avez-vous créé le menu, et quel texte de lien avez-vous amélioré, et comment ?

Pour aller plus loin

Pour travailler directement dans WordPress, nous n'avons pas encore d'articles qui nous soient propres ; la documentation officielle de WordPress est très complète.

• Bloc de navigation (wordpress.org, en anglais) : https://wordpress.org/documentation/article/navigation-block/
• Menus dans les thèmes classiques (wordpress.org, en anglais) : https://wordpress.org/documentation/article/appearance-menus-screen/
• Éditeur de site (wordpress.org, en anglais) : https://wordpress.org/documentation/article/site-editor/