Budowa nawigacji za pomocą funkcji WordPress jest bardzo prosta. Zanim przejdziemy do napisania kodu, najpierw należy stworzyć kategorię wpisów. Oczywiście oprócz kategorii, w nawigacji mogą znaleźć się strony (na przykład kontakt) czy nawet pojedyncze wpisy z blogu. Nie ważne, które z tych rzeczy będziemy umieszczać w menu, to budowa nawigacji przebiega dokładnie w ten sam sposób.
Utworzenie kategorii
Najczęściej w nawigacji pojawiają się kategorie wpisów. I tak jest z motywem, na którym pracujemy. Zaloguj się do panelu administratora i stwórz trzy kategorie, na przykład jak te niżej.
- Poznajemy HTML-CSS
- Programowanie w PHP
- Baza danych MySQL
Na zdjęciu niżej utworzone kategorie. Czwartym elementem w nawigacji jest strona Kontakt
. Jeżeli nie posiadasz strony Kontakt
to ją utwórz.

Utworzone wcześniej wpisy przypisz do kategorii. Jeżeli utworzyłeś tylko 3 wpisy, jak sugerowałem na początku, to przypisz po jednym wpisie do każdej kategorii.
Rejestracja nawigacji
W WordPress mówi się o rejestracji nawigacji. Znaczy to, że w pliku functions.php
musimy poinformować system WordPress, o tworzeniu nawigacji. Służy do tego funkcja register_nav_menus()
, która jako argument przyjmuje tablice. Na listingu niżej użycie funkcji wraz z rejestracją nawigacji. Standardowo kod w pliku functions.php
opatrzyłem stosownym komentarzem.
functions.php – rejestracja nawigacji – fragment kodu
// Rejestracja Nawigacji
function register_menu() {
register_nav_menus(array(
'primary' => 'Nawigacja główna'
));
}
add_action('after_setup_theme', 'register_menu');
// ------------------------------------------------------------
Na początku tworzymy funkcję register_menu()
, którą dodajemy do zaczepu akcji add_actions() after_setup_theme
. Akcja ta jest wywoływana podczas każdego ładowania strony, po zainicjowaniu kompozycji. Wewnątrz register_menu()
umieszczamy funkcję WordPress register_nav_menus()
, w której tworzymy tablicę array
, z wartościami. Słowo primary
będzie służyć do identyfikacji nawigacji w motywie. Nazwa to może być dowolna na przykład header-menu
. Natomiast Nawigacja główna
, będzie nazwą wyświetlaną w panelu administratora WordPress.
Budowa nawigacji w panelu administratora
Po zarejestrowaniu nawigacji w pliku functions.php
, możemy ją przygotować w panelu administratora. W tym celu kliknij kolejno Wygląd - Menu
. Jeżeli nie widzisz opcji Menu
, to odśwież kokpit, aby plik functions.php
został załadowany z zajerestrowaną nawigacją. W miejscu Nazwa menu
, możesz podać dowolną nazwę. Kategorie oraz stronę Kontakt
rozmieść jak na zdjęciu niżej. Następnie kliknij przycisk Utwórz menu
. Do nawigacji można również dodać Strona główna
.

Po utworzeniu układu menu, należy je powiązać z rejestracją, którą dokonaliśmy w pliku functions.php
. Dlatego należy zaznaczyć opcję Wyświetl lokalizację
, jak na zdjęciu niżej. Nazwa opcji pochodzi z rejestracji nawigacji z pliku functions.php
– Nawigacja główna
. Następnie należy kliknąć Zapisz menu
.

