Bez dłuższego wstępu, w tym wpisie będzie o tym, jak do motywu WordPress dodać dynamiczne menu nawigacyjne. Niezależnie od tego, czy mówimy o menu głównym, drugim menu, czy jakimś zupełnie dodatkowym menu, jest to bez znaczenia, bo sposób jest uniwersalny.

Do czego jest nam to właściwie potrzebne? Po co bawić się w czytanie dokumentacji WP i robić sobie „pod górkę” dodając jakieś śmieszne funkcje do szablonu?

Możemy się ze sobą zgodzić, że wszystko co jest nam potrzebne, bardzo szybko możemy dodać do plików szablonu w postaci statycznego kodu. W zależności od tego, jak zaawansowanymi użytkownikami jesteśmy i jak dobrze radzimy sobie z HTML, może nam to zająć więcej lub mniej czasu. Bez wątpienia będzie to działało, ale co w przypadku, gdy przygotowujemy szablon dla kolejnej strony, albo dla kogoś? Łatwiej będzie nauczyć Ci taką osobę HTML, czy pokazać jak się dodaje pozycje menu w panelu administracyjnym WP? 🙂

Własny szablon WP – Jak dodać (dodatkowe) menu nawigacyjne do bloga

Powodów, dla których warto się tym zainteresować może być kilka – najprostszy z nich, to łatwość obsługi szablonu. Może nie dla osoby, która szablon przygotowała, taka osoba zapewne sobie z tym poradzi, ale jeżeli szablon jest dla klienta, lub jakiegoś innego odbiorcy, to już nie koniecznie musi tak być.

Przede wszystkim wygoda – przy przenoszeniu strony na inny serwer, lub instalowaniu szablonu na innej instancji WordPressa, na pewno docenimy możliwość edycji wszystkich menu z poziomu panelu administracyjnego, zamiast „grzebania w kodzie”.

Pojedyncze menu WordPress

Jeżeli w szablonie będzie tylko jedno menu, to jego zrobienie zajmie tylko chwilę. Zacznijmy od sprawdzenia, czy w katalogu naszego motywu istnieje już plik functions.php, jeżeli nie to należy go utworzyć.

W pliku functions.php dodajemy funkcję zdefiniowaną jak poniżej:

<?php register_nav_menu( 'top-navi', 'Main menu' ); ?>

Pierwszy argument to nazwa fabryczna naszego menu, dobrze aby była w miarę prosta, bez spacji i dziwnych znaków. Tę nazwę należy zapamiętać, bo za chwilę będzie nam potrzebna.

Drugi argument to nazwa, pod którą menu będzie widoczne w kokpicie WordPress.

Otwieramy do edycji plik, w którym chcemy umieścić menu. Najczęściej będzie to header.php, bo zwykle tam znajduje się górne menu. Odnajdujemy miejsce, w którym ma się ono wyświetlić, jeżeli jest tam stare statyczne menu to teraz zamieniamy je na ten kod:

<?php wp_nav_menu(array('theme_location'=>'top-navi')); ?>

W argumencie funkcji należy podać nazwę fabryczną menu, które ma się w tym miejscu wyświetlać, czyli nasze top-navi.

Zapisujemy zmiany i od teraz z poziomu Panelu Administracyjnego możemy zarządzać już naszym nowym menu.

Rejestracja wielu menu – register_my_menus()

Pierwszym krokiem, będzie napisanie funkcji w pliku functions.php naszego szablonu, która zarejestruje nazwy wszystkich menu. Po tym zabiegu, wszystkie zarejestrowane w tej funkcji menu, pojawią w panelu administracyjnym (WyglądMenu).

Dla mojego konkretnego przypadku (i szablonu) do pliku functions.php dodałem następujący kod:

function register_my_menus(){
  register_nav_menus(
    array(
     'header-menu' => 'Header Menu',
     'slider-menu' => 'Slider Menu',
     'footer-menu' => 'Footer Menu'
   )
 );
}
add_action('init', 'register_my_menus');

Jedyna trudność tutaj polega na poprawnym zadeklarowaniu tablicy z opcjami dla funkcji register_nav_menus(). Każdy wpis w tej tablicy to kolejne menu. W powyższym przykładzie deklarujemy chęć wykorzystania trzech sztuk menu z takimi nazwami fabrycznymi: header-menu, slider-menu i footer-menu. Każdej nazwie fabrycznej nadajemy wartość, która będzie nazwą menu widoczną później w kokpicie.

Dodawanie menu w WordPress

dodawanie menu w wordpressJak wspominałem wcześniej, do mojego szablonu chcę dodać aż 3 menu, które będą położone w zasadniczo różnych sekcjach strony. Nazwy nadałem raczej intuicyjne, więc nie powinno być problemu z ich późniejszą identyfikacją.

Po zapisaniu wszystkich zmian, w panelu administracyjnym (WyglądMenu), powinny być widoczne nowe opcje, co przedstawia obrazek obok.

