Jak stworzyć responsywne menu nawigacyjne w WordPress
Opublikowany: 2021-07-22Droga do stworzenia responsywnego menu nawigacyjnego w WordPressie jest otwarta. Istnieje niezliczona ilość sposobów, aby to zrobić dzięki elastyczności oferowanej przez WordPress.
Dzisiaj pokażę Ci, jak stworzyć szczupłe i oszczędne, responsywne menu nawigacyjne. Lean, ponieważ zamierzamy osiągnąć to wszystko w mniej niż 8 kilobajtach, a oznacza to, że będzie to niesamowicie wydajne menu nawigacyjne. Zamierzamy po prostu odzwierciedlić twoje obecne menu nawigacyjne, abyś nie musiał utrzymywać dwóch różnych. Zabijając dwie pieczenie na jednym ogniu, stworzymy jedno menu, by nimi wszystkimi rządzić.
Zanim zaczniemy, sugerujemy, abyś miał podstawową wiedzę na temat programowania front-end. (Wymagamy tylko znajomości, a nie biegłości, więc nie panikuj.) Podstawowa znajomość HTML, CSS, jQuery i WordPress byłaby idealna. Jest to samouczek dla początkujących i średniozaawansowanych, ponieważ obejmuje modyfikację plików motywów WordPress.
Będziesz także potrzebować dostępu do następujących plików motywów WordPress:
-
functions.php -
header.php -
footer.php -
Style.css
Przed wprowadzeniem jakichkolwiek modyfikacji należy najpierw wykonać kopię zapasową witryny lub przetestować zmiany w środowisku lokalnym. Zawsze chcesz mieć możliwość przywrócenia oryginalnych plików.
Wykorzystamy bigSlide.js, małą wtyczkę jQuery do tworzenia pozaekranowych paneli slajdów. Na stronie wtyczki jest opisana jako „maleńka (~1kb skompresowana) wtyczka jQuery do tworzenia nawigacji po panelach slajdów poza ekranem”. Jest to zgodne z naszym oszczędnym i średnio elastycznym celem nawigacji.
Zabierzmy się do pracy.
1. Pobierz najnowszą skompresowaną wersję pliku bigSlide.js. Skopiuj plik do folderu /js motywu.
2. Otwórz functions.php w preferowanym edytorze kodu. Wyszukaj wp_enqueue_script . Prawdopodobnie zobaczysz wiele wystąpień, ponieważ wp_enqueue_script to standardowy sposób dodawania skryptów do WordPressa.
3. Zaraz po ostatnim wystąpieniu wp_enqueue_script dodaj następujący fragment i zapisz.
wp_enqueue_script( 'my-responive-menu', get_template_directory_uri() . '/js/bigSlide.min.js', array(), '20161214', true ); 4. Otwórz header.php i dodaj klasę push do pierwszego div zaraz po tagu body. Ta sekcja zazwyczaj wygląda tak:
<body <?php body_class(); ?>><div class="hfeed site">.Więc po dodaniu powinieneś otrzymać:
<div class="hfeed site push">. 5. Będąc nadal w header.php wyszukaj site-navigation . W zależności od motywu będzie to klasa lub identyfikator. W większości motywów WordPress powinien wyglądać mniej więcej tak:
&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. Dodaj następujący fragment kodu tuż przed </nav> . Powinieneś skończyć z tym:
&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;Tutaj tworzymy ikonę hamburgera, która będzie używana do uruchamiania menu mobilnego.
7. Otwórz footer.php i wyszukaj <?php wp_footer(); ?> <?php wp_footer(); ?> . Zaraz po tym wierszu dodaj następujący 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;Zasadniczo tworzymy ukryte zduplikowane menu nawigacyjne w stopce.
8. Na koniec otwórz style.css i tuż po ostatniej linii dodaj następujący fragment kodu:
.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;} }Użyłem tutaj ciemnej kolorystyki, ale możesz dowolnie zmieniać kolory, aby dopasować je do swoich potrzeb.
To podejście będzie działać na prawie wszystkich standardowych motywach WordPress. Jednak ze względu na różne przypadki użycia i układy nagłówków może być konieczne wprowadzenie kilku zmian.
Ostatecznie podstawy pozostają takie same. Powodem jest to, że na ekranie o rozmiarze 900 pikseli lub mniejszym ukryjesz domyślną nawigację główną i zamiast tego wyświetlisz ikonę hamburgera.
Po kliknięciu lub dotknięciu ikony hamburgera menu, które powieliliśmy w stopce, otwiera się jako aplikacja, taka jak panel boczny.
Jeśli zdarzy Ci się utknąć, zostaw komentarz poniżej. Chętnie pomogę. Udanego kodowania!