Bloc Navigation

Retour à la liste des blocs

Le bloc Navigation est un bloc avancé disponible dans WordPress 5.9 qui vous offre la possibilité de créer ou modifier votre menu de navigation, aussi bien en termes de structure que d’apparence. Ce bloc peut être utilisé avec un thème basé sur des blocs ou un thème qui prend en charge l’édition des modèles.

Il vous sera possible de réutiliser un menu créé avec le bloc Navigation partout où vous le désirez, dans un nouveau modèle de page ou même avec un autre thème.

Pour connaître la procédure à suivre pour ajouter un bloc, veuillez consulter l’article Ajouter un nouveau bloc.

Configuration du bloc

Il existe trois moyens d’ajouter des liens à un bloc Navigation :

Capture d’écran montrant les différents outils pour ajouter des liens à un bloc Navigation
  1. Utiliser un menu existant qui a été créé précédemment, via l’outil Sélectionner un menu.
  2. Ajouter l’ensemble des pages du site via l’outil Ajouter toutes les pages. Vous pourrez ensuite modifier et réorgarniser les liens vers les pages.
  3. Créer un menu vierge et lui ajouter les publications ou les liens de votre choix via l’outil Commencer vide.

Haut ↑

Sélectionner un menu existant

Si vous disposez d’un menu que vous avez créé avec un bloc Navigation ou dans un thème précédent, vous pouvez choisir de l’utiliser lors de la configuration du bloc Navigation :

  1. Cliquez sur l’outil Sélectionner un menu.
  2. Puis dans la liste qui s’affiche, sélectionnez un menu en cliquant sur son nom. Dans cette liste sont affichés tous les menus déjà créés, que ce soit avec un bloc Navigation ou avec un thème classique.
Capture d’écran montrant la liste des menus proposée par l’outil Sélectionner un menu
  1. Les blocs Lien personnalisé (qui correspondent aux éléments du menu sélectionné) sont ajoutés automatiquement.
  2. Vous pouvez ensuite personnaliser individuellement chacun des blocs Lien personnalisé en utilisant les outils de mise en forme du texte Gras, Italique, Barré ou encore ajouter une Image en ligne (en plus ou à la place du Texte du lien). Enfin, vous pouvez aussi, avec l’outil Lien, modifier l’URL et le Texte du lien, ou utiliser l’outil Ajouter un sous-menu. Ces fonctionnalités seront décrites plus amplement dans la section Personnalisation du bloc.
  3. Enfin, vous pouvez réorganiser l’ordre des blocs Lien personnalisé en utilisant les outils Déplacer à gauche ou Déplacer à droite.

Haut ↑

Ajouter toutes les pages

Avec l’outil Ajouter toutes les pages, vous ajoutez au bloc Navigation l’ensemble des pages du site, que vous pourrez ensuite personnaliser. Cette outil peut aider à rationaliser la création de menus, en fonction du nombre de pages que vous avez sur votre site. Si vous ajoutez de nouvelles pages, elles y apparaîtront automatiquement.

Une fois que vous avez cliqué sur l’outil Ajouter toutes les pages, la recherche de la liste des pages s’effectue puis les titres de celles-ci sont ajoutées au bloc Navigation dans un bloc Liste des pages automatiquement créé.

Pour personnaliser les éléments de menu de ce bloc :

  1. Cliquez sur l’un des éléments du menu dans le bloc Liste des pages.
  2. Dans la barre d’outils du bloc Liste des pages, cliquez sur l’outil Modifier.
Capture d’écran montrant l’outil Modifier du bloc Liste des pages
  1. La boîte de dialogue Convertir en liens s’affiche, confirmez la conversion en blocs Liens personnalisés de tous les éléments de menu du bloc Liste des Pages en cliquant sur le bouton Convertir.
Capture d’écran de la boîte Convertir en liens
  1. Vous pouvez maintenant modifier les blocs Lien personnalisé en utilisant les outils de déplacement ou modifier chacun des blocs individuellement comme indiqué précédemment (point 4 du paragraphe Sélectionner un menu existant).
Capture d’écran montrant la barre d’outils du bloc Lien personnalisé

