Comment créer un menu déroulant dans WordPress (Guide pour débutants)

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. Vous pouvez utiliser ces menus pour afficher de nombreuses options dans un petit espace et aider les visiteurs à trouver ce qu'ils cherchent en organisant les liens par catégories.

Dans ce guide pour débutants, nous allons vous montrer comment créer un menu déroulant dans WordPress.

Pourquoi utiliser des menus déroulants dans WordPress ?

WordPress est doté d'un système de gestion de menus intégré qui vous permet d'ajouter facilement des menus de navigation à votre site.

Les menus de navigation sont des liens vers les pages les plus importantes de votre site web et apparaissent généralement en ligne à 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 alors être judicieux de créer votre menu en une seule ligne. Les visiteurs pourront ainsi 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 pouvez avoir beaucoup de contenu. L'ajout de tous ces liens au menu peut être écrasant et rendre votre site désordonné.

Les menus déroulants résolvent ce problème en n'affichant les liens du menu que lorsque le visiteur survole l'élément parent avec sa souris. Ils vous permettent également d'organiser votre contenu par sujets, catégories ou groupes. Vous pouvez même ajouter des titres à vos menus.

Similaires aux menus de navigation verticaux, ils sont parfaits pour afficher beaucoup de contenu dans un petit espace.

Cela étant dit, examinons comment vous pouvez facilement créer des menus déroulants WordPress, puis les ajouter à votre site web.

Tutoriel vidéo

S'abonner à WPBeginner

Si vous n'aimez pas la vidéo ou si vous avez besoin d'instructions supplémentaires, continuez à lire.

Étape 1 : Choisir un thème avec prise en charge des menus déroulants

WordPress est livré avec un système de gestion de menus intégré, mais l'apparence de ces menus dépendra 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 avoir une prise en charge adéquate des menus déroulants. Pour commencer, vous devez vous assurer que votre thème prend 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 depuis le répertoire officiel de WordPress, 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 inclut un menu déroulant.

Si vous utilisez un thème WordPress premium, le développeur peut avoir 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, consultez notre guide sur comment demander correctement le support WordPress et l’obtenir.

Si votre thème WordPress ne prend pas en charge les menus déroulants, vous devrez en trouver un qui le fasse. Pour de nombreux conseils, consultez notre guide sur la façon de choisir le thème WordPress parfait.

Pour vous aider, voici quelques excellents thèmes qui prennent en charge les menus déroulants :

• Astra – Un thème WordPress polyvalent qui est livré avec plusieurs sites de démarrage et des tonnes de fonctionnalités.
• Thèmes StudioPress – Basés sur le framework de thème Genesis, ces thèmes professionnels devraient aider votre site Web à se charger plus rapidement.
• OceanWP – Un thème WordPress populaire adapté à toutes sortes de sites Web.
• Ultra – Propulsé par le constructeur Themify, ce thème WordPress par glisser-déposer est livré avec de beaux modèles et des options de thème flexibles.
• Divi – Un thème populaire d'Elegant Themes qui utilise le constructeur de pages Divi et offre des tonnes de fonctionnalités de glisser-déposer, y compris les menus déroulants.

Cela dit, jetons un coup d'œil à la façon de créer un menu déroulant WordPress.

Étape 2 : Créer 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, allez dans Apparence » Menus dans le tableau de bord WordPress, puis cliquez sur le lien « Créer un nouveau menu ».

Remarque : Si vous voyez plutôt Apparence » Éditeur, cela signifie que votre thème prend en charge l'édition complète du site (FSE). Dans ce cas, vous pouvez passer à 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 l'espace d'administration de WordPress.

Après avoir saisi un titre dans le champ « Nom du menu », cliquez sur « Créer le menu ». WordPress va maintenant créer un menu vide pour vous.

Ensuite, vous devrez ajouter les liens principaux au menu de navigation. Ce sont les éléments qui apparaîtront dans la rangée supérieure de votre menu déroulant et qui 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 maintenant 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 comment ajouter un menu de navigation dans WordPress.

Étape 3 : Ajout d'éléments secondaires à un menu

Ensuite, nous devons ajouter des éléments secondaires qui apparaîtront dans le menu déroulant. Vous pouvez ajouter un élément secondaire sous n'importe quel élément de menu existant.

Dans ce guide, nous vous montrerons 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 qu'éléments secondaires, puis cliquez sur le bouton « Ajouter au menu ». Vos éléments apparaîtront maintenant dans la colonne de droite.

Cependant, par défaut, tous ces liens apparaissent comme des éléments de menu réguliers, ce qui signifie qu'ils seront ajoutés à la rangée supérieure.

Nous devons plutôt en faire des éléments secondaires 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 élément secondaire.

Maintenant, répétez simplement ce processus pour chaque élément secondaire que vous souhaitez afficher dans le menu déroulant.

Lorsque vous êtes satisfait de la configuration du menu, n'oubliez pas de cliquer sur le bouton « Enregistrer le menu » pour sauvegarder vos modifications.

Étape 4 : Publiez votre menu déroulant

