Comment créer un menu de colonne latérale repliable dans WordPress (La méthode facile)

Une colonne latérale repliable est un excellent moyen d’accéder facilement aux liens et contenus importants, tout en conservant une conception propre et organisée de votre site.

Cette fonctionnalité permet aux utilisateurs/utilisatrices de déplier et de replier le menu, leur donnant ainsi le contrôle sur leur expérience de navigation. Elle est parfaite pour les sites de grande taille, les magasins d’e-commerce ou tout site dont la mise en page est plus complexe.

Dans cet article, nous allons vous afficher comment créer facilement un menu de colonne latérale repliable dans WordPress.

Qu’est-ce qu’un menu de colonne latérale repliable ? (et quand l’utiliser)

Les menus les plus simples/simples d’utilisation permettent d’accéder facilement à tous les liens dont les internautes ont besoin. Cependant, cela peut s’avérer délicat pour les sites WordPress qui ont beaucoup de pages ou une mise en page plus complexe.

Pensez à un grand magasin de commerce électronique qui possède des tonnes de catégories et de sous-catégories de produits, comme Amazon.

Afficher toutes les catégories de produits dans un menu standard n’est pas une bonne idée. Les acheteurs devront probablement défiler dans le menu pour trouver la catégorie qui les intéresse.

C’est là qu’interviennent les menus repliables. Ces menus organisent le contenu selon une approche « parent-enfant ». Cela signifie que si l’internaute clique sur un élément parent dans un menu repliable, celui-ci se dépliera pour afficher tous les contenus enfants de cet élément parent.

C’est notamment le cas du média Guardian, qui utilise un menu repliable pour son site mobile.

Les menus de la colonne latérale repliables sont parfois également appelés menus dépliables. En effet, leurs différentes sections se déplient lorsqu’un internaute clique dessus.

Par défaut, les menus repliables masquent une grande partie du contenu et de la complexité aux yeux des internautes. C’est beaucoup plus simple/simple d’utilisation que de faire défiler une longue liste de catégories et de sous-catégories sur votre blog WordPress.

Cela dit, voyons comment vous pouvez facilement créer un menu de colonne latérale repliable sur votre site WordPress.

Tutoriel vidéo

Subscribe to WPBeginner

Si vous préférez des instructions écrites, continuez à lire.

Comment créer un menu de colonne latérale repliable dans WordPress

Vous pouvez créer un menu de colonne latérale repliable dans WordPress à l’aide de l’extension Bellows Accordion Menu.

Bellows Accordion Menu fournit un code court pratique pour placer votre menu repliable sur n’importe quelle page, publication ou zone de widget, y compris votre colonne latérale.

Tout d’abord, vous devrez installer et activer l’extension Bellows Accordion Menu. Si vous avez besoin d’aide, veuillez consulter notre guide du débutant sur l’installation d’une extension WordPress.

Une fois activé, rendez-vous sur la page Apparence  » Menus dans votre Tableau de bord WordPress.

Pour commencer, saisissez un nom pour votre menu dans le champ « Nom du menu ». Note : les internautes ne verront pas ce nom, qui est uniquement destiné à votre propre usage.

Vous pouvez ensuite cliquer sur le bouton « Créer un menu ».

Choisissez ensuite les pages que vous souhaitez ajouter au menu de la colonne latérale repliable. Par défaut, WordPress affiche uniquement les pages les plus récentes.

Si vous souhaitez obtenir une liste de toutes les pages de votre site, cliquez sur l’onglet « Tout voir ».

Vous pouvez également cliquer sur « Tout sélectionner ». Toutes vos pages seront alors ajoutées au menu repliable.

Une fois que vous êtes satisfait de votre sélection, cliquez sur le bouton  » Ajouter au menu « . Vous pouvez également sélectionner des publications et des catégories de blog ou ajouter des liens personnalisés. Pour plus de détails, veuillez consulter notre guide sur l ‘ajout d’un menu de navigation dans WordPress.

Après avoir ajouté toutes vos pages web au menu, vous pouvez les déplacer en les faisant glisser et en les déposant. Cela modifiera l’ordre dans lequel ces pages apparaissent dans votre menu repliable.

Les menus repliables s’appuient sur les relations parent-enfant.

Lorsqu’un internaute clique sur un élément parent de votre menu pliable, celui-ci se dépliera pour révéler tout le contenu enfant.

Pour créer cette relation, il suffit d’utiliser la fonction « glisser-déposer » pour disposer toutes les pages de votre enfant sous leur parent.

Ensuite, saisissez chaque enfant et faites-le glisser légèrement vers la droite. Vous pouvez alors relâcher cette page. Cela indentera l’article et le transformera en page enfant.

N’oubliez pas de cliquer sur le bouton « Enregistrer le menu » lorsque vous avez terminé.

