Now that we know how to create a basic WordPress Theme from scratch, let’s take a look at how to create a custom navigation menu to our theme. To menu powinno mieć możliwość być kontrolowane z pulpitu nawigacyjnego WordPress. Innymi słowy, powinieneś być w stanie przejść do pulpitu nawigacyjnego i dodać lub usunąć linki do dowolnych stron, postów lub kategorii, które lubisz. Pod koniec tego przewodnika, to jest dokładnie to, co będziemy mieć. Przekopmy się i zobaczmy jak osiągnąć ten cel.
Otwórz header.php
Przedstawiamy i otwieramy plik header.php z motywu, nad którym pracowaliśmy. Naszym celem będzie dodanie menu, które będzie znajdowało się nad główną treścią strony, ale poniżej nazwy strony i obszaru tagline. Aby to zrobić, możemy dodać następujący kod poniżej:
<!DOCTYPE html><html <?php language_attributes(); ?>><head> <meta charset="<?php bloginfo( 'charset' ); ?>"> <title><?php bloginfo( 'name' ); ?></title><?php wp_head() ?></head><body <?php body_class(); ?>><div class="container"> <header class="site-header"> <h1><a href="<?php echo home_url(); ?>"><?php bloginfo( 'name' ); ?></a></h1> <h4><?php bloginfo( 'description' ); ?></h4> <nav class="navigation-menu"><?php wp_nav_menu() ?> </nav> </header>Zauważ, że korzystamy ze specjalnej funkcji dostarczonej nam przez WordPressa wp_nav_menu(). Ta funkcja zajmuje się całą pracą nóg dla Ciebie w budowaniu niestandardowego menu. Nie musisz ręcznie wpisywać całego html samemu, więc jest to całkiem pomocne. Teraz nie mamy jeszcze zbyt wiele stron, ale jeśli odwiedzimy naszą stronę testową, funkcja już wyświetla link do przykładowej strony, która istnieje na naszej instalacji.
Przekazywanie argumentów do funkcji wp_nav_menu()
Jak większość funkcji w WordPressie, możesz przekazać opcjonalne argumenty do funkcji wp_nav_menu(). Tutaj ustawimy tablicę i skonfigurujemy tylko jedną opcję. Używamy tablicy na wypadek, gdybyśmy chcieli przekazać wiele opcji w przyszłości. Oto jak moglibyśmy dodać ten kawałek kodu.
<!DOCTYPE html><html <?php language_attributes(); ?>><head> <meta charset="<?php bloginfo( 'charset' ); ?>"> <title><?php bloginfo( 'name' ); ?></title><?php wp_head() ?></head><body <?php body_class(); ?>><div class="container"> <header class="site-header"> <h1><a href="<?php echo home_url(); ?>"><?php bloginfo( 'name' ); ?></a></h1> <h4><?php bloginfo( 'description' ); ?></h4> <nav class="navigation-menu"><?php $args = ; ?><?php wp_nav_menu( $args ) ?> </nav> </header>Ta opcja daje nam sposób na nazwanie niektórych menu w naszym motywie. Możemy chcieć mieć więcej niż jedno menu, a to jest metoda, dzięki której można rozróżnić wiele menu.
Register Menu Location in functions.php
Aby skorzystać z menu, które właśnie utworzyliśmy w naszym pliku header.php, z poziomu pulpitu administracyjnego WordPress, musimy zarejestrować lokalizację menu w pliku functions.php motywu. Więc jak możemy zarejestrować nasze nowe menu w WordPressie? Możemy to zrobić za pomocą funkcji register_nav_menus() wbudowanej w WordPressa. Zarejestrujmy nasze menu w ten sposób.
<?phpfunction custom_theme_assets() {wp_enqueue_style( 'style', get_stylesheet_uri() );}add_action( 'wp_enqueue_scripts', 'custom_theme_assets' );register_nav_menus( );Skonfiguruj nasze niestandardowe menu w WordPress Dashboard
Nasze nowe menu powinno być teraz zarejestrowane w rdzeniu WordPress. WordPress jest teraz świadomy naszego menu, i jego lokalizacji w motywie. Możemy teraz przejść do pulpitu nawigacyjnego, utworzyć nowe menu i zarządzać jego lokalizacją. Konkretnie chcemy, aby pojawiło się ono tam, gdzie użyliśmy funkcji wp_nav_menu(). Zamierzamy odwiedzić Wygląd->Menu, a następnie kliknąć na „utwórz nowe menu”.
Możemy nazwać to menu jakkolwiek chcemy. Wybierzemy tylko Menu główne, aby było proste, a następnie kliknij na 'Utwórz menu’.
W następnym kroku, połączymy się z wszystkimi naszymi Kategoriami. Wybieramy więc Kategorie, Zaznacz wszystko, aktualizujemy Miejsce wyświetlania na 'Menu główne’, a następnie klikamy na 'Zapisz menu’. Wypróbujmy to.
Wizyta na naszej stronie pokazuje nam, że teraz otrzymujemy link do każdej kategorii w nowym menu, które stworzyliśmy. W tej chwili jest to tylko nieuporządkowana lista i nie jest jeszcze najładniejsza – ale działa! 
Jaka jest korzyść z rejestracji niestandardowego menu?
Wiem, wiem. Myślisz, że to nawet nie ma sensu przechodzić przez cały ten hoopla tylko po to, aby uzyskać kilka hiperłączy do niektórych kategorii, aby wyświetlić na swojej stronie. W pewnym sensie, masz rację. Dlaczego nie po prostu ręcznie zbudować niektóre z tych rzeczy siebie. Jasne, że można to zrobić, ale kiedy budujemy nasze menu, jak to zrobiliśmy tutaj, mamy teraz moc pulpitu WordPress do kontroli kodu mamy zawarte w naszym motywie. Możemy teraz łatwo przeciągnąć i upuścić zamawianie linków między innymi rzeczami bezpośrednio z pulpitu nawigacyjnego. Zmieńmy kolejność z WordPress, PHP, JavaScript na JavaScript, WordPress, a następnie PHP. Bardzo proste! 
Teraz, gdy odwiedzasz stronę, kolejność linków w menu jest aktualizowana. W tym podejściu nie ma potrzeby mieszania w kodzie bazowym.
Stylowanie niestandardowego menu
Ta nieuporządkowana lista po prostu się nie nada! Musimy sprawić, żeby wszystko było trochę bardziej zgrabne. Spędźmy trochę czasu stosując trochę niestandardowego CSS, aby trochę wyczyścić to menu. Po pierwsze, chcemy zamienić pionowo zorientowaną listę nieuporządkowaną na poziomo zorientowane menu. Chcielibyśmy także usunąć wypunktowanie każdego elementu listy, dodać trochę wypełnienia i marginesu, jak również usunąć podkreślenie dla linków. Oto próba stworzenia tego efektu w naszym pliku style.css.
/* Nav Menu */.navigation-menu ul { margin: 0; padding: 0;}.navigation-menu ul:before, .navigation-menu ul:after { content: ""; display: table;}.navigation-menu ul:after { clear: both;}.navigation-menu ul { *zoom: 1}.navigation-menu ul li { list-style: none; float: left; margin-right: 3px;}.navigation-menu ul li a:link,.navigation-menu ul li a:visited { display: block; padding: 12px 17px; border: 2px solid #ecf0f1; border-bottom: none; text-decoration: none;} W powyższym CSS dzieje się całkiem sporo. Prześledźmy to. W pierwszym selektorze .navigation-menu ul, usuwamy wszystkie wypełnienia i marginesy z listy nieuporządkowanej. Następnie upewniamy się, że lista nieuporządkowana wyczyści floaty dzieci elementów listy. W selektorze .navigation-menu ul li usuwamy wypunktowania z listy, spławiamy elementy listy w lewo i dodajemy mały margines po prawej stronie. Na koniec, kierujemy do linków. Najpierw zamieniamy je w elementy poziomu bloku z paddingiem 12px w pionie i 17px w poziomie. Dodajemy ładny efekt obramowania i usuwamy podkreślenie na linkach. Sprawdźmy to teraz w przeglądarce.
Ładnie! To menu wygląda o wiele lepiej niż na początku.
Jak dodać niestandardowy kolor po najechaniu na menu
Podstawowa stylizacja na miejscu. Może być miło mieć trochę efektu hover, gdy przesuwa się mysz nad każdym linkiem. Jest to bardzo łatwe do skonfigurowania przy użyciu następującego snippetu:
.navigation-menu ul li a:hover { background-color: #ebf5fb;}
To wygląda całkiem nieźle!
Jak kierować stanem aktywnym elementu menu
Inną rzeczą, którą moglibyśmy dodać jest możliwość dostosowania koloru aktywnego linku. Jest to coś innego niż zwykły efekt hover. W tym przypadku, gdy odwiedzamy konkretny link z menu, chcemy, aby WordPress był świadomy, że jest to teraz aktywna strona, którą przeglądamy i aby zaktualizować wizualną reprezentację, aby odzwierciedlić aktywny link. Aby to zrobić, możemy skorzystać ze specjalnej klasy, która jest wbudowana w WordPressa, aby zająć się właśnie tym. Jest to klasa current-menu-item. Oto jak możemy ją włączyć do naszego niestandardowego menu.
.navigation-menu ul li.current-menu-item a:link,.navigation-menu ul li.current-menu-item a:visited { background-color: #4285f4; color: #ffffff;}Jeśli odwiedzimy teraz naszą stronę i przetestujemy odwiedzanie różnych linków w niestandardowym menu, możemy zobaczyć, że wygląda to bardzo ładnie. Mamy teraz określony wygląd dla stanu hover, oraz inny wygląd dla stanu aktywnego linków w naszym menu. Jest to świetny sposób, aby upewnić się, że odwiedzający witrynę wiedzą, gdzie są obecnie, utrzymując aktywne menu zapalone, że tak powiem.
How To Create A Custom Menu In WordPress Summary
W tym samouczku, mieliśmy dobre spojrzenie na to, jak dodać niestandardowe menu do naszego niestandardowego motywu w WordPress. Zrobiliśmy użytek z kilku funkcji WordPress, aby pomóc nam wzdłuż. Pierwszą, której użyliśmy była wp_nav_menu(). Ta funkcja może automatycznie zbudować nieuporządkowaną listę i elementy dzieci, aby stworzyć strukturę dla ładnego menu, do którego można zastosować stylizację. Istnieje wiele argumentów, które możesz przekazać do tej funkcji, ale my skupiliśmy się tylko na podstawach. Następną funkcją, z której skorzystaliśmy była funkcja register_nav_menus(). Ta funkcja pozwala nam powiedzieć WordPressowi o naszym nowym menu i podłączyć się do niego w pulpicie nawigacyjnym WordPressa. Kiedy nasze nowe menu zostało zarejestrowane w WordPressie, odkryliśmy, że łatwo jest dodać lub usunąć wszystko, co chcemy z tego menu, bezpośrednio z pulpitu nawigacyjnego WordPressa i bez potrzeby edytowania jakiegokolwiek kodu w naszych plikach motywu. Na koniec, poświęciliśmy trochę czasu, aby poprawić wygląd naszego menu poprzez użycie niektórych niestandardowych stylów CSS.