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.
Qu'est-ce qu'un menu latéral déroulant ? (Et quand en utiliser un)
Les menus les plus conviviaux offrent un accès facile à tous les liens dont les visiteurs ont besoin. Cependant, cela peut être délicat pour les sites Web WordPress qui ont beaucoup de pages ou une mise en page plus complexe.
Pensez à une grande boutique de commerce électronique qui a des tonnes de catégories et de sous-catégories de produits, comme Amazon.
Afficher chaque catégorie de produit dans un menu standard ne serait pas une bonne idée. Les acheteurs devraient probablement faire défiler le menu pour trouver la catégorie qui les intéresse.
C'est là qu'interviennent les menus déroulants. Ces menus organisent le contenu selon une approche « parent-enfant ». Cela signifie que si le visiteur clique sur un élément parent dans un menu déroulant, il se développera pour afficher tout le contenu enfant de cet élément parent.
L'un des exemples est le média Guardian, qui utilise un menu déroulant pour son site mobile.
Les menus latéraux déroulants sont parfois aussi appelés menus extensibles. C'est parce que leurs différentes sections s'étendent lorsqu'un visiteur clique dessus.
Par défaut, les menus déroulants masquent beaucoup de contenu et de complexité aux visiteurs. C'est beaucoup plus convivial que de faire défiler une longue liste de catégories et de sous-catégories sur votre blog WordPress.
Cela dit, examinons comment vous pouvez facilement créer un menu latéral déroulant 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 pour placer votre menu déroulant sur n'importe quelle page, article ou zone de widget, y compris votre barre latérale.
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.
🚨 Avertissement : Gardez à l'esprit que le plugin n'a pas été mis à jour avec les trois dernières versions de WordPress. Cependant, nous l'avons testé sur notre site Web et avons constaté qu'il fonctionne bien. Pour plus de détails, consultez notre guide sur l'utilisation de plugins WordPress obsolètes.
Après l'activation, visitez la page Apparence » Menus dans votre tableau de bord WordPress.
Pour commencer, tapez un nom pour votre menu dans le champ « Nom du menu ». Notez que les visiteurs de votre site ne verront pas ce nom car il est uniquement destiné à votre référence.
Vous pouvez ensuite cliquer sur le bouton « Créer un menu ».
Ensuite, choisissez les pages que vous souhaitez ajouter au menu latéral rétractable. Par défaut, WordPress n'affiche que vos pages les plus récentes.
Si vous souhaitez voir la liste de toutes les pages de votre site Web, cliquez sur l'onglet « Tout afficher ».
Alternativement, vous pouvez cliquer sur « Tout sélectionner ». Cela ajoutera toutes vos pages au menu rétractable.
Une fois que vous êtes satisfait de votre sélection, cliquez sur le bouton « Ajouter au menu ».Vous pouvez également sélectionner des articles et des catégories de blog ou ajouter des liens personnalisés. Pour plus de détails, veuillez consulter notre guide sur comment ajouter un menu de navigation dans WordPress.
Après avoir ajouté toutes vos différentes pages web au menu, vous pouvez les déplacer en les faisant glisser. Cela changera l'ordre dans lequel ces pages apparaissent dans votre menu déroulant.
Les menus déroulants sont basés sur des relations parent-enfant.
Lorsqu'un visiteur clique sur un élément parent dans votre menu déroulant, celui-ci s'étend pour révéler tout le contenu enfant.
Pour créer cette relation, utilisez simplement le glisser-déposer pour organiser toutes les pages de votre enfant sous leur parent.
Ensuite, prenez chaque enfant et faites-le glisser un peu vers la droite. Vous pouvez ensuite relâcher cette page. Cela indentera l'élément et en fera une sous-page.
N'oubliez pas de cliquer sur le bouton « Enregistrer le menu » lorsque vous avez terminé.
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.
L'étape suivante consiste à coller ce shortcode dans un widget, alors dirigez-vous vers la page Apparence » Widgets depuis la zone d'administration.
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.
Une fois que vous avez trouvé la zone de la barre latérale, cliquez dessus. Cette section s'étendra maintenant.
Pour ajouter un bloc, cliquez sur l'icône + et commencez à taper « Shortcode ». Lorsqu'il apparaît, sélectionnez le bloc « Shortcode ».
Maintenant, collez simplement votre shortcode de menu déroulant dans ce bloc. Pour publier votre menu, vous devrez cliquer sur le bouton « Mettre à jour » en haut de votre écran.
Maintenant, lorsque vous visiterez votre site, vous devriez voir un nouveau menu latéral 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.
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