À quoi ça sert
Websource Mega Menu remplace le menu de votre site par un menu que vous composez vous-même, sans code.
- Vous glissez les éléments pour les ordonner ou les ranger les uns dans les autres.
- Un élément peut être une catégorie de produits, une marque, un produit, une page, un lien libre, un titre de colonne ou une image avec texte et bouton.
- Les listes (sous-catégories, marques, produits, sous-pages) se remplissent toutes seules et se mettent à jour quand votre catalogue change.
- Chaque élément peut recevoir une icône, une pastille (« Nouveau », « -20 % »…) et une position dans la barre.
- Sur ordinateur, le menu ouvre des panneaux au survol. Sur mobile, il devient un tiroir ou un accordéon.
- Vous travaillez sur un brouillon. Le site ne change que lorsque vous cliquez sur Mettre en ligne.
L'extension fonctionne sans WooCommerce. Dans ce cas, les éléments de la boutique (catégorie de produits, marque, produit, liste de produits) ne sont pas proposés.
Installation
- Dans l'administration de WordPress, ouvrez Extensions > Ajouter une extension, puis Téléverser une extension.
- Choisissez le fichier
websource-megamenu.zip, puis cliquez sur Installer maintenant. - Cliquez sur Activer.
- Ouvrez Apparence > Mega Menu.
À l'activation, un menu « Menu principal » est créé et mis en ligne :
- avec WooCommerce : une entrée par catégorie de produits de premier niveau (ses sous-catégories s'ouvrent dans une languette) et une entrée « Marques » ;
- sans WooCommerce : l'accueil et les pages principales du site.
Sur un thème à blocs, ce menu prend la place du bloc Navigation de l'en-tête. Sur un thème classique, il prend la place du premier emplacement de menu du thème. Vous pouvez le modifier, le déplacer ou le supprimer.
Prise en main en 5 minutes
- Ouvrez Apparence > Mega Menu. La page Mes menus liste vos menus.
- Cliquez sur + Nouveau menu. Donnez un nom, choisissez Où l'afficher ? et Partir de (un exemple, un menu vide ou un menu WordPress existant). Cliquez sur Créer et commencer.
- Dans Structure du menu, cliquez sur + Ajouter un élément. Choisissez par exemple Une catégorie de produits, puis sélectionnez la catégorie à droite.
- Ajoutez d'autres éléments. Glissez-les pour changer l'ordre. Déposez un élément au milieu d'un autre pour le ranger dedans.
- Regardez l'aperçu au centre. Les boutons Ordinateur et Mobile changent la taille de l'aperçu.
- Le brouillon s'enregistre tout seul (« Enregistré automatiquement à… »).
- Cliquez sur Mettre en ligne. Le menu apparaît sur le site.
Réglages
Mes menus
La page Apparence > Mega Menu affiche une carte par menu.
| Réglage | Rôle |
|---|---|
| Pastille d'état | Brouillon : jamais mis en ligne. En ligne : visible sur le site. Hors ligne : mis en ligne puis masqué. Modifications non publiées : le brouillon diffère de la version en ligne. |
| Interrupteur | Affiche ou masque le menu sur le site, sans le supprimer. Disponible après la première mise en ligne. |
| Modifier | Ouvre l'éditeur du menu. |
| Dupliquer | Crée une copie du menu, en brouillon. |
| Supprimer | Supprime le menu définitivement, après confirmation. |
| + Nouveau menu | Ouvre la fenêtre Créer un menu : Nom du menu, Où l'afficher ?, Partir de. |
| Exporter | Télécharge tous vos menus dans un fichier websource-megamenu.json. |
| Importer | Charge un fichier exporté. Analyser le fichier annonce ce qui sera créé, mis à jour ou supprimé ; Importer maintenant applique. |
Réglages du menu
Dans l'éditeur, les Réglages du menu s'affichent à droite tant qu'aucun élément n'est sélectionné. Pour y revenir, cliquez sur ← Réglages du menu.
| Réglage | Rôle |
|---|---|
| Où afficher ce menu ? | Barre de navigation, sur toute la largeur (haut de page) : tout en haut de chaque page. À la place du bloc Navigation de l'en-tête ou du pied de page : pour les thèmes à blocs. À la place de l'emplacement de menu du thème : pour les thèmes classiques (un choix par emplacement du thème). Pied de page (bas de page) : en bas de chaque page. Je le place moi-même (bloc ou code court) : vous insérez le menu où vous voulez. |
| Présentation | Barre horizontale avec grands panneaux ou Colonnes de liens (idéal en pied de page). |
| Couleur du menu | Clair, Foncé ou Couleur principale du site. |
| Taille des sous-menus | Petite languette sous l'élément, Grand panneau à la largeur du site ou Grand panneau sur toute la largeur de l'écran. |
| Position des éléments | À gauche ou Centrés. |
| Menu sur mobile | Menu « push » : un tiroir qui repousse la page. Accordéon sous le bouton Menu. |
| Nom du menu pour les lecteurs d'écran (par langue) | Texte lu par les lecteurs d'écran. Vide : le nom du menu est utilisé. |
| Niveaux de sous-menus autorisés | De 2 à 6 (4 par défaut). |
| Code court à copier | Affiché quand vous placez le menu vous-même. |
| ↺ Abandonner mes modifications | Revient à la version en ligne. Affiché quand le brouillon a changé. |
La barre du haut contient le nom du menu, l'état, Annuler (Ctrl+Z), Rétablir (Ctrl+Y), Ordinateur / Mobile et Mettre en ligne.
Ajouter un élément
Cliquez sur + Ajouter un élément, ou sur le + d'un élément pour ajouter à l'intérieur.
| Réglage | Rôle |
|---|---|
| Une catégorie de produits | Lien vers la catégorie. Ajouter automatiquement ses sous-catégories sur 1 à 3 niveaux. |
| Une marque | Lien vers une marque de WooCommerce. |
| Toutes les marques | Liste automatique des marques. Nombre de marques à afficher : 1 à 50. |
| Un produit | Lien vers un produit, trouvé par son nom ou sa référence. |
| Une liste de produits | Les nouveautés, Les meilleures ventes, Les produits d'une catégorie ou Ma sélection de produits. 1 à 20 produits. |
| Une page du site | Accueil, Blog, Boutique, Nouveaux produits, Meilleures ventes, Panier, Commande, Mon compte, Connexion, Politique de confidentialité, Conditions générales de vente. |
| Une page de contenu | Lien vers une page WordPress. |
| Toutes les sous-pages d'une page | Liste automatique des pages enfants d'une page. |
| Un terme de taxonomie | Catégorie d'articles, étiquette ou taxonomie personnalisée, avec ses sous-termes si vous le souhaitez. |
| Un lien libre ou un titre | Adresse de votre choix (https://…, /contact, mailto:, tel:). Sans adresse : simple titre. |
| Un titre de colonne | Range les liens en colonnes dans un grand panneau. |
| Une image avec texte et bouton | Visuel, titre, texte, bouton. Image JPG, PNG, WebP, GIF ou AVIF, 5 Mo maximum. |
Le champ Texte affiché est facultatif pour les éléments reliés à votre catalogue : laissé vide, il reprend le nom de la catégorie, de la page, de la marque ou du produit.
Réglages d'un élément
Cliquez sur un élément de la structure. Ses réglages s'affichent à droite, en trois sections repliables.
| Réglage | Rôle |
|---|---|
| Icône (facultative) | Choisir une icône ouvre la bibliothèque (66 icônes), l'envoi de votre image ou SVG (1 Mo maximum) et la saisie d'un emoji. |
| Que montrer ? | Icône + texte, Icône seule (le texte reste lu par les lecteurs d'écran) ou Texte seul. |
| Place de l'icône | Avant le texte ou Après le texte. |
| Taille de l'icône | De Très petite à Très grande. |
| Texte de la pastille | Texte court : « Nouveau », « -20 % », « Promo ». Vide : pas de pastille. |
| Position de la pastille | Flottante, en haut à droite de l'onglet ou À la suite du texte. |
| Couleurs de la pastille | Couleur d'accent ou couleur principale du thème, Foncée, Claire, Verte, Rouge, Comme le menu, ou Personnalisées (fond et texte, avec transparence). |
| Forme de la pastille | Pastille arrondie, Angles adoucis ou Rectangle. |
| Ouvrir dans un nouvel onglet | Ouvre le lien dans un nouvel onglet. |
| Ajouter « nofollow » | Le lien ne transmet pas de référencement. |
| Position dans la barre du menu | Normale, Au centre de la barre ou À droite de la barre. Concerne le premier niveau, sur ordinateur. |
| Où l'afficher ? | Partout, Seulement sur ordinateur ou Seulement sur mobile. |
Sous les réglages, six boutons déplacent l'élément sans le glisser : ↑ Monter, ↓ Descendre, ⇥ Ranger dans le précédent, ⇤ Sortir d'un niveau, ⧉ Dupliquer, 🗑 Supprimer.
Bloc « Websource Mega Menu »
Dans l'éditeur de pages ou l'éditeur de site, ajoutez le bloc Websource Mega Menu.
| Réglage | Rôle |
|---|---|
| Menu à afficher | Le menu à afficher. Menus placés « moi-même » (automatique) affiche tous les menus en ligne réglés sur Je le place moi-même. |
| Gérer les menus | Ouvre Apparence > Mega Menu. |
| Alignement | Grande largeur ou Pleine largeur, dans la barre d'outils du bloc. |
Cas d'usage
Un méga-menu de boutique
- Créez un menu et choisissez Grand panneau à la largeur du site dans Taille des sous-menus.
- Ajoutez vos catégories avec Ajouter automatiquement ses sous-catégories.
- Ajoutez un lien libre « Aide » sans adresse. À l'intérieur, ajoutez Un titre de colonne, puis des pages de contenu dans ce titre.
- Toujours dans « Aide », ajoutez Une image avec texte et bouton pour mettre une information en avant.
- Mettez en ligne.
Des colonnes de liens en pied de page
- Créez un menu. Dans Présentation, choisissez Colonnes de liens (idéal en pied de page).
- Ajoutez un titre de colonne par colonne, puis les liens à l'intérieur.
- Dans Où afficher ce menu ?, choisissez le pied de page, ou placez-le vous-même avec le bloc ou le code court.
Reprendre le menu WordPress existant
- Cliquez sur + Nouveau menu.
- Dans Partir de, choisissez Le menu WordPress existant « … ».
- Les pages, catégories de produits, marques et produits restent reliés à leur fiche. Les autres liens deviennent des liens libres.
Le menu sur mobile
Sous 992 px de large, la barre devient un bouton Menu. Avec le menu « push », il ouvre un tiroir ; les sous-menus se déplient au toucher.
Un site en plusieurs langues
Avec Polylang ou WPML, un sélecteur de langue apparaît en haut de l'éditeur. Saisissez les textes et les adresses dans chaque langue. Un texte non saisi dans une langue reprend celui de la langue par défaut ; vous pouvez aussi le traduire dans l'écran de traduction de chaînes de Polylang ou de WPML (groupe « Websource Mega Menu »).
Questions fréquentes
Le menu WordPress d'origine est-il supprimé ? Non. L'extension l'affiche à sa place seulement. Masquez ou supprimez le méga-menu : le menu d'origine revient.
Puis-je avoir plusieurs menus ? Oui. Chaque menu a son emplacement.
Le menu ralentit-il le site ? La feuille de style et le script ne sont chargés que sur les pages où un menu est affiché. Le script n'est chargé que pour les menus en barre. Le contenu des menus est mis en cache 15 minutes au plus et le cache est vidé à chaque modification d'une page, d'un produit ou d'une catégorie.
Le menu est-il utilisable au clavier ? Oui. Tab passe d'un lien à l'autre, Entrée ouvre un sous-menu, Flèche bas ouvre le sous-menu et place le curseur sur son premier lien, Échap ferme.
Le menu affiche-t-il des prix ? Non. Il n'affiche que des noms et des liens.
Les moteurs de recherche voient-ils le menu ?
Oui. Le menu est du HTML classique, et chaque menu est décrit par des données structurées SiteNavigationElement.
Dépannage
| Problème | Solution |
|---|---|
| Le menu ne s'affiche pas. | Vérifiez qu'il est En ligne et que l'interrupteur est activé dans Mes menus. Vérifiez Où afficher ce menu ?. |
| Le menu ne remplace pas la navigation de l'en-tête. | Sur un thème à blocs, l'en-tête doit contenir un bloc Navigation. Sur un thème classique, choisissez l'emplacement de menu du thème. Sinon, insérez le bloc Websource Mega Menu. |
| Mes modifications ne sont pas visibles sur le site. | Cliquez sur Mettre en ligne. Si vous utilisez une extension de cache de pages, videz son cache. |
| Un élément a disparu du menu. | La page, la catégorie ou le produit a été supprimé ou n'est plus publié. Choisissez-en un autre dans l'éditeur. |
| Les éléments « boutique » ne sont pas proposés. | Ils demandent WooCommerce. Les marques demandent une version de WooCommerce qui fournit la taxonomie des marques (product_brand). |
| « Icône refusée » ou « Ce fichier SVG est illisible ». | Envoyez un SVG simple (formes et tracés), ou une image PNG, JPG, WebP, GIF ou AVIF de 1 Mo au plus. |
| Le sous-menu se ferme quand je clique sur la flèche à la souris. | Le survol l'a déjà ouvert ; le clic sur la flèche le referme. C'est le comportement prévu. |
Désinstallation
- Ouvrez Extensions > Extensions installées.
- Cliquez sur Désactiver sous Websource Mega Menu. Vos menus sont conservés ; le menu d'origine du thème revient.
- Pour tout retirer, cliquez sur Supprimer. La table des menus, les réglages, le cache et les images envoyées depuis l'éditeur sont supprimés.
Pensez à Exporter vos menus avant de supprimer l'extension si vous voulez les réutiliser.