Comment ajouter un menu de panneau coulissant dans les thèmes WordPress
Souhaitez-vous ajouter un menu de panneau coulissant à votre site WordPress ?
L'ajout d'un menu réactif permettra aux utilisateurs de naviguer plus facilement sur votre site Web lorsqu'ils utilisent des appareils mobiles. Lorsqu'ils appuient sur l'icône de votre menu, un menu de panneau glissera sur l'écran en utilisant une belle animation.
Dans cet article, nous allons vous montrer comment ajouter un menu de panneau coulissant dans les thèmes WordPress sans écrire de code.
Pourquoi ajouter un menu de panneau coulissant dans les thèmes WordPress ?
Des menus bien conçus aident vos visiteurs à s'orienter sur votre site Web WordPress. Beaucoup de vos visiteurs utiliseront des appareils mobiles, il est donc important de prévisualiser la version mobile de votre site WordPress pour voir à quoi ressemble votre menu de navigation sur des écrans plus petits.
Heureusement, de nombreux thèmes WordPress sont dotés de styles intégrés qui afficheront automatiquement des menus adaptés aux mobiles lorsqu'ils seront affichés sur un petit écran.
Cependant, vous souhaiterez peut-être personnaliser encore davantage votre navigation mobile et ajouter un menu réactif en plein écran ou un menu de panneau coulissant animé.
Dans cet esprit, voyons comment ajouter un menu de panneau coulissant dans les thèmes WordPress.
Comment ajouter un menu de 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 . Pour plus de détails, consultez notre guide étape par étape sur la façon d'installer un plugin WordPress.
Il existe une version premium de Responsive Menu avec des thèmes supplémentaires et des fonctionnalités supplémentaires telles que la logique conditionnelle, mais pour ce tutoriel, nous utiliserons le plugin gratuit.
Lors de l'activation, accédez à la page Responsive Menu » Menus. Une fois sur place, vous devez cliquer sur le bouton « Créer un nouveau menu » en haut de l'écran.
Vous verrez alors quatre thèmes que vous pourrez utiliser pour votre nouveau menu réactif. 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 ».
Cela vous amènera à la page Paramètres du menu. Ici, vous pouvez saisir un nom pour votre menu réactif, puis sélectionner le menu WordPress que vous souhaitez afficher dans le panneau.
Pour le bien de ce tutoriel, nous avons choisi le menu « Navigation ». Si vous devez créer un nouveau menu, vous pouvez apprendre comment procéder en suivant notre guide sur la façon d'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 le code CSS dans le champ « Masquer le menu du thème ».
Le code que vous devez saisir ici varie d'un thème à l'autre, et vous pouvez en savoir plus en cliquant sur le lien « En savoir plus ».
Les utilisateurs disposant de la version Pro disposent de quelques paramètres supplémentaires. Par exemple, les utilisateurs Pro peuvent sélectionner les appareils et les pages sur lesquels le menu doit être affiché.
Une fois que vous êtes satisfait des paramètres, vous devez cliquer sur le bouton « Créer un 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 la droite de l'écran, et il y a des boutons en bas pour basculer entre l'affichage du téléphone, de la tablette et du bureau. Vous trouverez également des options de personnalisation sur la gauche.
Notez qu'il y a du texte affiché au-dessus du menu. Il s’agit du texte du titre du menu et d’une ligne de texte que le plugin appelle « contenu supplémentaire ».
Vous pouvez modifier ou masquer le texte en cliquant sur « Menu Mobile » puis « Conteneur » dans le menu à gauche de la page.
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 » en position d'arrêt.
Après cela, vous devez faire défiler jusqu'au paramètre « Contenu supplémentaire ». Vous pouvez désactiver ce paramètre ou saisir un contenu alternatif. Dans la capture d'écran ci-dessous, vous remarquerez que le commutateur a été désactivé et que les mots « Ajouter plus de contenu ici… » sont désormais 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 stocker vos paramètres.
Le plugin Responsive Menu est livré avec de nombreuses autres options qui vous permettent de modifier le comportement et l'apparence du menu de votre panneau coulissant. Vous pouvez explorer ces options sur la page des paramètres du plugin et les ajuster si nécessaire.
Vous pouvez maintenant visiter votre site Web pour voir le menu en action. Voici à quoi cela ressemble sur notre site Web de démonstration. Notez que si la page actuelle est dans le menu, elle est alors mise en évidence par une bande de couleur.
Nous espérons que ce didacticiel vous a aidé à apprendre à ajouter un menu de panneau coulissant dans les thèmes WordPress. Vous souhaiterez peut-être également apprendre à suivre les visiteurs de votre site WordPress ou consulter notre liste de plugins indispensables pour développer votre site.
Si vous avez aimé cet article, abonnez-vous à notre chaîne YouTube pour les didacticiels vidéo WordPress. Vous pouvez également nous trouver sur Twitter et Facebook.