1. Livres & vidéos
  2. WordPress
  3. Les menus de navigation
Extrait - WordPress Personnaliser les thèmes Gutenberg sans coder (5e édition)
Extraits du livre
WordPress Personnaliser les thèmes Gutenberg sans coder (5e édition)
2 avis
Revenir à la page d'achat du livre

Les menus de navigation

Découvrir les menus de navigation

La navigation entre les pages est l’essence même du Web. Avec WordPress, il est d’usage de regrouper les liens les plus importants dans un menu de navigation ou dans une barre de navigation. Les deux termes sont couramment utilisés.

Dans les thèmes utilisant les blocs Gutenberg, les menus de navigation sont des constituants à part entière. Les menus sont créés dans des blocs. Ainsi, vous pouvez placer ces menus dans d’autres blocs, où vous le souhaitez. Sachez qu’en plus du ou des menus de navigation proposés par le thème actif que vous aurez choisi, il est possible de les modifier et d’en créer d’autres.

Accéder aux menus de navigation

1. Accéder par le nom de la navigation

Pour les exemples à suivre, trois pages ont été créées : Mes projets, Mes livres de voyage et Contactez-moi.

images/C11-001.png

Ces pages sont automatiquement insérées dans le menu par défaut.

 Pour afficher le menu par défaut du thème Twenty Twenty-Five ou tout autre, dans le menu Apparence, choisissez Éditeur.

images/C11-002.png

Dans la liste des constituants du thème, les menus de navigation sont classés dans la catégorie Navigation qui est le nom du menu de navigation par défaut.

 Cliquez sur Navigation.

Le menu s’affiche avec les éléments de menu qui sont insérés, trois pages dans cet exemple.

images/C11-003.png

 Cliquez sur le bouton Actionsimages/11ic06.PNG pour accéder aux options de modification du menu de navigation :

images/C11-004.png

L’écran central affiche le menu de navigation dans le contexte d’une page :

images/C11-005.png

2. Accéder par un modèle

Le menu de navigation Navigation est inséré par défaut dans de nombreux modèles de page du thème Twenty Twenty-Five. Et vous pouvez y accéder par un de ces modèles.

 Dans le menu Apparence, choisissez Éditeur.

 Dans la liste des constituants, cliquez sur Modèles.

 Ouvrez par exemple le modèle nommé Page d’accueil du blog.

 Affichez le volet...

Modifier les liens du menu de navigation par défaut

1. Accéder à la modification du menu

Nous allons maintenant modifier le menu de navigation par défaut du thème Twenty Twenty-Five, nommé Navigation.

 Dans le menu Apparence, choisissez Éditeur.

 Dans la liste des constituants, cliquez sur Navigation.

 Cliquez sur le bouton Actions images/11ic06.PNG puis choisissez Modifier.

images/C11-007.png

La première fois que vous réalisez cette action, un message d’alerte vous demande de confirmer cette modification.

 Affichez le volet Vue d’ensemble du document et déployez l’arborescence.

images/C11-008.png

Le bloc du menu de navigation nommé Navigation contient le bloc Liste des pages. Ce bloc, comme son nom l’indique, contient et affiche toutes les pages créées dans le site.

 Sélectionnez le bloc Navigation.

 Dans le volet des réglages, cliquez sur l’onglet Bloc.

images/C11-009.png

Dans le volet des réglages, vous voyez que ce bloc contient bien un menu constitué par le bloc Liste des pages. Et dans ce dernier, vous visualisez les pages qui y sont insérées.

 Dans le volet des réglages, sélectionnez le bloc Liste des pages.

images/C11-010.png

Dans le volet des réglages, dans l’onglet Bloc, vous pouvez modifier ce menu. Un message très important de WordPress est affiché :

images/C11-011.png

Il est clairement indiqué que, si vous modifiez ce menu, ce dernier perd la fonctionnalité qui permet d’y ajouter automatiquement toute nouvelle page créée.

 Pour modifier le menu de navigation, dans...

Personnaliser le menu de navigation par défaut

1. Modifier le libellé des liens

Lorsque vous insérez un lien, quel que soit son type, le libellé du lien reprend le nom de l’élément inséré : le titre de la page ou de l’article, le nom de la catégorie ou de l’étiquette et l’URL du lien externe.