Si vous modifiez un menu déjà en ligne sur votre site web, les visiteurs verront vos modifications immédiatement.

Cependant, si vous créez un nouveau menu, vous devrez choisir un emplacement pour ce menu.

Chaque thème WordPress a ses propres emplacements de menu, que vous pouvez trouver dans la section « Paramètres du menu » sur le côté droit de l'écran. Cochez simplement la case à côté de l'emplacement que vous souhaitez utiliser, puis cliquez sur le bouton « Enregistrer le menu ».

Alternativement, vous pouvez ajouter des menus de navigation personnalisés dans votre thème WordPress.

Une fois cela fait, vous pouvez 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 alors ajouter un menu déroulant à n'importe quelle partie de votre site en utilisant l'éditeur de site complet.

Pour commencer, allez simplement dans Apparences » Éditeur dans le tableau de bord WordPress.

Par défaut, l'éditeur de site complet affichera le modèle de page d'accueil de votre thème.

Pour ajouter un menu déroulant à une autre partie de votre site web, cliquez sur « Modèles » ou « Motifs ».

L'éditeur affichera maintenant une liste de tous les modèles ou parties de modèles qui composent votre thème WordPress.

Allez-y simplement et cliquez sur la zone où vous souhaitez ajouter le menu déroulant. Par exemple, si vous créez un menu de navigation principal, vous voudrez généralement sélectionner la partie de modèle d'en-tête.

WordPress affichera maintenant un aperçu du modèle ou de la partie de modèle.

Pour modifier ce modèle, cliquez sur la petite icône en forme de crayon.

Une fois cela fait, cliquez sur l’icône bleue « + » dans le coin supérieur gauche.

Dans la barre de recherche qui apparaît, tapez « 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, changer 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 « + ».

Dans la fenêtre contextuelle qui apparaît, commencez à taper le titre ou l'URL de la page que vous souhaitez ajouter. Lorsque la bonne page s'affiche, 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.

Une fois cela fait, vous pouvez ajouter un sous-menu à n'importe quel élément parent.

Dans le menu de droite, cliquez sur l'icône pointillée à côté de l'élément parent. Ensuite, sélectionnez « Ajouter un lien de sous-menu ».

Dans la fenêtre contextuelle qui apparaît, tapez le titre ou l'URL de la page que vous souhaitez afficher dans le menu déroulant.

Lorsque la bonne page s'affiche, 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 sauvegarder vos modifications.

Maintenant, 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 sont le premier endroit où les visiteurs se rendront pour trouver du contenu intéressant ou des informations spécifiques.

Les utiliser correctement aidera les visiteurs à naviguer 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 cette optique, voici quelques conseils pour créer des menus déroulants utiles et conviviaux.

1. Créez des menus déroulants à plusieurs niveaux

Dans ce guide, nous vous avons montré comment créer une rangée supérieure et un ensemble d'éléments enfants. Cependant, vous pouvez également ajouter un élément enfant sous un autre élément enfant 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 gérez une boutique en ligne, vous pourriez avoir une catégorie « Électronique » et une sous-catégorie « Ordinateurs portables ». Cependant, vous pourriez é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 un menu déroulant à plusieurs niveaux. Pour ce faire, faites simplement glisser n'importe quelle page sous un élément enfant 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, vous pourriez créer un menu déroulant affichant uniquement les catégories de produits.

C'est idéal pour vos pages produits, mais vous pourriez également vouloir 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 où ce menu déroulant apparaît sur votre site web.

3. Créer 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. Allez simplement dans Apparence » Personnaliser pour lancer le personnalisateur de thème WordPress 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 s'afficheront dans l'aperçu en direct.

4. Créer un grand méga menu comme menu déroulant dans WordPress

Si vous avez beaucoup de contenu, vous pourriez avoir 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 forme de méga menu qui n'apparaît que lorsque les utilisateurs survolent le menu principal.

Les méga menus sont similaires aux menus déroulants, mais ils peuvent afficher beaucoup plus de liens, de sous-menus et d'autres éléments. Pour des instructions détaillées, consultez notre tutoriel étape par étape sur comment créer un méga menu dans WordPress.

4. Exportez vos menus déroulants

Vous gérez plusieurs sites WordPress ? Dans ce cas, vous voudrez peut-être utiliser la même mise en page et le même design de menu sur tous vos sites.

La fonctionnalité d'importation/exportation par défaut de WordPress ne vous permet pas d'importer et d'exporter les menus seuls, mais il est possible de transférer vos menus à l'aide d'un plugin.

Pour des instructions détaillées étape par étape, veuillez consulter notre guide sur comment importer et exporter des menus de navigation dans WordPress.

Nous espérons que cet article vous a aidé à apprendre comment créer facilement un menu déroulant dans WordPress. Vous pourriez également consulter notre guide sur comment ajouter une barre de recherche à votre menu, ou découvrir notre sélection d'experts des meilleurs tutoriels pour maîtriser les menus de navigation WordPress.

Si cet article vous a plu, abonnez-vous à notre chaîne YouTube pour des tutoriels vidéo WordPress. Vous pouvez également nous retrouver sur Twitter et Facebook.