Come creare un menu di navigazione reattivo in WordPress
Pubblicato: 2021-07-22La strada per creare un menu di navigazione reattivo in WordPress è aperta. Ci sono innumerevoli modi per farlo grazie alla flessibilità offerta da WordPress.
Oggi ti mostrerò come creare un menu di navigazione snello e reattivo. Lean perché raggiungeremo tutto questo in meno di 8 kilobyte e significa perché sarà un menu di navigazione incredibilmente efficiente. Rispecchieremo semplicemente il tuo attuale menu di navigazione in modo che tu non debba mantenerne due diversi. Prendendo due piccioni con una fava, creeremo un menu per dominarli tutti.
Prima di iniziare, ti suggeriamo di avere alcune conoscenze di base sullo sviluppo del front-end. (Richiediamo solo familiarità e non competenza, quindi non farti prendere dal panico.) La conoscenza di base di HTML, CSS, jQuery e WordPress sarebbe l'ideale. Questo è un tutorial da principiante a intermedio, poiché comporta la modifica dei file dei temi di WordPress.
Avrai anche bisogno di accedere ai seguenti file del tema WordPress:
-
functions.php -
header.php -
footer.php -
Style.css
Prima di apportare modifiche, assicurati di eseguire un backup del tuo sito o testare le modifiche in un ambiente locale. Vuoi sempre avere un modo per ripristinare i tuoi file originali.
Utilizzeremo bigSlide.js, un piccolo plug-in jQuery per la creazione di pannelli diapositive fuori schermo. Sul sito Web del plug-in, è descritto come "un minuscolo plug-in jQuery (~ 1kb compresso) per la creazione di una navigazione del pannello diapositiva fuori schermo". Ciò è in linea con il nostro obiettivo di navigazione reattiva snella e media.
Mettiamoci al lavoro.
1. Scarica l'ultima versione compressa di bigSlide.js. Copia il file nella cartella /js del tuo tema.
2. Apri functions.php nel tuo editor di codice preferito. Cerca wp_enqueue_script . Probabilmente vedrai più istanze, poiché wp_enqueue_script è il modo standard per aggiungere script a WordPress.
3. Subito dopo l'ultima istanza di wp_enqueue_script , aggiungi il seguente snippet e salva.
wp_enqueue_script( 'my-responive-menu', get_template_directory_uri() . '/js/bigSlide.min.js', array(), '20161214', true ); 4. Apri header.php e aggiungi la classe push al primo div subito dopo il body tag. Questa sezione in genere si presenta così:
<body <?php body_class(); ?>><div class="hfeed site">.Quindi dopo aver aggiunto dovresti finire con:
<div class="hfeed site push">. 5. Mentre sei ancora all'interno di header.php , cerca site-navigation . Questa sarà una classe o un id a seconda del tema. Nella maggior parte dei temi WordPress, dovrebbe assomigliare a questo:
&amp;amp;amp;amp;amp;amp;lt;nav 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;/nav&amp;amp;amp;amp;amp;amp;gt; 6. Aggiungi il seguente snippet appena prima di </nav> . Dovresti finire con questo:
&amp;amp;amp;amp;amp;amp;lt;nav 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;Qui stiamo creando un'icona di hamburger che verrà utilizzata per attivare il menu mobile.
7. Apri footer.php e cerca <?php wp_footer(); ?> <?php wp_footer(); ?> . Subito dopo questa riga, aggiungi il seguente snippet:
&amp;amp;amp;amp;amp;amp;lt;div 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;Fondamentalmente, stiamo creando un menu di navigazione duplicato nascosto nel piè di pagina.
8. Infine, apri style.css e subito dopo l'ultima riga, aggiungi il seguente frammento di codice:
.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;} }Ho usato una combinazione di colori scuri qui, ma sentiti libero di cambiare i colori in base alle tue esigenze.
Questo approccio funzionerà su quasi tutti i temi WordPress standard. Ma, a causa dei diversi casi d'uso e layout di intestazione disponibili, potrebbe essere necessario apportare alcune modifiche.
Alla fine, i fondamentali rimangono gli stessi. La logica è che su una dimensione dello schermo di 900 px o inferiore, nasconderai la navigazione principale predefinita e mostrerai invece l'icona dell'hamburger.
Facendo clic o toccando l'icona dell'hamburger, il menu che abbiamo duplicato a piè di pagina si apre come un'app simile al pannello laterale.
Se ti capita di rimanere bloccato, per favore lascia un commento qui sotto. Sarò più che felice di aiutarti. Buona codifica!