Voici les noms des pages de cet exemple :

images/C11-001.png

Chaque lien dans le menu de navigation reprend exactement le titre de chaque page.

Dans cet exemple, nous allons changer le libellé du lien Contactez-moi en Contact, ce qui prend moins de place à l’écran.

 Comme précédemment, ouvrez le menu Navigation et déployez l’arborescence afin de sélectionner le lien Contactez-moi.

images/C11-031.png

 Dans le volet des réglages, dans l’onglet Bloc, modifiez le champ TEXTE.

images/C11-032.png

 Cliquez sur le bouton Enregistrer.

Vous pouvez faire de même pour les autres liens si besoin est, sans oublier d’enregistrer :

images/C11-033.png

2. Modifier les autres champs des liens

Dans le volet des réglages, d’autres champs peuvent être modifiés :

images/C11-034.png
  • TEXTE pour changer le libellé du lien tel qu’il sera affiché dans le menu de navigation.

  • LIEN affiche l’URL du lien, le permalien si nous reprenons la terminologie de WordPress.

  • DESCRIPTION pour le texte qui s’affichera au niveau du lien dans le menu. Mais peu de thèmes prennent en compte ce champ.

  • ATTRIBUT DE TITRE pour afficher une bulle d’aide au survol du lien. C’est l’attribut title de l’élément <a> qui est renseigné.

  • ATTRIBUT REL pour insérer...

Paramétrer le menu de navigation

1. Insérer un menu de navigation

Les menus de navigation sont des blocs à part entière. Une fois qu’un menu de navigation est disponible, et que toutes les modifications ont été apportées, il faut l’utiliser, c’est-à-dire qu’il faut l’insérer dans un élément de modèle. Typiquement, les menus de navigation sont ajoutés dans les en-têtes ou les pieds de page.

Avec le thème Twenty Twenty-Five, le menu de navigation par défaut nommé Navigation est inséré dans les en-têtes des modèles de page.

 Dans le menu Apparence, choisissez Éditeur.

 Puis cliquez sur Modèles.

 Ouvrez le modèle nommé Page d’accueil du blog par exemple.

 Affichez l’arborescence des blocs de l’en-tête En-tête.

Dans le bloc Rangée, le bloc Navigation est bien inséré :

images/C11-048.png

Dans le volet des réglages, vous visualisez bien tous les liens ajoutés et modifiés du menu Navigation

Vous obtiendrez la même structure dans les autres modèles de page, puisque le thème Twenty Twenty-Five ne propose qu’un seul menu de navigation nommé Navigation.

2. Mettre en page le menu de navigation

Pour mettre en page et mettre en forme le menu de navigation, il faut utiliser...

Gérer les menus de navigation

1. Créer un nouveau menu de navigation

Il faut être franc, la création d’un nouveau menu de navigation n’est pas très ergonomique dans cette version de WordPress. Nous ne pouvons qu’espérer des améliorations dans les futures versions.

 Pour créer un nouveau menu de navigation, il faut partir d’un modèle de page. Dans cet exemple, nous reprenons le modèle Page d’accueil du blog.

 Dans l’arborescence des blocs, sélectionnez le bloc Navigation.

 Dans le volet des réglages, dans l’onglet Bloc, affichez l’onglet Vue en liste.

images/C11-060.png

 Dans la section Menu, dans le menu des options Navigation images/06ic04.PNG, vous pouvez voir quel est le menu actif dans ce bloc. C’est le menu nommé Navigation dans cet exemple.

images/C11-061.png

 Pour créer un nouveau menu de navigation, dans ce même menu, choisissez Créer un nouveau menu.

Le nouveau menu de navigation est créé et il est vide :

images/C11-063.png

 Ensuite, comme nous l’avons vu précédemment, dans la section Menu, cliquez sur le bouton Ajouter un bloc images/11ic04.PNG pour ajouter des liens.

Dans cet exemple, deux liens ont été ajoutés : Contactez-moi et Mes projets :

images/C11-064.png

La modification des liens est en tout point similaire à ce que nous avons vu précédemment.

 Vous pouvez visualiser dans...