Noter que si vous avez converti le bloc Liste de pages en blocs Lien personnalisé, alors il vous faudra ajouter manuellement au bloc Navigation les liens vers les pages publiées par la suite. Si vous ne faites pas de conversion, les nouvelles pages seront automatiquement ajoutées au menu.

La vidéo ci-dessous vous montre comment convertir un bloc Liste de pages en plusieurs blocs Lien personnalisé puis comment modifier l’ordre des liens.

Haut ↑

Créer un menu vierge

Une fois le bloc Navigation ajouté, utilisez l’outil Commencer vide pour créer un menu vierge auquel vous allez ajouter des blocs. Un bloc Navigation vide est créé :

  1. Cliquez alors sur l’outil d’ajout de blocs (situé à droite du bloc) pour ajouter un bloc Lien personnalisé.
  2. Plusieurs possibilités s’offrent à vous :
    • Patientez quelques instants pour que la liste des publications récentes s’affiche puis sélectionnez une publication parmi celles-ci.
    • Ou saisissez une partie du titre de la publication pour la rechercher, patientez jusqu’à l’affichage des résultats de recherche, puis cliquez sur la publication souhaitée.
    • Ou saisissez une URL et cliquez sur le bouton Envoyer.
    • Ou encore saisissez le texte du lien et cliquez sur le bouton Envoyer.
  3. Vous pouvez maintenant modifier l’ordre des blocs Lien personnalisé en utilisant les outils de déplacement ou modifier chacun des blocs individuellement comme indiqué précédemment (point 4 du paragraphe Sélectionner un menu existant).

Haut ↑

Personnalisation du bloc

Haut ↑

Ajouter des éléments de menu

Vous avez deux possibilités pour ajouter des éléments de menu additionnels au bloc Navigation :

  1. Sélectionnez un des éléments déjà présent dans le bloc Navigation puis ouvrez l’Outil d’insertion de blocs, pour ensuite sélectionner le bloc que vous souhaitez y ajouter parmi les blocs qui peuvent être insérés.
  2. Ou sélectionnez le bloc Navigation puis cliquez sur l’outil Ajouter un bloc (bouton avec l’icône +) qui apparaît dans l’angle en bas à droite de la zone délimitant le bloc. Saisissez un mot clé pour rechercher une publication ou saisissez une URL, ou encore sélectionnez une des publications dans la liste, ou enfin transformer le bloc Lien personnalisé que vous êtes en train de créer en un autre bloc.

Plusieurs blocs peuvent être ajoutés comme éléments de menu au bloc Navigation. Gardez à l’esprit que vous ne pouvez ajouter qu’une petite collection de blocs pour l’instant. Il s’agit des blocs :

  • Espacement
  • Lien personnalisé
  • Lien d’article
  • Lien de page
  • Lien de catégorie
  • Lien d’étiquette
  • Sous-menu
  • Liste des pages
  • Recherche
  • Icônes de réseaux sociaux
  • Logo du site
  • Titre du site

Chaque bloc vient avec son niveau de personnalisation, ses outils et réglages. Aussi vous disposerez, selon les blocs, d’outils différents.

Par exemple, si vous insérez un bloc Icônes de réseaux sociaux, vous pourrez choisir lesquelles ajouter, puis leur justification (alignement horizontal) et leur taille :

Haut ↑

Ajouter des éléments de sous-menu

Pour ajouter des éléments de sous-menu :

  1. Sélectionnez simplement le bloc pour lequel vous souhaitez placer un sous-menu, puis dans la barre d’outils du bloc, cliquez sur l’outil Ajouter un sous-menu. Cela ajoutera automatiquement un bloc Sous-menu à l’élément sélectionné. Si le bloc n’est pas adapté pour être développé avec un sous-menu (par exemple, le bloc Logo du site ou Icônes des réseaux sociaux), alors l’outil Ajouter un sous-menu ne sera pas présent dans sa barre d’outils.
Capture d’écran montrant l’outil Ajouter un sous-menu dans le bloc Lien personnalisé
  1. Puis cliquez sur l’outil Ajouter un bloc du bloc Sous-menu pour ajouter un premier élément de sous-menu. À cette étape, vous pouvez :
    • Soit rechercher une publication ou saisir une URL dans le champ prévu à cet effet.
    • Soit cliquer sur l’Outil d’insertion de blocs pour l’ouvrir et y choisir un des blocs pouvant être intégré à un bloc Sous-menu. Puis laissez-vous guider pour la suite de la procédure qui sera différente selon la nature du bloc choisi.

