Comment créer un menu déroulant dans WordPress

Dans cet article, nous vous expliquerons comment créer un menu déroulant dans WordPress étape par étape, avec des captures d'écran ! Vous pouvez tout faire avec les fonctionnalités de base de WordPress, sans avoir besoin d’un plugin tiers. De mauvaises fonctionnalités de navigation peuvent nuire à la convivialité et à l’accessibilité d’un site Web magnifiquement conçu. Il est extrêmement important que vos utilisateurs puissent accéder facilement et rapidement à ce dont ils ont besoin sur votre site.

Surtout si vous avez accumulé beaucoup de pages et de publications, un menu de navigation bien planifié permettra aux utilisateurs d'explorer plus facilement tout ce que vous avez à offrir. Cette fonctionnalité simple peut également vous aider à réduire vos taux de rebond, gardant ainsi les visiteurs plus longtemps. Voyons donc comment créer un menu déroulant dans WordPress, mais nous expliquerons d'abord ce qu'est un menu déroulant pour clarifier tout doute. Commençons !

Peut-être que vous pourriez être intéressé: Façons d'ajouter un formulaire d'abonnement dans WordPress

Qu'est-ce qu'un menu déroulant ?

Le menu par défaut utilisé sur le Web est le menu standard. C'est une conception simple dans laquelle chaque élément de menu est affiché l'un à côté de l'autre horizontalement (parfois verticalement). La mise en page ne contient aucun élément imbriqué, ce qui lui donne un véritable aspect de ce que vous voyez est ce que vous obtenez.

Un menu déroulant est une variante du menu Web standard. Il utilise la même présentation, seuls quelques éléments de menu ont des éléments imbriqués qui « apparaissent » lorsque l'utilisateur survole l'élément parent.

La conception offre un moyen simple de fournir davantage de liens auxquels l’utilisateur peut accéder, ce qui facilite la navigation sur votre site.

Comment créer un menu déroulant dans WordPress : étape par étape

Il existe plusieurs types de menus de navigation, comme vous avez pu le constater en visitant différents sites Internet. Examinons quelques-unes des options les plus populaires. Le type le plus courant est sans doute le menu d’en-tête :

Cependant, les menus de la barre latérale sont également très visibles :

Vous verrez également de nombreux menus de hamburgers sur les sites mobiles, qui s'agrandissent lorsque vous cliquez sur l'icône du hamburger :

Un dernier exemple, que nous créerons également plus tard dans cet article, est le menu déroulant. Tout comme le menu hamburger, ce style économiser de l'espace sur l'écran, car la plupart du contenu est masqué jusqu'à ce qu'il soit nécessaire :

Veuillez noter que certains thèmes ne prennent pas en charge les menus déroulants. La première chose à faire est donc de confirmer que votre thème propose cette option. Vous pouvez généralement le découvrir en consultant la documentation du thème.

Dans le tutoriel suivant, nous allons vous montrer comment utiliser les fonctions natives pour créer un menu déroulant dans WordPress. Un avantage de cette méthode est que vous conserverez les menus que vous créez même si vous changez de thème ou ajoutez de nouveaux plugins à votre site à l'avenir.

Étape 1 : Créer des éléments de menu

Pour commencer, allez sur Apparence > Menus dans votre tableau de bord WordPress. Les options disponibles seront déterminées en partie par votre thème actuel. Cliquez sur l'onglet Modifier les menus, où vous pouvez choisir de créer un nouveau menu :

Entrez un nom dans le champ de saisie sous la section Structure Menu puis cliquez Créer un menu:

Une fois que vous avez créé au moins un menu, vous devriez voir un nouvel onglet intitulé Gérer les emplacements, juste à côté de Modifier les menus.

Vous pouvez maintenant commencer à ajouter des éléments à votre menu. Vous pouvez inclure des pages, des publications et des URL personnalisées. Pour ajouter une page, par exemple, cochez les cases à côté du contenu que vous souhaitez ajouter dans la section Pages à droite, puis sélectionnez ajouter au menu :

Le même processus s’applique aux publications. Si vous souhaitez ajouter un lien vers votre menu, développez la section Liens personnalisés et saisissez une URL ainsi qu'un texte personnalisé :

Vous pouvez suivre des étapes similaires pour ajouter des catégories à votre menu en développant la section Catégories. Tout élément de menu créé de cette manière ouvrira une page contenant tout le contenu d'une catégorie particulière.

Étape 2 : Établissez la structure de votre menu

A ce stade, votre menu n'est pas encore organisé. Tout sera simplement affiché dans l’ordre dans lequel il a été ajouté. Il n’y a pas encore de fonction de liste déroulante. La prochaine étape consiste donc à résoudre ces deux problèmes.

Pour ce faire, vous pouvez simplement glisser et déposer vos éléments de menu partout où ils vont. Vous pouvez même créer des sous-éléments de cette façon. Par exemple, nous avons répertorié trois articles de blog spécifiques à afficher dans l'élément de menu plus large :

Une fois que vous avez fini de personnaliser la structure de votre menu, assurez-vous d'enregistrer vos modifications. Notez également qu'en fonction de votre thème, vous devrez peut-être attribuer votre nouveau menu à un emplacement. Les options pertinentes peuvent être trouvées dans la section Paramètres des menus:

Vous pouvez ensuite consulter votre site dans le frontend pour voir le menu en action. Tout sous-élément sera affiché sous forme de menu déroulant :