Wyświetlanie nawigacji
Po dokonanych wszystkich czynnościach wyżej, można wyświetlić nawigację w motywie. Zanim przejdziemy do napisania kodu wyświetlającego menu, zobaczmy jak wygląda budowa nawigacji w pliku header.php
. Z poniższego kodu należy usunąć całą listę ul
.
Należy pamiętać, że WordPress wyświetla nawigację w postaci listy nieuporządkowanej.
header.php – nawigacja w HTML – fragment kodu
<nav id="nav">
<div class="center_page">
<div class="nav_menu">
<ul>
<li><a href="#">Poznajemy HTML-CSS</a></li>
<li><a href="#">Programowanie w PHP</a></li>
<li><a href="#">Baza danych MySQL</a></li>
<li><a href="#">Kontakt</a></li>
</ul>
</div>
</div>
</nav>
Do wyświetlenia nawigacji należy użyć funkcji wp_nav_menu()
, która jako argument przyjmuje tablicę. W tablicy zdefiniujemy dwa parametry kontener nawigacji oraz lokalizację, jak na listingu niżej. Parametr container
domyślnie umieszcza nawigację w elemencie div
. Przypisując do niej false
pozbywamy się domyślnego elementu div
. Następnie parametr theme_location
, wskazuje, która zarejestrowana nawigacja ma być umieszczona. Musi to być ta sama nazwa, którą podaliśmy w pliku functions.php
– primary
. Więcej o parametrach jakie może przyjąć funkcja wp_nav_menu()
dowiesz się z artykułu 06.05 Wyświetlanie menu.
header.php – nawigacja generowana przez WordPress – fragment kodu
<nav id="nav">
<div class="center_page">
<div class="nav_menu">
<?php
wp_nav_menu( array(
'container' => false,
'theme_location' => 'primary'
));
?>
</div>
</div>
</nav>
Po zapisaniu pliku i odświeżeniu strony, nawigacja działa co widać po zmianie adresu w pasku przeglądarki. Przypisane do kategorii artykuły będą wyświetlane jak i również strona Kontakt
.
Kilka nawigacji w witrynie
Często zdarza się, że strona posiada więcej niż jedną nawigację. Ta druga często umieszczona jest na przykład w stopce witryny. Budowa drugiej nawigacji wygląda dokładnie tak samo jak pierwszej. Wystarczy ją zarejestrować w pliku functions.php
jak na listingu niżej, utworzyć nowy układ w panelu administratora, a następnie powiązać ją z zarejestrowaną nazwą. W ten sposób można tworzyć 3, 4 i kolejną nawigację na stronie.
Przykład rejestracji drugiej nawigacji
function register_menu() {
register_nav_menus(array(
'primary' => 'Nawigacja główna',
'footer' => 'Nawigacja w stopce'
));
}
add_action('after_setup_theme', 'register_menu');
Wyświetlenie kolejnej nawigacji w motywie, wygląda dokładnie tak samo jak pierwszej. Wystarczy zmienić nazwę zarejestrowanej nawigacji, jak na listingu niżej.
Przykład umieszczenia drugiej nawigacji
<div class="footer_menu">
<?php
wp_nav_menu(array(
'container' => false,
'theme_location' => 'footer'
));
?>
</div>
Klasy nawigacji
WordPress, generując nawigację, dodaje klasy każdemu elementowi. Spis oraz opis wszystkich klas w artykule 06.06 Klasy CSS w nawigacji.
Rejestracja jednej nawigacji
Funkcja register_nav_menus()
, za pomocą tablicy pozwala na rejestrację kilku nawigacji. Jeżeli jesteśmy pewni, że w motywie będzie utworzona tylko jedna nawigacja to można skorzystać z funkcji register_nav_menu()
. Poniżej kod rejestracji za pomocą tej funkcji.
Przykład rejestracji jednej nawigacji
function register_my_menu() {
register_nav_menu('header-menu', 'Nawigacja Główna');
}
add_action('after_setup_theme', 'register_my_menu');
Umieszczenie nawigacji w motywie, wygląda dokładnie tak samo jak w przypadku rejestracji nawigacji za pomocą funkcji register_nav_menus()
.
Nawigacja wielopoziomowa
Przy rejestracji nawigacji w pliku functions.php
oraz jej wyświetlania za pomocą wp_nav_menu()
, nie ma znaczenia czy jest to nawigacja jednopoziomowa czy wielopoziomowa. Decydującym czynnikiem czy nawigacja jest wielopoziomowa, jest jej układ w panelu administratora oraz odpowiednie zaprogramowanie zachowania za pomocą dowolnej metody (CSS, JS lub innej).
KOMENTARZE
Jeżeli masz pytanie lub sugestie dotyczącą artykułu to napisz komentarz. Wartościowe komentarze zostaną umieszczone jako opinie warte uwagi.