Un menu latéral déroulant est un excellent moyen de fournir un accès facile aux liens et au contenu importants tout en gardant la conception de votre site Web propre et organisée.
Cette fonctionnalité permet aux utilisateurs d'étendre et de réduire le menu, leur donnant le contrôle de leur expérience de navigation.
Nous avons remarqué que de nombreux grands sites Web, boutiques de commerce électronique et sites avec des mises en page plus complexes l'utilisent pour faciliter la navigation.
Dans cet article, nous vous montrerons comment créer facilement un menu latéral déroulant dans WordPress.
💡Réponse rapide : Comment ajouter un menu de barre latérale rétractable dans WordPress
Le moyen le plus simple d'ajouter un menu de barre latérale rétractable est d'utiliser le plugin Bellows Accordion Menu.
Il vous permet de concevoir un menu à plusieurs niveaux dans votre tableau de bord et de l'ajouter à votre barre latérale à l'aide d'un simple shortcode.
Qu'est-ce qu'un menu latéral déroulant ? (Et quand en utiliser un)
Un menu de barre latérale rétractable (ou menu déroulant) est une liste de navigation qui masque les sous-éléments jusqu'à ce qu'un visiteur clique pour les révéler. Il organise les liens dans une structure « parent-enfant », gardant la conception de votre site épurée.
Nous recommandons souvent d'utiliser des menus rétractables pour les grands sites Web ou les boutiques de commerce électronique. Voici pourquoi ils sont efficaces :
- Organiser des mises en page complexes : Ils vous aident à trier des centaines de catégories ou de pages sans submerger l'utilisateur.
- Économiser de l'espace d'écran : En masquant les éléments enfants, vous gardez la barre latérale courte et bien rangée.
- Améliorer l'expérience mobile : Ils évitent aux utilisateurs mobiles d'avoir à faire défiler des listes interminables de liens.
Par exemple, le journal The Guardian utilise un menu rétractable pour son site mobile afin de gérer ses nombreuses catégories d'actualités.
Maintenant, jetons un coup d'œil à la façon dont vous pouvez facilement créer un menu de barre latérale rétractable sur votre site WordPress.
Comment créer un menu latéral déroulant dans WordPress
Vous pouvez créer un menu latéral déroulant dans WordPress en utilisant le plugin Bellows Accordion Menu.
Il fournit un shortcode pratique qui vous permet de placer votre menu déroulant sur n'importe quelle page, publication ou zone de widget, y compris votre barre latérale.
Remarque : Ce plugin est conçu pour être utilisé avec les thèmes classiques.
Étape 1 : Installer et activer le plugin d'accordéon Bellows
Tout d'abord, vous devrez installer et activer le plugin Bellows Accordion Menu. Si vous avez besoin d'aide, consultez notre guide pour débutants sur comment installer un plugin WordPress.
Étape 2 : Créer un nouveau menu
Après l'activation, visitez la page Apparence » Menus dans votre tableau de bord WordPress.
Tapez un nom pour votre menu dans le champ « Nom du menu ». Cliquez ensuite sur le bouton « Créer un menu ».
Étape 3 : Ajouter et organiser les éléments du menu
Ensuite, choisissez les pages que vous souhaitez ajouter dans la colonne de gauche et cliquez sur « Ajouter au menu ».
Si vous souhaitez voir la liste de toutes les pages de votre site Web, cliquez sur l'onglet « Tout afficher ». Pour plus de détails, veuillez consulter notre guide sur comment ajouter un menu de navigation dans WordPress.
Pour créer l'effet de réduction, vous devez organiser les éléments dans une relation parent-enfant. Faites simplement glisser un élément de page légèrement vers la droite sous un élément parent.
Faites-le glisser vers la droite jusqu'à ce que vous voyiez le contour pointillé se décaler vers l'intérieur. Cela confirme que l'élément est maintenant un sous-élément, qui sera masqué jusqu'à ce que le parent soit cliqué.
Désormais, lorsqu'un visiteur clique sur un élément parent de votre menu déroulant, celui-ci s'agrandira pour révéler tout le contenu enfant.
N'oubliez pas de cliquer sur le bouton « Enregistrer le menu » lorsque vous avez terminé.
Étape 4 : Obtenir le shortcode du menu
Maintenant, nous voulons ajouter ce menu déroulant à la barre latérale de WordPress. Pour ce faire, nous allons utiliser des shortcodes que Bellows Accordion crée automatiquement.
Pour obtenir le shortcode, allez à la page Apparence » Menu Bellows depuis le tableau de bord WordPress. S'il n'est pas déjà sélectionné, assurez-vous de sélectionner l'onglet « Tout afficher ».
Vous pouvez maintenant cliquer sur la boîte Shortcode, qui devrait mettre en surbrillance tout le code. Copiez maintenant ce code en utilisant le raccourci clavier Commande + C ou Ctrl + C.
Étape 5 : Ajouter le menu à votre barre latérale
Nous devons maintenant ajouter le menu à la mise en page de votre site. Accédez à la page Apparence » Widgets depuis la zone d'administration de WordPress.
Cela affichera toutes les zones de widgets de votre thème actuel. Les options que vous voyez peuvent varier, mais la plupart des thèmes WordPress modernes disposent d'une barre latérale.
Trouvez la zone de widget de la barre latérale et cliquez sur l'icône « + » pour ajouter un nouveau bloc.
Recherchez « Shortcode » et sélectionnez le bloc.
Collez votre shortcode copié dans le bloc et cliquez sur « Mettre à jour ». Lorsque vous visiterez votre site, vous devriez voir votre nouveau menu déroulant.
Sur les appareils mobiles, cette barre latérale apparaîtra généralement en bas de la page, où la fonction déroulante permet d'économiser un précieux espace de défilement vertical.
Étape 6 : Personnaliser votre menu déroulant
Le plugin Bellows Accordion facilite également la personnalisation de ce menu par défaut. Par exemple, vous pourriez changer son schéma de couleurs pour mieux refléter la marque de votre site.
Si vous souhaitez modifier le menu par défaut, allez simplement à la page Apparence » Bellows Menu dans votre tableau de bord WordPress.
Ce menu contient tous les paramètres dont vous avez besoin pour personnaliser votre menu déroulant. Il y a beaucoup de paramètres à explorer. Cependant, vous voudrez peut-être commencer par aller dans Configuration principale » Configuration de base.
Ici, vous pouvez choisir entre plusieurs couleurs de menu différentes. Vous pouvez également choisir si les visiteurs peuvent développer plusieurs sous-menus à la fois en utilisant les paramètres « Repli de l’accordéon ».
Pour modifier l’alignement et la largeur du menu, cliquez sur l’onglet « Mise en page et position ».
Si vous préférez prévisualiser vos modifications en temps réel, vous pouvez modifier le menu latéral déroulant dans le personnalisateur WordPress.
Pour ce faire, rendez-vous sur la page Apparence » Personnaliser depuis la zone d’administration et sélectionnez l’onglet « Bellows » dans la colonne de gauche.
Ici, vous trouverez de nombreux paramètres différents pour votre barre latérale. Ceux-ci incluent la modification de sa largeur, de son alignement et de la couleur de votre menu latéral déroulant.
Bonus : Astuces pour la barre latérale WordPress pour obtenir des résultats maximums
Une fois que vous avez créé un menu latéral déroulant, vous pouvez utiliser d’autres conseils pour générer plus de prospects à l’aide de votre barre latérale.
Par exemple, vous pouvez rendre votre widget de barre latérale fixe afin qu'il soit visible sur la page même lorsque l'utilisateur fait défiler vers le bas.
En dehors de cela, vous pouvez ajouter un formulaire de contact ou un formulaire d'inscription par e-mail dans votre barre latérale pour constituer votre liste d'e-mails. Pour ce faire, vous pouvez utiliser WPForms, qui est le meilleur plugin de formulaire de contact sur le marché.
Chez WPBeginner, nous l'utilisons pour créer des formulaires de contact et des sondages annuels, et nous l'adorons. Pour en savoir plus, consultez notre avis complet sur WPForms.
Il vous suffira de créer un formulaire, puis de l'ajouter à votre barre latérale en utilisant le bloc WPForms dans le menu des blocs.
Pour plus de détails, vous pouvez consulter notre tutoriel sur comment créer un formulaire de contact dans WordPress.
De plus, vous pouvez afficher vos articles les plus populaires dans la barre latérale, ajouter des images, afficher des icônes de médias sociaux et afficher des preuves sociales. Cela encouragera les utilisateurs à explorer davantage votre site et augmentera vos conversions.
Pour plus d'astuces, vous pouvez consulter notre liste des meilleures astuces de barre latérale WordPress pour obtenir des résultats maximums.
Tutoriel vidéo
Si vous ne préférez pas les instructions écrites, regardez simplement notre tutoriel vidéo.
Foire aux questions sur les menus de barre latérale déroulants dans WordPress
Voici quelques questions que nos lecteurs nous ont fréquemment posées avant d'ajouter un menu de barre latérale déroulant sur leurs sites Web :
Comment dérouler un menu dans WordPress ?
Vous pouvez dérouler un menu en utilisant un plugin comme Bellows Accordion Menu. Par défaut, les menus WordPress n'ont pas cette fonctionnalité sur les écrans de bureau. Un plugin ajoute le code nécessaire pour que les éléments s'étendent et se masquent lorsqu'ils sont cliqués.
Comment ajouter une section déroulante dans WordPress ?
Le moyen le plus simple est d'utiliser le bloc « Détails » par défaut de WordPress. Ce bloc vous permet d'encapsuler du contenu dans une ligne de résumé cliquable. Pour un style plus avancé dans vos articles, vous pouvez utiliser un plugin d'accordéon dédié.
Comment créer un menu déroulant dans WordPress ?
Vous pouvez créer un menu déroulant en visitant Apparence » Menus dans votre tableau de bord. Faites simplement glisser un élément de menu légèrement vers la droite sous un lien parent. Cette indentation indique à WordPress d'afficher cet élément dans une liste déroulante.
Pour plus de détails, consultez notre tutoriel sur la création d'un menu déroulant dans WordPress.
Comment mettre des éléments côte à côte dans WordPress ?
Vous pouvez mettre des éléments côte à côte en utilisant le bloc Colonnes. Dans l'éditeur de blocs, sélectionnez « Colonnes » et choisissez votre disposition préférée. Ensuite, ajoutez simplement votre texte ou vos images dans chaque colonne.
Qu'est-ce que le plugin de bloc accordéon pour WordPress ?
Un plugin de bloc accordéon vous permet d'ajouter des sections de contenu déroulantes à vos articles. Il aide à organiser le contenu long en masquant le texte sous les titres. Les utilisateurs cliquent simplement sur le titre pour lire les informations dont ils ont besoin.
Si vous souhaitez ajouter des accordéons à votre site, consultez notre sélection des meilleurs plugins d'accordéon WordPress.
Nous espérons que cet article vous a aidé à apprendre comment créer un menu de barre latérale rétractable dans WordPress. Pour plus d'astuces sur la modification du design de votre site WordPress, vous pouvez également consulter nos guides sur comment personnaliser l'en-tête de votre WordPress et les widgets WordPress les plus utiles pour votre site.
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.
Mrteesurez
Merci pour ce guide, si je vous comprends bien, cela signifie que le plugin générera un shortcode qui pourra être placé n'importe où sur le site, même à l'intérieur d'un article ?
Commentaires WPBeginner
Bien que vous puissiez essayer d'utiliser le shortcode dans d'autres emplacements, même s'il fonctionne, il peut ou peut ne pas s'afficher de manière utile.
Jiří Vaněk
Je l'ai essayé, et oui, votre idée est correcte. Cela fonctionne vraiment. Cependant, il est intéressant de réfléchir à la façon dont vous l'utiliserez au final. Parce que dans mon cas, je n'ai pas trouvé d'autre utilité que dans la barre latérale. Mais peut-être que votre site web est différent, et que vous en trouverez une utilité. Donc, la réponse à votre question est oui, cela fonctionne comme vous l'avez décrit.
Jiří Vaněk
Pour les sites web qui ont de nombreuses catégories, c'est l'option parfaite pour rendre la barre latérale claire. J'ai maintenant environ 15 catégories sur le site et je pense à quelque chose de similaire à l'accordéon également. Merci pour l'inspiration.
Tamie
Merci pour cela. Comment ajuster l'espacement entre les sous-catégories ? J'ai beaucoup de catégories et le fait qu'il y ait ce qui ressemble à un double interligne entre elles rend les menus très longs.
Support WPBeginner
Cela dépendrait de votre thème spécifique pour les réglages requis. Vous voudriez commencer par vérifier auprès du support de votre thème spécifique. Sinon, vous pourriez utiliser Inspecter l'élément pour trouver ce qui doit être modifié. Nous avons un guide ci-dessous qui montre comment utiliser Inspecter l'élément pour vous aider avec cela :
https://www.wpbeginner.com/wp-tutorials/basics-of-inspect-element-with-your-wordpress-site/
Admin