N'oubliez pas que les menus de navigation doivent faciliter la navigation sur votre site Web. Par conséquent, vous souhaiterez limiter le nombre d’éléments que vous ajoutez à vos menus, afin qu’ils ne deviennent pas déroutants ou encombrés.

Peut-être voulez-vous savoir : Comment créer un forum dans WordPress | Installation du forum de presse simple

Étape 3 : Ajoutez du CSS à votre menu

Vous pouvez également ajouter un style personnalisé à votre menu déroulant en utilisant des classes CSS. Pour cela, commencez par cliquer option d'affichage en haut de votre tableau de bord :

Cochez la case intitulée Classes CSS :

Cela vous permettra d'ajouter du CSS personnalisé à votre menu. Cela limitera également tous les styles personnalisés aux éléments auxquels leurs classes spécifiques s'appliquent.

Étape 4 : Prévisualisez votre menu

À ce stade, votre menu est presque prêt. Cependant, avant de le finaliser, vous souhaiterez peut-être le vérifier dans WordPress Customizer. Cela vous permet d'apporter des modifications et de voir les effets en temps réel. Cliquez Gérer avec aperçu en direct pour accéder à l'éditeur en direct :

Vous pouvez apporter d'autres modifications ici si nécessaire, comme ajouter, supprimer ou réorganiser des éléments de menu :

Vous n'aurez pas besoin d'un nouvel onglet pour prévisualiser les modifications, car le Personnalisateur vous montre un aperçu en direct de votre site Web.

Étape 5 : Publiez votre menu

Lorsqu'il est prêt, vous pouvez activer votre nouveau menu d'un simple clic. Sélectionnez simplement le bouton Publier :

Cela rendra le menu actif sur votre site et permettra aux visiteurs de commencer à l'utiliser. Il convient également de noter que si vous avez créé plusieurs menus et souhaitez les placer à plusieurs emplacements, vous pouvez également utiliser l'option Personnalisateur pour ça:

Avec Personnalisateur, vous pouvez attribuer des menus à tous les différents emplacements pris en charge par votre thème.

Plugins du menu déroulant

Bien sûr, si vous préférez utiliser plugins pour créer vos menus déroulants, plusieurs options sont disponibles. Voici quelques-uns des meilleurs plugins que vous pouvez utiliser lors de la création d’un menu déroulant dans WordPress, à la fois gratuits et premium :

1. Menu Méga Max: un plugin gratuit qui ajoute de nombreuses options à l'éditeur de menu existant.
2. menu des héros: un outil hautement personnalisable axé sur la réactivité.
3. UberMenu: une solution qui vous donne un contrôle maximal sur le style et la fonctionnalité de vos menus.

N’importe lequel de ces outils peut faire le travail. Celui que vous choisirez dépendra donc de vos préférences personnelles et des fonctionnalités spécifiques que vous recherchez.

3 conseils rapides pour utiliser les menus déroulants

Maintenant que vous savez comment configurer correctement un menu déroulant WordPress, nous voulions vous donner 3 conseils rapides à garder à l’esprit :

1. Lorsque vous utilisez l’option de menu déroulant WordPress par défaut, vous pouvez organiser l’emplacement des sous-menus. Par exemple, si votre menu est intitulé "Restauration» et tu souhaites que «PETIT-DEJEUNER» apparaît avant «Dîner«Faites simplement glisser et déposez le petit-déjeuner par-dessus.
2. Lors de la création de menus, donnez-leur un titre approprié ! Par exemple, si vous avez un menu intitulé « À propos », vous ne souhaitez pas avoir votre « Contact » et votre « FAQ » dans le menu déroulant. À ce propos, nous suggérons d'avoir "Contact«,«Questions fréquentes« Et »À propos de» comme options de menu indépendantes.
3. En règle générale, il ne faut pas mettre tous ses œufs dans le même panier. Dans ce cas, ne créez pas de menu et n'y placez pas tous les sous-menus.

À condition de garder ces 3 conseils à l’esprit lorsque créez vos menus déroulants WordPress, vous serez prêt à partir !

Méga menus : une alternative au menu déroulant

Le menu déroulant WordPress par défaut est excellent en soi, mais si vous recherchez un menu un peu plus raffiné, laissez-nous vous présenter le méga menu.

Les méga menus Il s'agit d'une autre forme de menus déroulants, eux seuls utilisent des liens avancés, des images, des champs de recherche, des cartes et bien plus encore. Ils sont incroyablement faciles à créer lorsque vous utilisez des plugins de méga menu dédiés, en particulier des options telles que UberMenu y Méga Menu Pro.

Jette un coup d'œil à: Comment ajouter des cookies sur WordPress sans plugin (avec et sans plugin)

Pensamientos finales

Si vous suivez les instructions étape par étape que nous fournissons, vous pourrez créer des menus déroulants dans WordPress en seulement quelques minutes. WordPress vous permet de personnaliser presque tout sur votre site Web, il n'y a donc aucune raison pour que vous ne créiez pas de sous-menus faciles à utiliser. Surtout parce qu’ils aident vos clients à naviguer sur votre site Web.

Il est important de créer des sites Web accessibles et attrayants. Une technique simple qui aide dans les deux domaines consiste à créer des menus de navigation déroulants. Ce type de menu est attrayant et facile à utiliser, et il vous permet également d'économiser de l'espace sur l'écran. Pour maintenir un site Web convivial, vous aurez également besoin d’accéder aux bonnes ressources et vous aurez besoin d’un hébergement fiable.