Kolejny krok, to określenie miejsca, w którym menu ma się pojawić. U mnie Header Menu, oraz Slider Menu będą znajdować się w pliku header.php, natomiast Footer Menu w footer.php.

Moje menu rozmieszczone będą w ten sposób nie dlatego że tego wymaga WordPress, ale dlatego że tak mam podzielone pliki motywu. Nie chodzi o to, w którym pliku znajduje się menu, ale o jego położenie w kodzie HTML – w miejscu, gdzie wstawimy funkcję, tam menu zostanie wygenerowane.

Footer Menu

Zacznę od końca, bo zdaje się, że menu w stopce jest najprostsze. Otwieram do edycji plik mojego szablonu footer.php i szukam miejsca w którym menu ma się pojawić – w tym miejscu znajduje się moje stare statyczne menu, które stworzyłem wcześniej do celów testowych. Wyglądało ono tak:

<ul>
 <li><a href="#">Start</a></li>
 <li><a href="#">Download</a></li>
 <li><a href="#">Popularne</a></li>
 <li><a href="#">Nowe</a></li>
 <li><a href="#">Kontakt</a></li>
</ul>

Zamiast starego kodu wklejam funkcję, która dynamicznie wygeneruje menu na podstawie ustawień z kokpitu:

<?php wp_nav_menu(array('theme_location'=>'footer-menu')); ?>

Ważne, aby ustawić prawidłową nazwę fabryczną dla parametru theme_location. Wykorzystujemy tutaj jedną z nazw wcześniej zarejestrowanych – u mnie jest to footer-menu.

Zapisuję plik, odświeżam blog i sprawdzam czy działa… Moje stare menu zniknęło, a zamiast niego pojawił się link z napisem „Przykładowa strona”, więc nie jest najgorzej. 😀

dodawanie menu w wordpressPrzechodzimy do panelu administracyjnego (WyglądMenu) i dodajemy tam nowe menu… Opcje nowego menu  są identyczne jak w starym menu, tylko po to aby sprawdzić czy na pewno wszystko będzie ok – no i jest!

Właściwie cały wygląd menu pozostał niezmieniony – to menu nie wymagało żadnych poprawek w CSS, po prostu idealna sytuacja. Wszystko dzięki zachowaniu pewnych standardów przy projektowaniu motywu. Moje menu, którego strukturę pokazywałem wcześniej, to zwykłe linki w niesortowanej liście. I to wystarczyło – najprostsze rozwiązania są najlepsze i potrafią zaoszczędzić wiele czasu.

Header Menu

Zajmijmy się teraz menu głównym, które znajduje się w górnej części strony.

W functions.php wszystko mamy już zrobione, pozostało tylko dodanie funkcji w header.php, w miejscu gdzie menu ma się pojawić i utworzenie nowego menu w panelu administracyjnym. Tak wygląda linijka wstawiająca to górne menu:

<?php wp_nav_menu(array('theme_location' => 'header-menu')); ?>

Zmiany w pliku zapisuję i przechodzę do edycji menu (ponownie w panelu administracyjnym WyglądMenu).

header-menuAby nieco urozmaicić moje menu, do każdego linka dodałem małą ikonę, co da nam bardzo ładny efekt…

Slider Menu

Pozostało ostatnie menu, to obok slidera. Nic prostszego, wystarczy umieścić funkcję wp_nav_menu ze zmienionym argumentem, w odpowiednim miejscu (tam gdzie menu ma się pojawić), u mnie będzie to ponownie plik header.php:

<?php wp_nav_menu(array('theme_location' => 'slider-menu')); ?>

Plik zapisuję i znów przechodzę do panelu administratora, aby dodać ostatnie menu.

Podsumowanie

slidermeu Na rysunku obok widać, jak to wszystko wygląda w tym momencie u mnie. W analogiczny sposób możemy utworzyć praktycznie nieograniczoną liczbę menu.

Nawet jeżeli edytujesz motyw, który już posiada menu, możesz skorzystać ze wskazówek z funkcją dodawania pojedynczego menu, albo z funkcji z możliwością rejestrowania wielu menu niezależnie od tych już istniejących w motywie.

To już wszystko w tym kursie!

Wpis zaktualizowano 2016-02-03

Poprawionych zostało kilka literówek, oraz niektóre wyjaśnienia. Dodano formatowanie do nazw funkcji.

Aktualizacja 2017-07-09

Wpis został uaktualniony i przetestowany. Niektóre wyjaśnienia jak zwykle zostały lekko odświeżone, rozwinięte i poprawione. Dodałem nowy obrazek wyróżniający do wpisu.

Wpis otagowano:

Komentarze do wpisu 17 komentarzy

Pomogłem? Dodaj coś od siebie! Skomentuj ten wpis:

Twój adres e-mail nie zostanie opublikowany. Wymagane pola są oznaczone *