Maintenant, nous voulons ajouter ce menu repliable à la colonne latérale de WordPress. Pour ce faire, nous allons utiliser quelques codes courts que Bellows Accordion crée automatiquement.

Pour obtenir le code court, rendez-vous sur la page Apparence  » Bellows Menu dans le Tableau de bord WordPress. S’il n’est pas déjà sélectionné, alors assurez-vous de sélectionner l’onglet  » Afficher tout « .

Vous pouvez maintenant cliquer sur la boîte du code court, ce qui devrait mettre en évidence tout le code. Copiez maintenant ce code en utilisant le raccourci clavier Commande + c ou Ctrl + c.

L’étape suivante consiste à coller ce code court dans un widget, donc rendez-vous sur la page Apparence  » Widgets depuis la zone d’administration.

Cela affichera toutes les zones de widgets de votre thème actuel. Les facultatifs que vous voyez peuvent varier, mais la plupart des thèmes WordPress modernes mettent en avant une colonne latérale.

Une fois que vous avez trouvé la zone de la colonne latérale, cliquez dessus. Cette section se dépliera alors.

Pour ajouter un module, cliquez sur l’icône + et commencez à taper « Shortcode ». Lorsque l’écran apparaît, sélectionnez le bloc « Code court ».

Maintenant, il suffit de coller votre code court de menu repliable dans ce bloc. Pour publier votre menu, vous devrez cliquer sur le bouton  » Mettre à jour  » en haut de votre écran.

Désormais, lorsque vous visitez votre site, vous devriez voir une nouvelle colonne latérale repliable.

L’extension Bellows Accordion permet également de personnaliser très facilement ce menu par défaut. Par exemple, vous pouvez modifier son jeu de couleurs pour mieux refléter la marque de votre site.

Si vous souhaitez ajuster le menu par défaut, il vous suffit de vous rendre sur la page Apparence «  Menu de soufflet dans votre tableau de bord WordPress.

Ce menu contient tous les réglages dont vous avez besoin pour personnaliser votre menu repliable. Il y a beaucoup de réglages à explorer. Toutefois, vous pouvez commencer par aller dans Configuration principale  » Configuration de base.

Ici, vous pouvez choisir entre plusieurs couleurs de menu. Vous pouvez également choisir si les internautes peuvent déplier plusieurs sous-menus à la fois en utilisant les Réglages « Pliage en 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 alors modifier le menu de la colonne latérale repliable dans le personnalisateur de WordPress.

Pour ce faire, rendez-vous sur la page Apparence  » Personnalisation dans la zone d’administration et sélectionnez l’onglet ‘Soufflets’ dans la colonne de gauche.

Vous y trouverez de nombreux réglages différents pour votre colonne latérale. Vous pouvez notamment modifier sa largeur, son alignement et la couleur de votre menu latéral repliable.

Bonus : Les astuces de la colonne latérale de WordPress pour obtenir un maximum de résultats

Une fois que vous avez créé un menu latéral repliable, vous pouvez utiliser d’autres astuces pour générer plus de prospects à l’aide de votre colonne latérale.

Par exemple, vous pouvez rendre votre widget de colonne latérale épinglé afin qu’il reste visible sur la page même lorsque l’utilisateur/utilisatrice défile vers le bas.

Version, vous pouvez ajouter un formulaire de contact ou un formulaire d’inscription par e-mail dans votre colonne latérale pour construire votre liste d’e-mails. Pour ce faire, vous pouvez utiliser WPForms, qui est la meilleure extension de formulaire de contact sur le marché.

Il vous suffira de créer un formulaire, puis de l’ajouter à votre colonne latérale à l’aide du bloc WPForms dans le menu des blocs.

Pour plus de détails, vous pouvez consulter notre tutoriel sur la création d’un formulaire de contact sur WordPress.

En outre, vous pouvez afficher vos publications les plus populaires dans la colonne latérale, ajouter des images, afficher des icônes de réseaux sociaux et afficher des preuves sociales. Cela encouragera les utilisateurs/utilisatrices à explorer davantage votre site et à booster vos conversions.

Pour plus d’astuces, vous pouvez consulter notre liste des meilleures astuces de la colonne latérale de WordPress pour obtenir un maximum de résultats.

Nous espérons que cet article vous a aidé à apprendre comment créer un menu de colonne latérale repliable sur WordPress. Pour plus d’astuces sur la modification du design de votre site WordPress, vous pouvez également consulter nos guides sur la façon de personnaliser votre en-tête WordPress et les widgets WordPress les plus utiles pour votre site.

Si vous avez aimé cet article, veuillez alors vous abonner à notre chaîne YouTube pour obtenir des tutoriels vidéo sur WordPress. Vous pouvez également nous trouver sur Twitter et Facebook.