Récemment, l’un de nos utilisateurs nous a demandé comment remplacer son menu de navigation par un menu de 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 allons vous montrer comment ajouter un menu de panneau de diapositives dans les thèmes WordPress.
Remarque : Il s’agit d’un didacticiel de niveau intermédiaire qui nécessite des connaissances suffisantes en HTML et CSS.
Remplacer le menu par défaut par un menu de panneau de diapositives dans WordPress
L’objectif ici est de montrer 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 par la suite faire face à un peu de CSS.
La première chose que vous devez 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 :
(function($) { $('#toggle').toggle( function() { $('#popout').animate({ left: 0 }, 'slow', function() { $('#toggle').html('<img src="http://www.example.com/wp-content/themes/your-theme/images/menu.png" alt="close" />'); }); }, function() { $('#popout').animate({ left: -250 }, 'slow', function() { $('#toggle').html('<img src="http://www.example.com/wp-content/themes/your-theme/images/menu.png" alt="close" />'); }); } ); })(jQuery);
Remplacer example.com
par votre propre nom de domaine, et remplacez également your-theme
avec votre répertoire de thèmes actuel. Enregistrez ce fichier sous le nom slidepanel.js sur votre bureau. Ce code utilise jQuery pour basculer un menu de panneau de diapositives. Il anime également l’effet de bascule.
Ouvrez un client FTP comme Filezilla et connectez-vous à votre site Web. Ensuite, allez dans le répertoire de votre thème et s’il contient 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 télé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 couramment utilisée est celle avec trois lignes. Vous pouvez en créer une à l’aide de Photoshop ou trouver l’une des nombreuses images existantes sur Google. Pour ce tutoriel, 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 téléchargez-la dans le dossier images de votre répertoire de thème.
L’étape suivante consiste à mettre en file d’attente le fichier javascript pour le panneau de diapositives dans WordPress. Fondamentalement, copiez et collez ce code dans votre thème functions.php
déposer.
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. Habituellement, la plupart des thèmes affichent des menus de navigation dans les header.php
déposer. Ouvert header.php
fichier et recherchez la ligne similaire à celle-ci :
<?php wp_nav_menu( array( 'theme_location' => 'primary', 'menu_class' => 'nav-menu' ) ); ?>
L’objectif ici est d’envelopper le menu de navigation de votre thème avec le code HTML pour afficher le menu de votre panneau de diapositives sur des écrans plus petits. Nous allons l’envelopper dans un <div id="toggle">
et <div id="popout">
. Comme ça:
<div id="toggle"><img src="http://www.example.com/wp-content/themes/your-theme/images/menu.png" alt="Show" /></div> <div id="popout"> <?php wp_nav_menu( array( 'theme_location' => 'primary', 'menu_class' => 'nav-menu' ) ); ?> </div>
Remplacez example.com par votre propre nom de domaine et your-theme par votre répertoire de thèmes. Enregistrez vos modifications.
La dernière étape consiste à utiliser CSS pour masquer l’icône de menu pour les utilisateurs avec des écrans plus grands et l’afficher pour les utilisateurs avec des écrans plus petits. Nous devons également ajuster la position de l’icône du menu et l’apparence du panneau coulissant. Copiez et collez ce CSS dans la feuille de style de votre thème.
@media screen and (min-width: 769px) { #toggle { display:none; } } @media screen and (max-width: 768px) { #popout { position: fixed; height: 100%; width: 250px; background: rgb(25, 25, 25); background: rgba(25, 25, 25, .9); color: white; top: 0px; left: -250px; overflow:auto; } #toggle { float: right; position: fixed; top: 60px; right: 45px; width: 28px; height: 24px; } .nav-menu li { border-bottom:1px solid #eee; padding:20px; width:100%; } .nav-menu li:hover { background:#CCC; } .nav-menu li a { color:#FFF; text-decoration:none; width:100%; } }
N’oubliez pas que le menu de navigation de votre thème peut utiliser différentes classes CSS et qu’elles peuvent entrer en conflit avec ce style CSS. Cependant, vous pouvez résoudre ces problèmes en utilisant l’outil Chrome Inspector pour savoir quelles classes CSS sont en conflit dans votre feuille de style. Jouez avec le CSS pour qu’il corresponde à votre style et à vos besoins.
Nous espérons que ce didacticiel vous a aidé à ajouter un menu de panneau de diapositives dans WordPress à l’aide de jQuery. Pour vos commentaires et questions, veuillez laisser un commentaire ci-dessous et n’oubliez pas de nous suivre sur Google+