Comment créer un menu déroulant dans WordPress (Guide du débutant)
Voulez-vous créer un menu déroulant dans WordPress ?
Un menu déroulant affiche une liste de liens lorsque vous passez votre souris sur un élément de menu. C'est un excellent moyen d'afficher de nombreuses options dans un petit espace et d'aider les visiteurs à trouver ce qu'ils recherchent en organisant votre contenu en catégories et sous-catégories.
Dans ce guide du débutant, nous allons vous montrer comment créer un menu déroulant dans WordPress.
Pourquoi utiliser les menus déroulants dans WordPress ?
WordPress est livré avec un système de gestion de menus intégré qui vous permet d'ajouter facilement des menus de navigation à votre site WordPress.
Les menus de navigation sont des liens vers les pages les plus importantes de votre site Web et apparaissent généralement dans une rangée à côté du logo de votre site Web.
Si vous démarrez un blog WordPress ou créez un site Web avec seulement quelques pages, il peut être judicieux de créer votre menu sur une seule ligne. Cela permet aux visiteurs de voir toutes vos pages importantes en un coup d’œil.
Cependant, si vous gérez une boutique en ligne ou un grand site Web, vous souhaiterez peut-être ajouter de nombreux liens au menu de navigation. Cela peut être accablant pour les visiteurs et peut donner à votre site Web un aspect désordonné et compliqué.
Les menus déroulants résolvent ce problème en affichant uniquement les liens de menu lorsqu'un visiteur passe la souris sur l'élément parent. Ils vous permettent également d'organiser votre contenu en sujets, catégories ou groupes.
Cela peut aider les visiteurs à trouver ce qu’ils recherchent, même lorsque votre site comporte des centaines, voire des milliers de pages.
Cela étant dit, voyons comment vous pouvez facilement créer des menus déroulants WordPress, puis les ajouter à votre site Web.
Didacticiel vidéo
Si vous n’aimez pas la vidéo ou si vous avez besoin de plus d’instructions, continuez simplement à lire.
Étape 1 : Choisir un thème avec la prise en charge du menu déroulant
WordPress est livré avec un système de gestion de menus intégré, mais l'apparence de ces menus varie en fonction de votre thème WordPress.
Presque tous les thèmes WordPress prennent en charge les menus déroulants par défaut. Cependant, certains thèmes peuvent ne pas disposer d'une prise en charge appropriée des listes déroulantes. Pour commencer, vous devez vous assurer que vous utilisez un thème prenant en charge les menus déroulants.
Comment savoir si votre thème prend en charge la navigation déroulante ?
Si vous avez téléchargé le thème à partir du référentiel WordPress officiel, visitez simplement la page de ce thème et cliquez sur le bouton « Aperçu » pour voir une démo en direct.
Vous pouvez ensuite vérifier si la démo comprend un menu déroulant.
Si vous utilisez un thème WordPress premium, le développeur peut proposer une démo en direct sur son site Web. Vous pouvez également consulter la documentation du thème pour plus d’informations.
Si vous n’êtes toujours pas sûr, vous pouvez toujours demander de l’aide au développeur. Pour en savoir plus sur ce sujet, veuillez consulter notre guide sur la façon de demander correctement l’assistance WordPress et de l’obtenir.
Si votre thème WordPress ne prend pas en charge les menus déroulants, vous devrez alors trouver un thème qui le prend en charge. Pour de nombreux conseils, consultez notre guide sur la façon de choisir le thème WordPress parfait. Vous pouvez également consulter notre guide ultime sur la façon de modifier correctement un thème WordPress.
Pour vous aider, voici quelques excellents thèmes prenant en charge les menus déroulants :
Astra - Un thème WordPress polyvalent doté de plusieurs sites de démarrage et de tonnes de fonctionnalités.
Thèmes StudioPress - Construits sur le cadre de thèmes Genesis, ces thèmes professionnels devraient aider votre site Web à se charger plus rapidement.
OceanWP - Un thème WordPress populaire adapté à tous types de sites Web.
Ultra - Propulsé par le constructeur Themify, ce thème WordPress par glisser-déposer est livré avec de superbes modèles et des options de thème flexibles.
Divi - Un thème populaire d'Elegant Themes qui utilise le générateur de pages Divi et est livré avec des tonnes de fonctionnalités de glisser-déposer, y compris des menus déroulants.
Cela étant dit, voyons comment créer un menu WordPress déroulant.
Étape 2 : Création d'un menu de navigation dans WordPress
Commençons par créer un menu simple.
Si vous avez déjà configuré un menu de navigation sur votre site Web, vous pouvez passer à l'étape suivante.
Pour commencer, accédez à Apparence » Menus dans le tableau de bord WordPress et cliquez sur le lien « Créer un nouveau menu » en haut.
Remarque : Si vous ne voyez pas l'option Apparence » Menus sur votre site et que vous voyez uniquement Apparence » Éditeur, alors cela signifie que l'édition complète du site (FSE) est activée sur votre thème. Dans ce cas, vous pouvez passer directement à la section FSE ci-dessous.
Ensuite, vous devez saisir un nom pour le menu de navigation.
Ceci est juste pour votre référence, vous pouvez donc utiliser tout ce qui vous aide à identifier le menu dans la zone d'administration WordPress.
Après avoir tapé un titre dans le champ « Nom du menu », continuez et cliquez sur « Créer un menu ». WordPress va maintenant créer un nouveau menu vide pour vous.
Ensuite, vous devrez ajouter les liens supérieurs au menu de navigation. Ce sont les éléments qui apparaîtront dans la rangée supérieure de votre menu déroulant et serviront de parents à tous les autres articles et pages.
Dans la colonne de gauche, cochez simplement la case à côté de chaque page que vous souhaitez ajouter. Ensuite, cliquez sur le bouton « Ajouter au menu ».
Ces pages apparaîtront désormais dans la colonne de droite sous « Structure du menu ».
Vous pouvez également sélectionner des articles de blog, des catégories ou ajouter des liens personnalisés. Pour des instructions plus détaillées, veuillez consulter notre guide sur la façon d'ajouter un menu de navigation dans WordPress.
Étape 3 : ajout de sous-éléments à un menu
Ensuite, nous devons ajouter des sous-éléments qui apparaîtront dans le menu déroulant. Vous pouvez ajouter un sous-élément sous n'importe lequel des éléments de menu existants.
Dans ce guide, nous allons vous montrer comment ajouter des catégories de sujets sous un élément de menu « Blog », mais les étapes seront similaires quel que soit le contenu que vous ajoutez.
Dans la colonne de gauche, sélectionnez simplement toutes les pages que vous souhaitez ajouter en tant que sous-éléments, puis cliquez sur le bouton « Ajouter au menu ». Vos articles apparaîtront désormais dans la colonne de droite.
Cependant, par défaut, ces liens apparaissent tous comme des éléments de menu normaux, ce qui signifie qu'ils seront ajoutés à la rangée supérieure.
Nous devons plutôt en faire des sous-éléments d'un parent.
Pour ce faire, faites simplement glisser et déposez un élément de menu et placez-le sous le parent souhaité. Ensuite, déplacez-le légèrement vers la droite et il deviendra un sous-élément.
Maintenant, répétez simplement ce processus pour chaque sous-élément que vous souhaitez afficher dans la liste déroulante.
Lorsque vous êtes satisfait de la configuration du menu, n'oubliez pas de cliquer sur le bouton « Enregistrer le menu » pour enregistrer vos modifications.
Étape 4 : Publiez votre menu déroulant
Si vous modifiez un menu déjà disponible sur votre site Web, les visiteurs verront immédiatement vos modifications.
Cependant, si vous créez un nouveau menu, vous devrez alors choisir un emplacement pour ce menu.
Chaque thème WordPress définit ses propres emplacements de menu, que vous verrez dans la colonne de droite sous « Paramètres du menu ». Cochez simplement la case à côté de l'emplacement que vous souhaitez utiliser, puis cliquez sur « Enregistrer le menu ».
Vous pouvez maintenant visiter votre site Web pour voir le menu déroulant en action.
Comment créer un menu déroulant à l'aide de l'éditeur de site complet
Si vous utilisez un thème basé sur des blocs comme Hestia Pro, vous pouvez ajouter un menu déroulant à n'importe quelle partie de votre site à l'aide de l'éditeur complet du site.
Pour commencer, accédez simplement à Thèmes » Éditeur dans le tableau de bord WordPress.
Par défaut, l’éditeur complet du site affichera le modèle d’accueil de votre thème.
Pour ajouter un menu déroulant à une autre partie de votre site Web, cliquez sur « Modèles » ou « Parties du modèle ».
Par exemple, si vous créez un menu de navigation principal, vous souhaiterez généralement l'ajouter à la partie du modèle d'en-tête.
L'éditeur affichera désormais une liste de toutes les mises en page qui composent votre thème WordPress.
Cliquez simplement sur le modèle ou la partie du modèle où vous souhaitez ajouter le menu déroulant.
WordPress affichera maintenant un aperçu du modèle.
Pour modifier ce modèle, continuez et cliquez sur la petite icône en forme de crayon.
Cela fait, cliquez sur l’icône bleue « + » dans le coin supérieur gauche.
Dans la barre de recherche qui apparaît, saisissez « Navigation ».
Lorsque le bon bloc apparaît, faites-le glisser et déposez-le sur votre conception.
Maintenant, cliquez simplement pour sélectionner ce bloc et vous verrez tous les différents paramètres que vous pouvez utiliser pour personnaliser le bloc de navigation.
Par exemple, vous pouvez modifier la mise en page, modifier les paramètres d'affichage, modifier la couleur du texte et de l'arrière-plan et ajuster la taille de la police.
Pour ajouter les pages de niveau supérieur à votre menu, cliquez simplement sur le bouton « + ».
Ensuite, sélectionnez « Lien vers la page ».
Dans la fenêtre contextuelle qui apparaît, commencez à saisir le titre ou l'URL de la page que vous souhaitez ajouter.
Lorsque la bonne page apparaît, cliquez pour l'ajouter au menu.
Répétez simplement ce processus pour ajouter tous les éléments de niveau supérieur au menu déroulant.
Cela fait, vous pouvez ajouter un sous-menu à n'importe quel élément parent.
Dans le menu de droite, cliquez sur l'icône en pointillé à côté de l'élément parent. Ensuite, sélectionnez « Ajouter un lien de sous-menu ».
Dans la popup qui apparaît, saisissez le titre ou l'URL de la page que vous souhaitez afficher dans le menu déroulant.
Lorsque la bonne page apparaît, cliquez pour l'ajouter en tant qu'élément de sous-menu.
Maintenant, répétez simplement ces étapes pour tous les éléments que vous souhaitez afficher dans le menu déroulant.
Lorsque vous êtes satisfait de la configuration du menu, cliquez sur « Enregistrer » pour enregistrer vos modifications.
Désormais, si vous visitez votre site Web, vous verrez le menu déroulant en action.
Conseils pour créer des menus déroulants interactifs
Les menus de navigation sont importants car ils constituent le premier endroit où les visiteurs chercheront du contenu intéressant ou des informations spécifiques.
Les utiliser correctement aidera les visiteurs à s’orienter sur votre site Web. Cela vous aidera également à obtenir plus de conversions et de ventes tout en augmentant vos pages vues et en réduisant votre taux de rebond.
Dans cet esprit, voici quelques conseils pour créer des menus déroulants utiles et conviviaux.
1. Créer des menus déroulants à plusieurs niveaux
Dans ce guide, nous vous avons montré comment créer une ligne supérieure et un ensemble de sous-éléments. Cependant, vous pouvez également ajouter un sous-élément sous un autre sous-élément pour créer des menus déroulants à plusieurs niveaux.
Cela peut être utile pour les sites qui ont beaucoup de contenu ou de nombreuses catégories de contenu différentes.
Par exemple, si vous utilisez un plugin tel que WooCommerce pour vendre des produits en ligne, vous pouvez avoir une catégorie « Électronique » et une sous-catégorie « Ordinateur portable ». Cependant, vous pouvez également avoir d'autres sous-catégories, telles que « Ordinateurs portables Apple » ou « Sacs et étuis pour ordinateurs portables ».
Dans ce cas, il peut être judicieux de créer une liste déroulante à plusieurs niveaux pour votre boutique en ligne. Pour ce faire, faites simplement glisser n'importe quelle page sous un sous-élément et déplacez-la légèrement vers la droite.
2. Créer plusieurs menus déroulants
Vous pouvez créer autant de menus déroulants que vous le souhaitez, puis les afficher dans différentes zones de votre site Web.
Par exemple, si vous gérez une place de marché en ligne, vous pouvez créer un menu déroulant affichant uniquement les catégories de produits.
C'est idéal pour vos pages de produits, mais vous souhaiterez peut-être également créer un menu déroulant unique pour votre page d'accueil, afin que les acheteurs puissent trouver différentes zones de votre site, telles que le formulaire de contact et le blog.
Créez simplement un nouveau menu déroulant en suivant le même processus décrit ci-dessus, puis utilisez les paramètres « Emplacement » pour contrôler l'endroit où cette liste déroulante apparaît sur votre site Web.
3. Créez des menus avec un aperçu en direct
Si la création de votre menu déroulant dans le tableau de bord devient trop compliquée, vous pouvez passer au personnalisateur WordPress. Accédez simplement à Apparence » Personnaliser pour lancer le personnalisateur de thème en direct.
À partir de là, cliquez sur l’onglet « Menus », puis sélectionnez le menu de navigation. Vous verrez maintenant un éditeur glisser-déposer dans la colonne de gauche avec un aperçu en direct de votre site dans le panneau de droite.
Vous pouvez maintenant travailler sur votre menu et toutes les modifications que vous apportez apparaîtront dans l'aperçu en direct.
4. Création d'un grand méga menu sous forme de liste déroulante dans WordPress
Si vous avez beaucoup de contenu, vous aurez peut-être du mal à l'organiser proprement à l'aide d'un menu déroulant standard.
Au lieu de cela, vous pouvez afficher la structure complète de votre site Web sous la forme d'un méga menu qui n'apparaît que lorsque les utilisateurs survolent le menu principal.
Les méga-menus sont similaires à un menu déroulant, mais ils peuvent afficher beaucoup plus de liens, de sous-menus et d'autres éléments. Pour des instructions détaillées, consultez notre didacticiel étape par étape sur la création d'un méga menu dans WordPress.
Nous espérons que cet article vous a aidé à apprendre à créer facilement un menu déroulant dans WordPress. Vous voudrez peut-être également consulter notre guide sur la façon de déplacer correctement WordPress de HTTP vers HTTPS ou nos choix d'experts pour les plugins WordPress indispensables pour les sites Web d'entreprise.
Si vous avez aimé cet article, abonnez-vous à notre chaîne YouTube pour les didacticiels vidéo WordPress. Vous pouvez également nous trouver sur Twitter et Facebook.