Vous pouvez utiliser les blocs suivants dans un bloc Sous-menu :

Capture d’écran montrant la liste des blocs utilisables dans un bloc Sous-menu
  • Lien personnalisé
  • Lien d’article
  • Lien de page
  • Lien de catégorie
  • Lien d’étiquette
  • Sous-menu

Haut ↑

Déplacer les blocs

Pour déplacer les blocs contenus dans le bloc Navigation, deux possibilités sont proposées :

  1. Les outils de déplacement classiques à savoir Déplacer à gauche, Déplacer à droite, ou Monter, Descendre (dans le cas d’un bloc Sous-menu).
  2. Ou sélectionnez le bloc Navigation, puis cliquez sur l’outil Ouvrir la vue en liste. Une boîte de dialogue listant les blocs contenus dans le bloc Navigation s’affiche, sélectionnez un des éléments et faites le glisser jusqu’à l’emplacement souhaité. Puis refermez la Vue en liste.

La vidéo ci-dessous montre les outils de déplacement en action.

Si vous n’êtes pas en mesure de déplacer certains éléments, cela est sûrement dû au fait qu’ils appartiennent à un bloc Liste des pages. Afin de pouvoir les déplacer, il faut les convertir en blocs Lien personnalisé comme indiqué dans le paragraphe Ajouter toutes les pages.

Haut ↑

Modifier le lien et le titre

Chaque bloc ajouté au menu de navigation est composé de deux parties : un lien et un titre, sauf pour quelques blocs comme Icônes de résaux sociaux, Logo du site, Recherche ou Espacement.

Pour changer le titre, il suffit de se placer sur le texte pour le modifier.

Pour modifier le lien, sélectionnez simplement le bloc concerné et cliquez sur l’outil Lien dans la barre d’outils. À partir de là, vous pourrez modifier l’URL du lien en cliquant sur l’outil Modifier (icône crayon). Noter que vous pouvez aussi modifier le Texte du lien de cette même façon.

Capture d’écran montrant comment modifier le texte et/ou l’url d’un lien contenu dans un bloc Navigation

Haut ↑

Transformer les éléments de menu

Chaque bloc inséré dans un bloc Navigation peut être transformé en un autre bloc. Pour cela, sélectionnez le bloc puis cliquez sur l’outil Modifier le type ou le style du bloc. Le menu Transformer en s’affiche alors et propose une liste de blocs. Cliquez sur le bloc souhaité, puis configurez-le.

Capture d’écran montrant le menu Transformer en pour le bloc Lien personnalisé

Cette option vous permet de construire rapidement un menu avec différents types de bloc, à partir par exemple d’un bloc Liste de pages converti en blocs Lien personnalisé.

Haut ↑

Gérer les menus

Si vous souhaitez supprimer un menu de navigation, sélectionner le bloc Navigation correspondant puis dans la colonne latérale des réglages, développez la section Avancé. Cliquez ensuite sur le bouton Supprimer le menu. Confirmez ou non dans la boîte de dialogue qui s’affiche. Noter que la suppression d’un menu est définitive.

L’écran Menus de navigation vous permet de facilement supprimer et renommer vos menus en un seul endroit. Pour accéder à cet écran, sélectionnez un bloc Navigation, puis cliquez sur l’outil Sélectionner un menu puis sur l’option de menu Gérer les menus.

Cet écran vous permet de renommer facilement vos menus via le lien Modification rapide, ou de supprimer un menu en utilisant le lien Corbeille. Vous pouvez aussi utiliser les actions groupées pour supprimer plusieurs menus en même temps.

Par contre, vous ne pouvez pas modifier les blocs constituant les menus à partir de cet écran.

Haut ↑

Utiliser un menu dans différents thèmes

Comme les menus sont enregistrés dans la base de données, vous serez en mesure de réutiliser un menu dans un autre thème. Par contre, si vous passez d’un thème basé sur des blocs à un thème classique, vous ne serez plus en mesure de réutiliser les menus créés via le bloc Navigation.

Haut ↑

Barre d’outils du bloc

Capture d’écran de la barre d’outils du bloc Navigation

