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. 🎨
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.
Les menus bien conçus aident vos visiteurs à naviguer sur votre site WordPress. Beaucoup de vos visiteurs utiliseront des appareils mobiles, il est donc important de visualiser la version mobile de votre site WordPress pour voir à quoi ressemble votre menu de navigation sur les petits écrans.
Heureusement, de nombreux thèmes WordPress sont livrés avec des styles intégrés qui affichent automatiquement des menus adaptés aux mobiles lorsqu'ils sont visualisés sur un petit écran.
Cependant, vous voudrez peut-être personnaliser davantage votre navigation mobile et ajouter un menu responsive plein écran ou un menu à 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 :
- Comment ajouter un menu à panneau coulissant dans les thèmes WordPress
- Questions fréquemment posées sur les menus à panneau coulissant
- Lecture complémentaire : Plus de ressources sur la personnalisation des menus de site
Commençons.
Comment ajouter un menu à panneau coulissant dans les thèmes WordPress
La première chose que vous devez faire est d'installer et d'activer le plugin Responsive Menu. Si vous en avez besoin, vous pouvez consulter notre guide étape par étape sur comment installer un plugin WordPress.
💡 Remarque : 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.
Après l'activation, naviguons vers Responsive Menu » Menus depuis votre tableau de bord WordPress. Une fois sur place, 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 ne voient que le nouveau menu du panneau coulissant. Pour ce faire, entrez du code CSS dans le champ « Masquer le menu du thème ».
Le code que vous devez entrer ici varie d'un thème à l'autre, et vous pouvez en apprendre davantage en cliquant sur le lien « En savoir plus ».
📝 Note : Les utilisateurs de la version Pro disposent de quelques paramètres supplémentaires. Par exemple, les utilisateurs Pro peuvent 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, et il y a des boutons en bas pour basculer entre les vues téléphone, tablette et ordinateur. Vous trouverez également des options de personnalisation sur la 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 de démonstration. Notez que si la page actuelle se trouve dans le menu, elle est mise en surbrillance avec une bande de couleur.
✋ Astuce d'expert : La personnalisation de votre menu de navigation 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 besoin de clarifications sur le fonctionnement des menus à panneau coulissant sur 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 à panneau coulissant élégant, 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 visiblement 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é à l'aide d'un plugin comme WP Mobile Menu ou de 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
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 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 une barre de recherche au menu WordPress (étape par étape)
- Comment créer un menu déroulant dans WordPress (Guide pour débutants)
- Comment afficher différents menus aux utilisateurs connectés dans WordPress
- Comment ajouter des menus de navigation personnalisés dans les thèmes WordPress
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.
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 marche 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 ?