Proposer un menu encombrant, de style bureau, sur un téléphone est un moyen sûr de frustrer les visiteurs. Et un menu mobile confus peut les faire partir tout aussi vite.
Un menu à panneau coulissant résout ce problème en donnant à votre site une apparence épurée, semblable à une application, qui fonctionne magnifiquement sur les petits écrans. Il facilite la recherche de contenu et maintient l'engagement des visiteurs.
Après avoir testé plusieurs plugins pour cette tâche exacte, nous avons trouvé une option gratuite fantastique qui est à la fois puissante et facile à configurer. Vous pouvez créer un menu coulissant d'aspect professionnel sans toucher une seule ligne de code.
Dans ce guide, nous vous montrerons exactement comment ajouter un menu à panneau coulissant à votre thème WordPress, étape par étape.
🎨 Point clé : Utilisez le plugin gratuit Responsive Menu pour créer un panneau coulissant adapté aux mobiles sans toucher à aucun code.
Pourquoi ajouter un menu à panneau coulissant dans les thèmes WordPress ?
Un menu à panneau coulissant rend la navigation sur les appareils mobiles plus fluide et plus intuitive. Il donne à votre site WordPress une apparence épurée, semblable à une application, aidant les visiteurs à trouver rapidement ce qu'ils cherchent sans se sentir perdus ou frustrés.
Il offre également des zones tactiles plus grandes pour les doigts et maintient votre écran dégagé, ce qui peut entraîner un engagement plus élevé et plus de ventes.
Heureusement, de nombreux thèmes WordPress incluent déjà des styles intégrés qui affichent automatiquement des menus adaptés aux mobiles sur les petits écrans.
Cependant, vous voudrez peut-être personnaliser davantage votre navigation mobile en ajoutant un menu réactif plein écran ou un menu avec panneau coulissant animé.
Dans cet esprit, nous allons vous montrer comment ajouter un menu à panneau coulissant dans les thèmes WordPress. Voici un aperçu rapide de tous les sujets que nous partagerons dans ce guide :
Commençons.
Comment ajouter un menu à panneau coulissant dans les thèmes WordPress
La première chose à faire est d'installer et d'activer le plugin Responsive Menu. Nous l'avons testé pour ce tutoriel, et il est incroyablement facile à utiliser.
Dans votre zone d'administration WordPress, allez dans Plugins » Ajouter un plugin.
💡 Note : Vous pouvez suivre ce tutoriel en utilisant le plugin gratuit. Si vous souhaitez des thèmes supplémentaires et des fonctionnalités avancées comme la logique conditionnelle, vous pouvez passer à la version premium du plugin Responsive Menu.
Ensuite, il vous suffit de trouver le plugin à l'aide de la boîte de recherche et de procéder à l'installation. Si vous avez besoin d'aide, consultez notre guide étape par étape sur comment installer un plugin WordPress.
Une fois activé, allez dans Responsive Menu » Menus dans votre tableau de bord WordPress. De là, vous devriez cliquer sur le bouton « Créer un nouveau menu » en haut de l'écran.
Vous verrez alors 4 thèmes que vous pouvez utiliser pour votre nouveau menu responsive. Des thèmes supplémentaires sont disponibles à l'achat.
Pour ce tutoriel, nous utiliserons le thème sélectionné automatiquement. Vous pouvez ensuite cliquer sur le bouton « Suivant ».
Ceci vous mènera à la page « Paramètres du menu ».
Ici, vous pouvez entrer un nom pour votre menu réactif, puis sélectionner le menu WordPress que vous souhaitez afficher dans le panneau. Par exemple, nous avons choisi le menu « Navigation ».
Si vous avez besoin de créer un nouveau menu, vous pouvez apprendre comment en suivant notre guide sur comment ajouter un menu de navigation dans WordPress.
Vous pouvez également masquer le menu normal fourni avec votre thème WordPress afin que vos utilisateurs mobiles ne voient que le nouveau menu du panneau coulissant. Vous le faites en entrant du code CSS dans le champ « Masquer le menu du thème ».
Ne vous inquiétez pas, cela ne masquera le menu que sur les appareils mobiles – votre menu de bureau restera complètement intact.
Le code que vous devez entrer ici varie d'un thème à l'autre (les sélecteurs courants incluent .main-navigation ou #site-navigation), et vous pouvez en savoir plus en cliquant sur le lien « En savoir plus ».
✋ Astuce d'expert : Vous pouvez trouver la classe de votre menu spécifique en cliquant avec le bouton droit de la souris sur votre menu dans un navigateur et en sélectionnant l'outil « Inspecter ». Recherchez des balises HTML comme <nav> ou <ul> qui contiennent des classes comme menu-toggle ou site-navigation.
Si vous avez la licence Pro, vous aurez quelques paramètres supplémentaires. Par exemple, vous pouvez sélectionner les appareils et les pages où le menu doit être affiché.
Une fois que vous êtes satisfait des paramètres, vous devez cliquer sur le bouton « Créer le menu » en bas de la page. Cela vous mènera à une page où vous pourrez terminer la personnalisation de votre menu.
Vous verrez un aperçu de votre site web sur le côté droit de l'écran. Il y a des boutons en bas pour basculer entre les vues téléphone, tablette et bureau afin de vous assurer que votre menu reste adapté aux mobiles. Vous trouverez également des options de personnalisation à gauche.
Vous remarquerez peut-être que du texte s'affiche au-dessus du menu. C'est le titre du menu et une ligne de texte que le plugin appelle « contenu supplémentaire ».
Vous pouvez modifier ou masquer le texte en cliquant sur « Menu mobile », puis sur « Conteneur » dans le menu à gauche de la page.
De plus, vous pouvez taper tout ce que vous voulez dans le champ « Texte du titre », comme « Menu principal » ou « Navigation ». Si vous ne souhaitez pas afficher de titre, faites simplement glisser le commutateur « Titre » sur la position d'arrêt.
Après cela, vous voudrez faire défiler vers le bas jusqu'au paramètre « Contenu supplémentaire ».
À partir de là, vous pouvez désactiver ce paramètre ou taper un contenu alternatif. Dans la capture d'écran ci-dessous, vous remarquerez que le commutateur a été désactivé, de sorte que les mots « Ajoutez plus de contenu ici... » sont maintenant masqués.
Une fois que vous êtes satisfait des paramètres du menu, assurez-vous de cliquer sur le bouton « Mettre à jour » en bas de la page pour enregistrer vos paramètres.
Le plugin Responsive Menu offre de nombreuses autres options pour modifier le comportement et l'apparence de votre menu de panneau coulissant. Vous pouvez explorer ces options sur la page des paramètres du plugin et les ajuster si nécessaire.
Maintenant, vous pouvez visiter votre site web pour voir le menu en action. Voici à quoi il ressemble sur notre site web WordPress de démonstration. Vous remarquerez que le plugin met même en surbrillance la page actuelle sur laquelle se trouve votre visiteur avec une bande de couleur soignée :
✋ Astuce d'expert : La personnalisation du menu de navigation de votre site WordPress peut améliorer l'apparence et la convivialité de votre site. Un menu bien conçu aide les visiteurs à trouver facilement ce dont ils ont besoin et encourage les clics.
Pour en savoir plus sur ce sujet, consultez notre guide sur les différentes façons de styliser votre menu de navigation WordPress.
Questions fréquemment posées sur les menus à panneau coulissant
Vous avez encore des questions sur le fonctionnement des menus à panneaux coulissants dans WordPress ? Voici les réponses à quelques questions courantes :
Tous les thèmes WordPress sont-ils livrés avec un menu mobile ?
La plupart des thèmes WordPress modernes sont réactifs, ils incluent donc un menu adapté aux mobiles. Cela dit, il s'agit généralement d'un simple menu déroulant. Si vous souhaitez un menu élégant avec un panneau coulissant, vous aurez besoin d'un plugin.
L'ajout d'un plugin de menu à panneau coulissant ralentira-t-il mon site ?
Pas si vous choisissez un plugin bien codé comme Responsive Menu. Ces plugins sont conçus pour être légers et ne devraient pas affecter de manière notable la vitesse de votre site.
Puis-je afficher un menu différent sur mobile par rapport au bureau ?
Oui ! Vous pouvez créer un menu mobile séparé en utilisant un plugin comme WP Mobile Menu ou du CSS personnalisé, afin que vos visiteurs mobiles voient une navigation différente de celle des utilisateurs de bureau. Cela vous permet de simplifier les liens, de mettre en avant les promotions ou d'améliorer les conversions spécifiquement pour les appareils mobiles.
Lecture complémentaire : Plus de ressources sur la personnalisation des menus de site
Maintenant que vous avez implémenté avec succès un panneau coulissant pour vos utilisateurs mobiles, vous voudrez peut-être explorer d'autres façons d'améliorer la navigation de votre site. Nous espérons que ce tutoriel vous a aidé à apprendre comment ajouter un menu à panneau coulissant dans les thèmes WordPress.
Pour améliorer encore davantage votre expérience utilisateur, consultez nos autres guides utiles sur :
- Comment créer un menu de navigation flottant et fixe dans WordPress
- Comment créer un méga menu sur votre site WordPress (étape par étape)
- Comment ajouter des articles spécifiques au menu de navigation WordPress
- Comment ajouter des menus de navigation personnalisés dans les thèmes WordPress
- Comment afficher différents menus aux utilisateurs connectés dans WordPress
Si vous avez aimé cet article, abonnez-vous à notre Chaîne YouTube pour des tutoriels vidéo WordPress. Vous pouvez également nous trouver sur Twitter et Facebook.
Jiří Vaněk
J'ai créé un menu coulissant avec Elementor et des fenêtres pop-up avec un effet de menu coulissant. Cela fonctionne très bien, mais malheureusement, je ne peux pas avoir Elementor PRO sur tous les sites web que je gère en raison de son prix. C'est une alternative fantastique pour créer un tel menu, et s'il est possible d'utiliser le plugin dans une version gratuite, c'est vraiment incroyable. Pour les sites web sans Elementor, c'est une bouée de sauvetage pour moi.
Moinuddin Waheed
Ceci est un sauveur pour moi car j'ai eu du mal à obtenir un panneau coulissant pour un menu réactif mobile.
Auparavant, j'utilisais des extraits de code et je les insérais dans le code wp pour cela.
Mais ce plugin offre plus de personnalisation et la version pro semble plus puissante en termes de contrôle de la personnalisation.
J'essaierai certainement ce plugin.
Mohammad Kashif
Génial !
Puis-je ajouter un bouton de fermeture dans le pop-out ?
Luke Marshall
J'attends toujours une réponse à mon ticket de support de votre part concernant ce besoin exact ! celui que vous proposez est uniquement sur le côté droit sans moyen apparent de le changer à gauche, je suis content de l'avoir trouvé.
Cynthia
Changez la fonction « left » en « right » dans les deux endroits où elle est utilisée dans le code de la fonction.
Ru
Avez-vous une démo pour cela ?
Je veux vérifier avant
Daniel Jarosz
propre & simple, merci pour ce tutoriel !
Ann
Salut, ce code fonctionne parfaitement lorsque j'exécute mon site web localement, mais pas une fois qu'il est en ligne. Y a-t-il une explication possible à cela ? J'ai mis à jour les liens des images, je ne suis pas sûr de ce qui doit être mis à jour car les dossiers n'ont pas changé.
Madiha
ça ne fonctionne pas sur mon site, s'il vous plaît visitez et dites-moi la solution
http://www.dailynewscompany.com
Mattia
Salut, article intéressant… Avez-vous une DÉMO de cela, ou une URL vers un site en ligne où vous l'avez implémenté ? Il serait intéressant de le voir dans un cas réel, avant d'essayer de l'utiliser ! Merci beaucoup
Jim
Est-il possible de montrer comment le script pourrait être modifié pour que l'événement de fermeture puisse être déclenché en cliquant n'importe où sauf sur la navigation ?
En d'autres termes, pour que l'utilisateur n'ait pas seulement à cliquer sur l'icône du menu de basculement pour fermer la barre latérale de navigation ?
Merci.
Karl
Je cherche partout un plugin ou la possibilité d'implémenter le type de menu que vous avez actuellement en haut de votre page. Vous avez un bouton « Play » sur le côté droit de votre en-tête. En appuyant dessus, une zone de contenu sort de votre section d'en-tête. Je veux vraiment utiliser ce type de menu sur mon site. Si vous pouviez me donner même un lien où ce type de menu est expliqué, je m'en sortirai et merci. C'est un tutoriel génial !
Support WPBeginner
Karl, vous pouvez faire un clic droit sur le bouton Play et sélectionner « Inspecter l'élément » et étudier notre code source. Nous essaierons également de le couvrir bientôt sur WPBeginner sous forme de tutoriel.
Admin
Shubham Dubey
Désolé de répondre ici, (Les commentaires ne sont pas disponibles)
Bonjour ! J'utilise le framework Genesis, avec son thème enfant, et je n'arrive pas à trouver le fichier header.php là-bas.
i just copied the header.php file from genesis to my child themes folder, but after opening header.php file didn’t found any lines
COMMENT FAIRE CELA AVEC LES THÈMES ENFANTS, VEUILLEZ EXPLIQUER.
Jim
Excellent guide. Je suis presque arrivé avec une implémentation de test, cependant je me demande... puis-je utiliser un chemin relatif dans le fichier sidepanel.js au lieu d'un chemin absolu ?
J'ai essayé de le faire mais je n'y arrive pas. Le chemin relatif doit-il être relatif au fichier html qui appelle le javascript ?
Merci
krish
C'est un contenu bon et utile. La capture d'écran et le code sont faciles à comprendre et à appliquer à mon site web. Bon travail mec !!!
Håkon Stillingen
Article intéressant. Comment remplacer l'en-tête par défaut dans Genesis Framework ?