Chaque bloc dispose d’une barre d’outils vous permettant de manipuler le bloc directement dans l’éditeur. L’article Barre d’outils des blocs vous présente les outils communs à tous les blocs et leur fonctionnement. Les outils spécifiques à ce bloc, s’il en existe, sont décrits ci-dessous.

Haut ↑

Modifier la justification des blocs

  • Justifier les blocs à gauche – Aligne l’ensemble des blocs et leurs contenus à gauche.
  • Justifier les blocs au centre – Aligne l’ensemble des blocs et leurs contenus au centre. 
  • Justifier les blocs à droite – Aligne l’ensemble des blocs et leurs contenus à droite.
  • Répartir les blocs – Répartit équitablement tous les blocs dans l’espace disponible.
Capture d’écran montrant les différentes options de justification pour les blocs d’un bloc Navigation

Haut ↑

Sélectionner un menu

Cet outil vous permet de sélectionner un autre menu.

Haut ↑

Ouvrir la vue en liste

Cet outil vous permet d’accéder à la Vue en liste des blocs contenus dans le bloc Navigation. Voir l’article Vue en liste.

Capture d’écran montrant la Vue en liste du contenu d’un bloc Navigation

Haut ↑

Réglages du bloc

Selon les blocs, divers réglages sont disponibles dans la colonne latérale des réglages. Parmi ceux-ci, on distingue les réglages communs (à une majorité de blocs) des réglages spécifiques, décrits ci-dessous.

Haut ↑

Mise en page

Les réglages proposés ici permettent de contrôler le positionnement global du bloc Navigation :

Capture d’écran montrant la section Mise en page des réglages du bloc Navigation
  • Justification – Ce réglage vous permet de justifier les éléments du bloc Navigation à gauche, au centre ou à droite. Vous pouvez également répartir équitablement les éléments sur toute la largeur disponible. Il correspond à l’outil Modifier la justification des blocs.
  • Orientation – Ce réglage vous permet de passer d’une orientation verticale à une orientation horizontale pour tous les éléments du bloc Navigation
  • Autoriser le regroupement de lignes multiples – Il s’agit d’une option que vous pouvez activer ou désactiver et qui permet au bloc Navigation de déborder sur plusieurs lignes si l’espace est insuffisant.

Haut ↑

Afficher

Actuellement, cette section vous permet de contrôler ce qui s’affiche pour le bloc Navigation en fonction de la taille de l’écran, ce qui permet d’utiliser un menu responsive.

Capture d’écran montrant la section Afficher des réglages du bloc Navigation

Les options de Menu superposé sont les suivantes :

  • Désactivé – Cette option désactive l’affichage d’une icône de menu sur les écrans de petite taille. 
  • Mobile – Cela permet d’afficher une icône de menu lors de la consultation de votre site sur des écrans plus petits, icône sur laquelle on peut cliquer pour voir le menu complet. 
  • Toujours – Cette option active l’affichage d’une icône de menu quelque soit la taille de l’écran. 

Par défaut, ce réglage est défini sur Mobile, ce qui signifie qu’une icône de menu s’affiche automatiquement sur les écrans de petite taille. Lorsque vous cliquez sur l’icône de menu, un calque superposé s’ouvre et affiche l’intégralité de votre menu.

Pour les Sous-menus vous disposez de deux options :

  • Ouvrir en cliquant – Cette option permet l’ouverture du sous-menu en cliquant sur l’élément de menu (et non au survol). Lorsque cette option est sélectionnée, l’option Afficher les icônes n’est plus disponible car les icônes sont affichées par défaut.
  • Afficher les icônes – Cette option permet d’afficher ou non une icône indiquant la présence d’un sous-menu et avec cette option le sous-menu s’affiche au survol de l’élément de menu.

Haut ↑

Avancé

L’onglet Avancé vous permet d’accéder aux réglages avancés des blocs.

Le bloc Navigation dispose de deux réglages avancés supplémentaires :

  • Le champ Nom du menu dans lequel vous pouvez modifier le nom du menu.
  • Le bouton Supprimer le menu qui permet de supprimer définitivement un menu.

Traduit par Jenny Dupuy
Relu par Patrick Olivaud & Jb Audras
Dernière mise à jour le 21 janvier 2022

Contribuer à la documentation en français de WordPress