Wypo Logo Header
Documentations / Gutenberg Navigation

Gutenberg Navigation

Le plugin "Gutenberg Navigation" pour WordPress permet d'utiliser les menus classiques de WordPress au sein de l'éditeur Gutenberg, facilitant ainsi la création de menus mobiles dans l'en-tête (header) d'un site.

Prérequis

  • WordPress : Version 5.9 ou supérieure
  • PHP : Version 7.0 ou supérieure

Installation

Pour l’installation du plugin, veuillez vous référer au tutoriel « Installer un plugin ».

Utilisation

Bloc « Menu Selector »

Le bloc « Menu Selector » permet de sélectionner un menu classique déjà créé dans WordPress. Ce bloc peut être utilisé seul sur une page pour afficher un menu, par exemple pour créer un sommaire.

  1. Accédez à l’éditeur Gutenberg de la page ou de l’article où vous souhaitez ajouter le menu.
  2. Cliquez sur le bouton Ajouter un bloc.
  3. Recherchez et sélectionnez le bloc Menu Selector.
  4. Dans les options du bloc, sélectionnez le menu que vous souhaitez afficher parmi les menus disponibles.

Paramètres du bloc Menu selector

  • Classe et ID pour la balise HTML du menu
  • Classe et un ID pour le container de menu
  • Walker, permet de renseigner une classe PHP pour personnaliser le rendu du menu, cette classe devra être déclaré dans le thème.

Le rendu s’affichera uniquement sur le site en ligne et non dans l’interface d’administration.

Bloc « Navigation »

Le bloc « Navigation » utilise le bloc « Menu Selector » pour transformer un menu de site en un menu adaptable.

Le bloc gère automatiquement plusieurs aspects pour optimiser l’affichage du menu :

  • Affichage du menu mobile : Le plugin détecte la taille de l’écran et bascule vers le menu mobile lorsque nécessaire.
  • Affichage des sous-menus : Les sous-menus sont automatiquement pris en charge pour une navigation fluide.
  • Marge pour menu fixe : Si le menu est fixe, le plugin ajoute automatiquement les marges nécessaires pour éviter la superposition avec le contenu de la page.

Paramètres du bloc Navigation

  • Layout
    • Simple : Crée un menu avec un logo et un menu
    • Top Header : Ajoute une barre supérieure supplémentaire au menu simple
  • Fixe: Activez cette option pour rendre le menu fixe en haut de la page.
  • Breakpoint : Spécifiez le breakpoint pour le menu mobile (en pixels).
  • Superposition : Activez cette option pour permettre à votre menu fixe de se superposer au contenu de la page. Sinon, une marge interne sera ajoutée pour éviter la superposition.

Sous-blocs

  • Row : Bloc permettant d’ajouter des blocs en ligne.
  • Menu Content : Bloc dédié à la gestion du menu mobile. Le contenu ajouté dans ce bloc apparaîtra dans le menu mobile si le champ « Breakpoint » du bloc Navigation est défini.
  • Top Header : Bloc permettant de créer un en-tête supérieur (ou inférieur) pour le menu. Ce bloc inclut le bloc Row comme élément enfant.