Cum să creați un meniu de navigare receptiv în WordPress
Publicat: 2021-07-22Drumul spre crearea unui meniu de navigare receptiv în WordPress este deschis. Există nenumărate modalități de a face acest lucru datorită flexibilității oferite de WordPress.
Astăzi, vă voi arăta cum să creați un meniu de navigare slab și sensibil. Lean pentru că vom realiza toate acestea în mai puțin de 8 kilobytes și înseamnă pentru că va fi un meniu de navigare incredibil de eficient. Pur și simplu vom oglindi meniul de navigare curent, astfel încât să nu trebuiască să mențineți două diferite. Omorând două păsări dintr-o singură lovitură, vom crea un meniu pentru a le guverna pe toate.
Înainte de a începe, vă sugerăm să aveți cunoștințe de bază privind dezvoltarea front-end. (Avem nevoie doar de familiaritate și nu de competență, așa că vă rugăm să nu vă panicați.) Cunoștințele de bază HTML, CSS, jQuery și WordPress ar fi ideale. Acesta este un tutorial de la începător până la intermediar, deoarece implică modificarea fișierelor teme WordPress.
De asemenea, veți avea nevoie de acces la următoarele fișiere cu teme WordPress:
-
functions.php -
header.php -
footer.php -
Style.css
Înainte de a face orice modificări, asigurați-vă că executați o copie de rezervă a site-ului dvs. sau testați mai întâi modificările într-un mediu local. Întotdeauna doriți să aveți o modalitate de a reveni la fișierele originale.
Vom folosi bigSlide.js, un mic plugin jQuery pentru a crea panouri de diapozitive în afara ecranului. Pe site-ul web al pluginului, acesta este descris ca „un plugin jQuery mic (~1 kb comprimat) pentru a crea navigare în afara ecranului din panoul de diapozitive”. Acest lucru este în concordanță cu obiectivul nostru de navigare slabă și sensibilă.
Să ne apucăm de treabă.
1. Descărcați cea mai recentă versiune comprimată a bigSlide.js. Copiați fișierul în folderul /js al temei dvs.
2. Deschide functions.php în editorul de cod preferat. Căutați wp_enqueue_script . Probabil că veți vedea mai multe instanțe, deoarece wp_enqueue_script este modalitatea standard de a adăuga scripturi la WordPress.
3. Imediat după ultima instanță a wp_enqueue_script , adăugați următorul fragment și salvați.
wp_enqueue_script( 'my-responive-menu', get_template_directory_uri() . '/js/bigSlide.min.js', array(), '20161214', true ); 4. Deschideți header.php și adăugați clasa push la primul div imediat după eticheta body. Această secțiune arată de obicei astfel:
<body <?php body_class(); ?>><div class="hfeed site">.Deci, după ce ați adăugat, ar trebui să ajungeți cu:
<div class="hfeed site push">. 5. În timp ce încă în header.php căutați site-navigation . Aceasta va fi fie o clasă, fie un id, în funcție de tema dvs. În majoritatea temelor WordPress, ar trebui să arate cam așa:
&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. Adăugați următorul fragment chiar înainte de </nav> . Ar trebui să ajungi cu asta:
&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;Aici creăm o pictogramă hamburger care va fi folosită pentru a declanșa meniul mobil.
7. Deschide footer.php și caută <?php wp_footer(); ?> <?php wp_footer(); ?> . Imediat după această linie, adăugați următorul fragment:
&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;Practic, creăm un meniu de navigare duplicat ascuns în subsol.
8. În cele din urmă, deschideți style.css și imediat după ultima linie, adăugați următorul fragment de cod:
.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;} }Am folosit o schemă de culori închise aici, dar nu ezitați să schimbați culorile pentru a se potrivi nevoilor dvs.
Această abordare va funcționa pe aproape toate temele standard WordPress. Dar, din cauza diferitelor cazuri de utilizare și a layout-urilor de antet, este posibil să trebuiască să faceți câteva ajustări.
În cele din urmă, fundamentele rămân aceleași. Motivul este că pe o dimensiune a ecranului de 900 px sau mai mică, veți ascunde navigarea principală implicită și veți afișa în schimb pictograma hamburger.
Când faceți clic pe sau atingeți pictograma hamburger, meniul pe care l-am duplicat în subsol se deschide ca o aplicație ca un panou lateral.
Dacă se întâmplă să rămâneți blocat, vă rugăm să lăsați un comentariu mai jos. Voi fi mai mult decât bucuros să vă ajut. Codare fericită!