Publier sur WordPress
Un Menu Grille est un menu de section — il s’affiche à l’endroit de la page où vous l’intégrez. C’est un excellent choix pour les raccourcis de catégorie, les pages centrales et les panneaux “que souhaitez-vous faire ?”. 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
- Installez le plugin — voir Installer le plugin Navi+ AI Menu Builder.
- Construisez votre Menu Grille dans Apparence → Naviplus Menu Builder. Voir Menu Grille — Comment utiliser et Menu Grille Réactif.
- Copiez l’ID d’intégration (par exemple
SF-123456789). - Intégrez-le en utilisant l’une des méthodes ci-dessous.
Insérer le menu
Option 1 — Shortcode (recommandé)
[naviwp embed_id="SF-123456789"]
Déposez ceci dans n’importe quel article, page ou widget compatible avec les shortcodes.
Lieux typiques :
- Une section héro de la page d’accueil avec des tuiles de catégorie.
- Une page de destination au-dessus de la ligne de flottaison.
- L’état vide d’une archive de catégorie.
Option 2 — Bloc Gutenberg
Dans l’éditeur de blocs, + → Naviplus Menu Builder, puis collez l’ID d’intégration dans la barre latérale du bloc. Un bloc Shortcode simple avec [naviwp embed_id="SF-..."] est équivalent.
Option 3 — Constructeurs de pages (Elementor, Divi, Bricks, Oxygen)
Utilisez un widget Shortcode avec [naviwp embed_id="SF-..."]. Si un constructeur n’a pas de widget Shortcode, un widget HTML avec le div d’intégration fonctionne :
<div class="naviman_app section_naviman_app" id="SF-123456789-container"></div>
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 :
- Mode Débogage — survolez n’importe quel élément et copiez instantanément son sélecteur
- Outils de développement du navigateur — méthode manuelle via l’inspecteur de navigateur
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 Grille immédiatement avant l'élément sélectionné, affiché comme une section complète.
Exemple : main → le Menu Grille apparaît au-dessus de la zone de contenu principal.
C'est la configuration la plus courante pour un Menu Grille sur WordPress.
Sélecteurs courants pour les thèmes WordPress :
main— la plupart des thèmes#main— Twenty Twenty, Astra, OceanWP.site-main— de nombreux thèmes#content— Divi, certains thèmes par défaut
Option B : Insérer Après
Insère le Menu Grille immédiatement après l'élément sélectionné.
Exemple : header → le Menu Grille apparaît juste en dessous de l'en-tête.
Sélecteurs courants 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
Option C : Remplacer
La plupart des sites WordPress n'ont pas d'élément Menu Grille intégré à remplacer. Insérer Avant main est l'approche recommandée.
Si votre thème a un élément de style grille que vous souhaitez remplacer, utilisez Mode Débogage ou Outils de développement du navigateur pour trouver son sélecteur.
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 : main(D) — insère le Menu Grille uniquement sur bureau.
Conseils pour mobile
- Utilisez Menu Grille Réactif pour changer le nombre de colonnes par point de rupture — par exemple 4 colonnes sur bureau, 2 sur mobile.
- Gardez le contenu des tuiles court — une icône, un label d’un ou deux mots, éventuellement une petite description. Les longs labels se replient de manière imprévisible.
- Visez des cibles de tapotement d’au moins 44 × 44 px y compris le rembourrage.
Mise à jour du menu plus tard
Les modifications dans l’éditeur s’appliquent lors du prochain chargement de la page frontale — aucun vidage de cache WordPress requis.