La route vers la création d’un menu de navigation responsive dans WordPress est ouverte. Il existe d’innombrables façons de le faire grâce à la flexibilité offerte par WordPress.Aujourd’hui, je vais vous montrer comment créer un menu de navigation responsive et léger.
Mince parce que nous allons réaliser tout cela en moins de 8 kilo-octets, et méchant parce que ce sera un menu de navigation incroyablement efficace. Nous allons simplement refléter votre menu de navigation actuel afin que vous n’ayez pas à en maintenir deux différents. En faisant d’une pierre deux coups, nous créerons un menu pour les gouverner tous.
Avant de commencer, nous vous suggérons d’avoir quelques connaissances de base en développement frontal. (Nous ne demandons que la familiarité et non une grande compétence, alors ne paniquez pas.) Des connaissances de base en HTML, CSS, jQuery et WordPress seraient idéales. Il s’agit d’un didacticiel débutant à intermédiaire, car il implique la modification des fichiers de thème WordPress.
Vous aurez également besoin d’accéder aux fichiers de thème WordPress suivants:
functions.phpheader.phpfooter.phpStyle.css
Avant d’apporter des modifications, assurez-vous d’exécuter une sauvegarde de votre site ou de tester d’abord les modifications dans un environnement local. Vous voulez toujours avoir un moyen de revenir à vos fichiers d’origine.
Nous allons utiliser bigSlide.js, un petit plugin jQuery pour créer des panneaux de diapositives hors écran. Sur le site Web du plug-in, il est décrit comme « un tout petit plug-in jQuery (~ 1 Ko compressé) permettant de créer une navigation dans un panneau de diapositives hors écran ». Ceci est conforme à notre objectif de navigation réactive lean and mean.
Mettons-nous au travail.
1. Télécharger la dernière version compressée de bigSlide.js. Copiez le fichier dans votre thème /js dossier.
2. Ouvrir functions.php dans votre éditeur de code préféré. Rechercher wp_enqueue_script. Vous verrez probablement plusieurs instances, comme wp_enqueue_script est le moyen standard d’ajouter des scripts à WordPress.
3. Juste après la dernière instance de wp_enqueue_scriptajoutez l’extrait de code suivant et enregistrez.
wp_enqueue_script( 'my-responive-menu', get_template_directory_uri() . '/js/bigSlide.min.js', array(), '20161214', true );
4. Ouvrir header.phpet ajoutez la classe push à la première div juste après la balise body. Cette section ressemble généralement à ceci:
<body <?php body_class(); ?>><div id="page" class="hfeed site">.
Ainsi, après l’ajout, vous devriez vous retrouver avec:
<div id="page" class="hfeed site push">.
5. Alors qu’il était encore à l’intérieur header.php rechercher site-navigation. Ce sera soit une classe soit un identifiant selon votre thème. Dans la plupart des thèmes WordPress, cela devrait ressembler à ceci :
<nav id="primary-navigation" class="site-navigation primary-navigation" role="navigation">
<?php wp_nav_menu( array( 'theme_location' => 'primary', 'menu_class' => 'nav-menu', 'menu_id' => 'primary-menu' ) ); ?>
</nav>
6. Ajoutez l’extrait suivant juste avant </nav>. Vous devriez vous retrouver avec ceci :
&amp;amp;amp;amp;amp;amp;lt;nav id="primary-navigation" class="site-navigation primary-navigation" role="navigation"&amp;amp;amp;amp;amp;amp;gt;
&amp;amp;amp;amp;amp;amp;lt;?php wp_nav_menu( array( 'theme_location' =&amp;amp;amp;amp;amp;amp;gt; 'primary', 'menu_class' =&amp;amp;amp;amp;amp;amp;gt; 'nav-menu', 'menu_id' =&amp;amp;amp;amp;amp;amp;gt; 'primary-menu' ) ); ?&amp;amp;amp;amp;amp;amp;gt;
&amp;amp;amp;amp;amp;amp;lt;a href="#responsive-menu" class="menu-link"&amp;amp;amp;amp;amp;amp;gt;&amp;amp;amp;amp;amp;amp;amp;#9776;&amp;amp;amp;amp;amp;amp;lt;/a&amp;amp;amp;amp;amp;amp;gt;
&amp;amp;amp;amp;amp;amp;lt;/nav&amp;amp;amp;amp;amp;amp;gt;
Ici, nous créons une icône de hamburger qui sera utilisée pour déclencher le menu mobile.
7. Ouvrir footer.php et chercher <?php wp_footer(); ?>. Juste après cette ligne, ajoutez l’extrait suivant:
&amp;amp;amp;amp;amp;amp;lt;div id="responsive-menu" class="panel mobile-menu"&amp;amp;amp;amp;amp;amp;gt;&amp;amp;amp;amp;amp;amp;lt;?php wp_nav_menu( array('theme_location' =&amp;amp;amp;amp;amp;amp;gt; 'primary',) );?&amp;amp;amp;amp;amp;amp;gt;&amp;amp;amp;amp;amp;amp;lt;/div&amp;amp;amp;amp;amp;amp;gt;
&amp;amp;amp;amp;amp;amp;lt;script&amp;amp;amp;amp;amp;amp;gt; jQuery('.menu-link').bigSlide({
menu: '.mobile-menu',
speed: 300,
side:"right",
easyClose:true});&amp;amp;amp;amp;amp;amp;lt;/script&amp;amp;amp;amp;amp;amp;gt;
Fondamentalement, nous créons un menu de navigation en double caché sur le pied de page.
8. Enfin, ouvrez style.css et juste après la dernière ligne, ajoutez l’extrait de code suivant:
.panel{ position: fixed; right: -15.625em; width: 15.625em; background:#222;}
.push{position:relative;}
.menu-link{display:none;color:#fff;background:#333;border-radius:4px;padding:2px 12px;float:right;}
.mobile-menu a{display:block;color:#fff;padding:10px 15px;}
.mobile-menu a:hover{background-color:#555;}
.mobile-menu li{border-bottom:1px #444 solid;}
@media only screen and (max-width:900px) {
#primary-menu{display:none;}
.mobile-menu #primary-menu{display:block;}
.menu-link{display:inline-block;}
}
J’ai utilisé un jeu de couleurs sombres ici, mais n’hésitez pas à changer les couleurs en fonction de vos besoins.
Cette approche fonctionnera sur presque tous les thèmes WordPress standard. Mais, en raison des différents cas d’utilisation et des dispositions d’en-tête, vous devrez peut-être faire quelques ajustements.
Au final, les fondamentaux restent les mêmes. La raison est que sur une taille d’écran de 900 pixels ou moins, vous masquez la navigation principale par défaut et affichez l’icône hamburger à la place.
En cliquant ou en appuyant sur l’icône hamburger, le menu que nous avons dupliqué dans le pied de page s’ouvre sous la forme d’une application comme le panneau latéral.
Si vous êtes bloqué, veuillez laisser un commentaire ci-dessous. Nous serons heureux de pouvoir aider. Bon codage!
