Comment créer un menu de navigation réactif dans WordPress

Publié: 2021-07-22

La route vers la création d'un menu de navigation réactif 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 réactif 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.

navigation-réactive-dans-wp

Avant de commencer, nous vous suggérons d'avoir quelques connaissances de base en développement frontal. (Nous n'exigeons que la familiarité et non la 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.php
  • header.php
  • footer.php
  • Style.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.

Notre application gratuite de développement local, Local, vous aidera à simplifier votre flux de travail et à expérimenter votre site en toute sécurité. Essayez-le aujourd'hui!
ordinateur portable sur un bureau avec lampe montrant la page d'accueil d'un site Web pour une société appelée "Sharp Minds" qui lit "Creative Minds Powerful Words"

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échargez la dernière version compressée de bigSlide.js. Copiez le fichier dans le dossier /js de votre thème.

2. Ouvrez functions.php dans votre éditeur de code préféré. Recherchez wp_enqueue_script . Vous verrez probablement plusieurs instances, car wp_enqueue_script est le moyen standard d'ajouter des scripts à WordPress.

3. Juste après la dernière instance de wp_enqueue_script , ajoutez 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. Ouvrez header.php et 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 class="hfeed site">.

Ainsi, après l'ajout, vous devriez vous retrouver avec :

 <div class="hfeed site push">.

5. Toujours dans header.php recherchez 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 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 de code suivant juste avant </nav> . Vous devriez vous retrouver avec ceci :

 &amp;amp;amp;amp;amp;amp;amp;lt;nav class="site-navigation primary-navigation" role="navigation"&amp;amp;amp;amp;amp;amp;amp;gt; &amp;amp;amp;amp;amp;amp;amp;lt;?php wp_nav_menu( array( 'theme_location' =&amp;amp;amp;amp;amp;amp;amp;gt; 'primary', 'menu_class' =&amp;amp;amp;amp;amp;amp;amp;gt; 'nav-menu', 'menu_id' =&amp;amp;amp;amp;amp;amp;amp;gt; 'primary-menu' ) ); ?&amp;amp;amp;amp;amp;amp;amp;gt; &amp;amp;amp;amp;amp;amp;amp;lt;a href="#responsive-menu" class="menu-link"&amp;amp;amp;amp;amp;amp;amp;gt;&amp;amp;amp;amp;amp;amp;amp;amp;#9776;&amp;amp;amp;amp;amp;amp;amp;lt;/a&amp;amp;amp;amp;amp;amp;amp;gt; &amp;amp;amp;amp;amp;amp;amp;lt;/nav&amp;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.

Capture d'écran du site Web "Sharp Words" avec menu hamburger à droite

7. Ouvrez footer.php et recherchez <?php wp_footer(); ?> <?php wp_footer(); ?> . Juste après cette ligne, ajoutez l'extrait suivant :

 &amp;amp;amp;amp;amp;amp;amp;lt;div class="panel mobile-menu"&amp;amp;amp;amp;amp;amp;amp;gt;&amp;amp;amp;amp;amp;amp;amp;lt;?php wp_nav_menu( array('theme_location' =&amp;amp;amp;amp;amp;amp;amp;gt; 'primary',) );?&amp;amp;amp;amp;amp;amp;amp;gt;&amp;amp;amp;amp;amp;amp;amp;lt;/div&amp;amp;amp;amp;amp;amp;amp;gt; &amp;amp;amp;amp;amp;amp;amp;lt;script&amp;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;amp;lt;/script&amp;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.

responsive-navigation-menu-mobile-slide

Si vous êtes bloqué, veuillez laisser un commentaire ci-dessous. Je serai plus qu'heureux de pouvoir aider. Bon codage !