💥 Accédez en illimité à
tous nos livres & vidéos, sur l'IA, le dev, les réseaux... Cliquez ici
-100€ sur l'abonnement annuel à
la Bibliothèque Numérique ENI. Cliquez ici
  1. Livres & vidéos
  2. WordPress, Accessibilité et Green IT
  3. La navigation dans WordPress
Extrait - WordPress, Accessibilité et Green IT Comment créer votre site web en respectant les principes du Numérique Responsable ?
Extraits du livre
WordPress, Accessibilité et Green IT Comment créer votre site web en respectant les principes du Numérique Responsable ? Revenir à la page d'achat du livre

La navigation dans WordPress

Introduction

Dans les sites web, la navigation est au cœur de l’expérience utilisateur. C’est dire que c’est un élément essentiel et qu’elle doit être adaptée à tous les utilisateurs et utilisatrices, quels qu’ils soient. Et c’est avec des liens entre les pages que repose la navigation.

Dans WordPress, la navigation peut se configurer de plusieurs manières différentes :

  • Via la très classique barre de navigation, habituellement placée en haut des pages.

  • À travers des liens internes du site, c’est-à-dire des liens qui affichent d’autres pages du site ou conduisent à des endroits particuliers au sein de la même page.

  • À l’aide de liens externes, qui affichent des pages d’autres sites.

  • Grâce à des widgets intégrant des éléments de navigation.

L’accessibilité et les liens de navigation

Pour l’accessibilité, il y a deux points auxquels il faut être attentif :

  • Les liens vides : si un lien est positionné sur une image décorative, il est considéré comme un lien vide. Une personne utilisant un lecteur d’écran n’aura pas de texte vocalisé pour l’image puisque celle-ci est considérée comme purement décorative (reportez-vous au chapitre Les images dans WordPress). Ainsi le lecteur d’écran lui indiquera la présence d’un lien mais sans pouvoir lui indiquer sa destination.

  • La pertinence de l’intitulé du lien : il est nécessaire de s’assurer qu’avec le texte du lien, ainsi que le contexte avoisinant (titre précédent et paragraphe courant), la destination du lien n’est pas ambiguë ou inconnue.

Pour la navigation, les règles d’accessibilité imposent qu’un lien d’accès rapide permette de se rendre directement au contenu principal. Cela évite aux personnes naviguant au clavier ou avec une technologie d’assistance similaire d’appuyer sur la touche [Tab] un grand nombre de fois avant d’atteindre le contenu principal de la page. Le thème par défaut de WordPress implémente bien ce lien d’accès rapide.

Pour s’en rendre compte...

L’importance du thème

L’affichage du site, sa mise en forme et sa mise en page sont grandement dus au choix du thème.

C’est le thème créé par un designer qui détermine comment seront affichés tous les liens utilisés dans tous les contenus du site. Bien sûr, ces affichages pourront être personnalisés par le créateur du site, au niveau des styles du thème, page par page, voire au cas par cas si besoin est.

Et c’est le thème qui « code » tous les liens dans les menus de navigation et dans le texte. Ce sont donc le designer et le développeur qui décident du code utilisé pour afficher tous les liens. Ce sont eux qui choisissent d’utiliser ou pas tel ou tel élément, tel ou tel attribut pour créer et afficher les liens dans le site. D’où l’importance, encore une fois, du choix du thème.

Enfin, notez bien que chaque thème propose toujours un menu de navigation, mais qu’il vous est possible de créer d’autres menus de navigation.

Les menus de navigation

Les emplacements des menus de navigation

Dans un site WordPress, c’est le thème choisi qui détermine les emplacements prédéfinis pour placer des menus de navigation. D’une manière assez générale, les thèmes proposent tous de positionner un menu de navigation en haut des pages, dans l’en-tête. C’est classiquement le menu de navigation principal. Les thèmes peuvent aussi proposer un emplacement dans le pied de page, pour les liens moins importants. Enfin, des thèmes responsive peuvent proposer des menus « hamburger » (représentés par trois traits horizontaux) pour un affichage sur les écrans des smartphones.

Les contenus des menus de navigation

Dans les anciennes versions de WordPress, les menus de navigation étaient principalement constitués avec des pages, au sens WordPress du terme. Mais actuellement, vous pouvez placer n’importe quel type de contenu dans les menus de navigation : pages, articles, catégories, étiquettes, liens externes ou personnalisés.

Les menus de navigation se créent avec le bloc dédié Navigation. Dans ce bloc, vous pouvez insérer plusieurs types de blocs contenant des liens :

  • Le bloc Liste des pages, qui permet d’insérer automatiquement toutes les pages (au sens WordPress du terme) publiées. Presque tous les thèmes utilisent ce bloc par défaut.

  • Le bloc Lien de page pour insérer une page en particulier.

  • Le bloc Lien d’article pour insérer un article en particulier.

  • Le bloc Lien personnalisé pour insérer un lien personnalisé vers une catégorie, une étiquette, un lien externe…

Le menu de navigation principal

Le thème par défaut Twenty Twenty-Four place le menu de navigation principal dans l’en-tête.

Dans cet exemple, nous allons voir comment est constituée la navigation. Dans cet exemple de site, trois pages sont créées : Mes projets, Préparer un voyage et Voyager en solo.

 Pour accéder au menu principal, choisissez Éditeur dans le menu Apparence

images/new-015.png

 Puis cliquez sur le lien Compositions et ensuite...

Les liens dans les contenus

Dans les contenus rédactionnels (articles et pages), il est bien sûr possible d’insérer des liens internes vers d’autres contenus, ou externes vers d’autres pages d’autres sites.

 Dans un contenu, sélectionnez le ou les mots qui serviront de lien.

 Dans la barre d’outils, cliquez sur le bouton Lien :

images/C06-020.png

 Dans le champ de saisie qui s’affiche, vous pouvez copier-coller une URL externe ou bien saisir les premières lettres du contenu à cibler.

Dans cet exemple, c’est l’article Florence et la Toscane qui est ciblé :

images/C06-021.png

 Cliquez sur le contenu ciblé pour créer le lien.

images/C06-022.png

 Pour personnaliser le lien, cliquez sur le bouton Modifier le lien.

images/C06-023.png

Les champs de personnalisation sont affichés :

images/C06-024.png
  • Le champ TEXTE permet de modifier le ou les mots initialement sélectionnés.

  • Le champ LIEN permet de vérifier et si besoin de modifier le contenu ciblé.

Dans le volet Avancé, deux options sont disponibles :

  • Ouvrir dans un nouvel onglet permet d’afficher le contenu ciblé dans un nouvel onglet du navigateur.

  • Marquer en nofollow permet de demander aux moteurs de recherche de ne pas suivre ce lien dans leur indexation.

 Si vous apportez des modifications, cliquez sur le bouton Enregistrer.

Vous pouvez supprimer un lien si nécessaire :

 Cliquez dans...

Les widgets de navigation

WordPress permet d’insérer divers widgets de navigation : Derniers articles, Liste des catégories, Liste des pages… Cette technique était assez utilisée il y a quelques années, mais actuellement elle n’est plus trop recommandée, ni utilisée. En effet, elle engendre beaucoup de problèmes de duplication de contenus qui sont un frein très important pour le référencement naturel (SEO) des sites. De plus, nous n’avons aucun paramètre de personnalisation technique sur les widgets.