Récemment, un de nos utilisateurs nous a demandé comment remplacer leur menu de navigation par un menu du panneau coulissant jQuery. Le menu du panneau coulissant peut être utilisé pour améliorer considérablement l’expérience utilisateur sur les sites mobiles. Dans cet article, nous vous montrerons comment ajouter un menu de panneau de diapositives dans des thèmes WordPress.
Remarque: il s’agit d’un didacticiel de niveau intermédiaire qui nécessite une connaissance suffisante de HTML et CSS.
Remplacez le menu par défaut par un menu de panneau coulissant dans WordPress
Le but ici est d’afficher un menu de panneau de diapositives aux utilisateurs sur des écrans plus petits tout en conservant le menu par défaut de notre thème afin que les utilisateurs d’ordinateurs portables et de bureau puissent voir le menu complet. Avant de commencer, il est important de savoir qu’il existe de nombreux thèmes WordPress différents, et vous devrez traiter un peu de CSS plus tard.
La première chose à faire est d’ouvrir un éditeur de texte brut sur votre ordinateur, comme le Bloc-notes, et de créer un nouveau fichier. Copiez et collez ce code:
(fonction ($) {
$ ('# bascule'). bascule (
une fonction () {
$ ('# popout'). animate ({left: 0}, 'slow', function () {
$ ('# bascule'). html ('
');
});
},
function() {
$('#popout').animate({ left: -250 }, 'slow', function() {
$('#toggle').html('');
});
}
);
}) (jQuery);
Remplacez example.com par votre propre nom de domaine et remplacez également votre thème par votre répertoire de thème réel. Enregistrez ce fichier sous slidepanel.js sur votre bureau. Ce code utilise jQuery pour basculer un menu de panneau coulissant. Il anime également l’effet de bascule.
Ouvrez un client FTP comme Filezilla et connectez-vous à votre site Web. Ensuite, allez dans votre répertoire de thèmes et si vous avez un dossier js, ouvrez-le. Si votre répertoire de thème n’a pas de dossier js, vous devez en créer un et charger le fichier slidepanel.js dans le dossier js.
L’étape suivante consiste à concevoir ou à trouver une icône de menu. L’icône de menu la plus utilisée est celle à trois lignes. Vous pouvez en créer un avec Photoshop ou trouver l’une des nombreuses images google existantes. Pour ce didacticiel, nous utilisons une icône de menu 27x23px. Une fois que vous avez créé ou trouvé votre icône de menu, renommez-la en menu.png et chargez-la dans le dossier images de votre répertoire de thèmes.
L’étape suivante consiste à mettre en file d’attente le fichier javascript pour le panneau de diapositives dans WordPress. Fondamentalement, copiez et collez simplement ce code dans le fichier functions.php de votre thème.
wp_enqueue_script( 'wpb_slidepanel', get_template_directory_uri() . '/js/slidepanel.js', array('jquery'), '20131010', true );
Maintenant que tout est configuré, vous devez modifier le menu par défaut de votre thème. Généralement, la plupart des thèmes affichent des menus de navigation dans le fichier header.php du thème. Ouvrez le fichier header.php et recherchez la ligne similaire à celle-ci:
