English Tiếng Việt Français Deutsch 中文 日本語 Italiano Português Español
Voir la démo Commencer

Publier sur WordPress

A Mega Menu (Desktop) est un menu de section — il ne s’ancre pas à la fenêtre d’affichage, il se rend au point exact de la page où vous l’intégrez (typiquement l’en-tête du site). Sur WordPress, le plugin Navi+ AI Menu Builder l’intègre via un shortcode ou un bloc Gutenberg — vous n’éditez jamais les fichiers de thème.

Autres plateformes (Wix, Squarespace, Webflow, sites personnalisés) : voir Publier sur Wix / Squarespace / Autres.

Étapes

  1. Installez le plugin — voir Installer le plugin Navi+ AI Menu Builder.
  2. Construisez votre Mega Menu dans Apparence → Naviplus Menu Builder. Voir Mega Menu (Desktop) — Comment utiliser pour des conseils de conception.
  3. Copiez l’ID d’intégration du menu (affiché sur le panneau de publication — ressemble à SF-123456789).
  4. Insérez le menu où vous le souhaitez sur la page (section suivante).

Insérer le menu — trois options

Option 1 — Shortcode (fonctionne partout)

Collez ceci dans n’importe quel article, page ou widget compatible avec les shortcodes :

[naviwp embed_id="SF-123456789"]

Pour un Mega Menu qui doit apparaître dans l’en-tête du site sur chaque page, l’endroit le plus propre est une zone de widget d’en-tête (si votre thème en fournit une). Sinon, utilisez un bloc d’en-tête global / une partie de modèle (thèmes d’édition complète du site), ou revenez à l’Option 3 ci-dessous.

Option 2 — Bloc Gutenberg

  1. Dans l’éditeur de blocs, cliquez sur + → Naviplus Menu Builder.
  2. Collez l’ID d’intégration dans la barre latérale du bloc.

Vous pouvez également déposer un bloc Shortcode générique avec [naviwp embed_id="SF-..."].

Option 3 — Constructeurs de pages (Elementor, Divi, Bricks, Oxygen)

Utilisez le widget Shortcode du constructeur et collez [naviwp embed_id="SF-..."]. Si vous préférez utiliser du HTML brut, déposez directement la div d’intégration :

<div class="naviman_app section_naviman_app" id="SF-123456789-container"></div>

Le plugin charge déjà le runtime Navi+, donc le menu se rend à l’intérieur de ce conteneur.

Option 4 — Sélecteur CSS (placement automatique depuis l’application Navi+)

Au lieu de placer un shortcode manuellement, vous pouvez laisser Navi+ insérer ou remplacer automatiquement un élément en utilisant un Sélecteur CSS — configuré entièrement depuis l’application Navi+.

Comprendre le Sélecteur CSS

Un Sélecteur CSS cible un élément HTML spécifique sur votre page. Navi+ l’utilise pour savoir exactement où placer votre menu — insérer avant, insérer après ou remplacer un élément existant.

Pour trouver le bon Sélecteur CSS, utilisez :

Trois options de publication

Dans l’application Navi+ : cliquez sur Publier sur le site web → activez “Publier le menu par méthode d’insertion/remplacement” → entrez votre Sélecteur CSS et choisissez une option :

Option A : Insérer Avant

Insère le menu immédiatement avant l'élément sélectionné.

Exemple : main → le menu apparaît au-dessus de la zone de contenu principal.

Sélecteurs communs pour les thèmes WordPress :

  • main — la plupart des thèmes
  • #main — Twenty Twenty, Astra, OceanWP
  • .site-main — de nombreux thèmes
Option B : Insérer Après

Insère le menu immédiatement après l'élément sélectionné.

Exemple : header → le menu apparaît juste en dessous de l'en-tête.

C'est la configuration la plus courante pour un Mega Menu de bureau.

Sélecteurs communs pour les thèmes WordPress :

  • header — la plupart des thèmes
  • .site-header — OceanWP, Astra
  • #masthead — Twenty Twenty-One et thèmes WordPress par défaut
  • #header — Divi
Option C : Remplacer

Remplace entièrement l'élément sélectionné par le menu Navi+. L'élément original est masqué et Navi+ prend sa place.

Exemple : .main-navigation → le menu de navigation par défaut du thème est masqué et remplacé par votre Mega Menu Navi+.

Sélecteurs communs pour les thèmes WordPress :

  • .main-navigation — Twenty Twenty-One et de nombreux thèmes WordPress par défaut
  • #site-navigation — certains thèmes WordPress par défaut
  • .nav-primary — divers thèmes

Remarque : Un bref flash du menu original peut apparaître pendant que Navi+ se charge. Utilisez l'option d'optimisation UX intégrée dans les paramètres de publication pour masquer immédiatement l'élément original.

Ciblage spécifique aux appareils

Ajoutez un suffixe pour appliquer le sélecteur uniquement sur un appareil spécifique :

Suffixe S’applique à
(M) Mobile uniquement
(D) Bureau uniquement
(aucun) Les deux

Exemple : header(D) — insère uniquement sur bureau.

Considérations mobiles

Un Mega Menu de bureau est, par définition, une mise en page orientée bureau. Sur les petits écrans, il ne devrait généralement pas se rendre du tout — associez-le à un Mega Menu (Mobile) ou Slide Menu et utilisez des règles d’affichage pour cacher chacun sur l’autre point de rupture.

Dans l’éditeur, ouvrez Règles d’affichage → Appareil et restreignez le Mega Menu (Desktop) à bureau uniquement.

Mise à jour du menu plus tard

Modifiez le menu dans l’administration WordPress (ou dans l’application web Navi+). Les changements s’appliquent lors du prochain chargement de page en front-end — aucun vidage de cache WordPress requis, car les menus sont récupérés à l’exécution par le navigateur.

Liens connexes