Comment ajouter un menu de panneau de diapositives dans les thèmes WordPress

Si vous êtes un développeur WordPress ou un concepteur de thème WordPress, vous souhaiterez peut-être ajouter un menu personnalisé dans votre éditeur de thème afin de contrôler les options du menu. Cependant, le tableau de bord d'administration WordPress n'a pas d'option de menu de panneau coulissant par défaut . Cela signifie que vous devez vous tourner vers un plugin ou un modèle tiers pour ajouter cette fonctionnalité à vos thèmes. Par conséquent, aujourd'hui, nous allons vous expliquer comment ajouter un menu de panneau de diapositives dans les thèmes WordPress.

Menu Slide Panel dans les thèmes WordPress : pourquoi l'inclure ?

Il existe de nombreuses raisons pour lesquelles l'inclusion d'un panneau latéral peut être importante. La première raison est que les visiteurs auront plus de facilité à naviguer sur votre site WordPress si vous prenez le temps de développer des menus intuitifs. La deuxième raison est que les panneaux coulissants sont nécessaires pour les appareils mobiles. Par conséquent, vous devez vous assurer que vous les avez si vous voulez que votre site Web fonctionne bien sur les appareils mobiles . Cependant, si de nombreux utilisateurs de votre site utiliseront des appareils mobiles, il est essentiel de tester la disposition du menu sur ces écrans plus petits avant de mettre en ligne WordPress. Heureusement, lorsqu'ils sont affichés sur un appareil mobile, les styles par défaut de nombreux thèmes WordPress affichent des menus adaptés aux mobiles. Un menu réactif en plein écran ou un menu de panneau de diapositives dynamique dans les thèmes WordPress peut être une bonne idée pour personnaliser davantage votre navigation mobile. Pour cette raison, examinons l'intégration d'un menu à panneau coulissant dans les thèmes WordPress.

Première étape : installez le plug-in de menu réactif

L'installation et l'activation du plugin Responsive Menu est la première étape. Il existe deux versions différentes de ce plugin, une version payante et une version gratuite . Alors que la version payante de Responsive Menu offre quelques extras sympas comme la logique conditionnelle et plus d'options de thème, nous utiliserons le plugin open-source pour ce tutoriel. Après avoir activé le menu réactif, accédez à Menu réactif> Menus. Dès que vous y êtes, montez dans la barre d'outils et appuyez sur le bouton "Créer un nouveau menu". Donnez un nom à votre nouveau menu et enregistrez votre travail. Ne vous inquiétez pas s'il est indiqué qu'il est vide.

Deuxième étape : choisir le thème

Le nouveau menu réactif vous proposera alors quatre options de conception différentes. Vous pouvez acheter plus de thèmes si vous le souhaitez. Ce didacticiel utilisera le thème sélectionné par le système. Ensuite, vous pouvez continuer en sélectionnant l'option "Suivant". Si vous ne l'avez pas déjà fait, donnez un nom à votre menu réactif, puis choisissez le type de menu de votre tableau de bord WordPress que vous souhaitez voir apparaître dans la barre latérale. Nous avons sélectionné l'option "Navigation" pour les besoins de ce tutoriel.

Si vous souhaitez que vos visiteurs ne voient que le nouveau menu du panneau de diapositives, vous pouvez également choisir de masquer le menu par défaut qui apparaît avec votre thème WordPress. Pour ce faire, utilisez la zone intitulée "Masquer le menu du thème" pour saisir du code CSS. Cliquez sur le bouton "En savoir plus" pour plus d'informations sur la façon de saisir le code approprié pour le thème choisi. L'édition Pro ajoute quelques options de personnalisation supplémentaires pour l'utilisateur.

Troisième étape : configurez-le

Après avoir ajusté les paramètres à votre convenance, vous pouvez générer votre menu en cliquant sur le bouton "Créer un menu". Après avoir fait cela, vous trouverez un aperçu de votre site à droite, avec des options pour passer en mode mobile, tablette ou bureau en bas . Sur la gauche, vous verrez d'autres paramètres de personnalisation. Prenez note de la langue qui apparaît au-dessus des options de menu. Le titre du menu et une ligne de "Contenu supplémentaire", comme le nomme le plugin, sont affichés ici.

Sélectionnez « Menu mobile », puis « Conteneur » dans le menu latéral pour modifier ou masquer le texte. Dans la zone de texte du titre, vous pouvez entrer n'importe quoi, de "Menu principal" à "Navigation". Pour désactiver la barre de titre, basculez simplement le commutateur intitulé "Titre" sur la position désactivée. Une fois que vous avez fait cela, allez dans l'option "Contenu supplémentaire". Vous avez la possibilité de désactiver cette fonctionnalité ou de remplacer le texte par autre chose. Lorsque vous avez fini de personnaliser le menu, n'oubliez pas de cliquer sur le bouton "Mettre à jour" en bas de la page.

Avant de mettre en ligne, il est important de faire quelques tests préliminaires. Pour vous assurer que tout fonctionne correctement, vous pouvez utiliser un navigateur différent de ceux que vous utilisez normalement pour accéder à votre site. Dans cet exemple, nous avons utilisé le navigateur Google Chrome. Pour accéder au site sur des appareils mobiles, nous avons téléchargé une application appelée « Internet Explore for Android ». Nous avons copié et collé l' URL de ce site dans l'application, et les résultats ont été étonnants. Nous avons constaté que le menu était correctement formaté dans les orientations paysage et portrait, et que tous les liens fonctionnaient comme prévu. Votre kilométrage peut cependant varier en ce qui concerne les appareils mobiles. Nous vous encourageons à tester votre menu sur autant d'appareils et de navigateurs que possible avant de le mettre en ligne. Si vous trouvez des problèmes, il est maintenant temps de les résoudre.

Cinquième étape : passez au direct

Une fois que le menu a été testé et que vous êtes convaincu que tout fonctionne comme prévu, il est temps de le mettre à la disposition du public. Cliquez sur l'icône de menu dans le coin supérieur droit de votre site et sélectionnez "Paramètres du menu" dans le menu déroulant. Vous verrez une liste d'éléments avec le titre "Menu mobile" en haut de la liste. C'est ici que vous entrerez l'adresse Web de votre page Plugin de menu mobile. Une fois cela fait, cliquez sur "Enregistrer les modifications" et attendez quelques secondes pour que les modifications prennent effet. C'est ça!

Conclusion

Maintenant que vous savez comment ajouter un menu de panneau de diapositives dans les thèmes WordPress, essayez-le sur votre propre site. Et maintenant, si jamais vous souhaitez mettre à jour votre site Web avec des menus supplémentaires, vous savez comment faire . J'espère que cet article vous a aidé à acquérir une nouvelle compétence et ne vous a pas laissé submergé.