Nawigacja jest jedym z ważniejszych elementów na stronie, który pozwala użytkownikowi na przemieszczenie się po witrynie. Menu nawigacyjne w WordPress, tak jak większość elementów, może być edytowane z poziomu panelu administratora.
W poprzednim wpisie: Personalizacja motywu – logo, tytuł i nagłówek strony udało nam się już podpiąć część elementów pod WordPress, tak, by można było je edytować poprzez panel administracyjny. Teraz przed wskoczeniem w temat wyświetlania wpisów w motywie, musimy jeszcze zająć się menu nawigacyjnym.
Rejestracja menu
Własne menu nawigacyjne rejestruje się funkcją register_nav_menu() – jeśli rejestrujemy pojedyncze menu lub register_nav_menus() – jeśli chcemy zarejestrować więcej menu w danym motywie.
// Gdy nasz motyw ma tylko jedno menu
register_nav_menu( 'identyfikator-menu', 'tekst-opisujący-menu' );
// Gdy mamy więcej menu w motywie
register_nav_menus(array(
'identyfikator-menu' => 'tekst-opisujący-menu'
));Funkcja rejestrująca menu powinna być zarejestrowana do zaczepu akcji after_setup_theme, czyli w przypadku motywu CloudyBlog, rejestrację menu dorzucam do funkcji cloudyblog_setup. W motywie CloudyBlog mam dwie nawigacje, więc wybieram funkcję przyjmującą tablicę z menu:
function cloudyblog_setup(){
/* Funkcje z odcinka 05 */
// Rejestracja menu
register_nav_menus( array(
'main-menu' => 'Primary', //menu główne w topie strony
) );
}
add_action('after_setup_theme', 'cloudyblog_setup');Tworzymy menu w panelu admina
Po zarejestrowaniu menu, w panelu administratora WordPress pojawia się nowa zakładka z konfiguracją menu ( Panel admina: Wygląd > Menu ). Tam tworzę nowe menu o nazwie „Main Menu” i klikam przycisk „utwórz menu”.
Chcę, żeby te menu wyświetlało się na górze strony, jako główne menu. W tym celu muszę je powiązać z tą lokalizacją. Po utworzeniu menu w panelu admina, wybieram je i w sekcji „ustawienia menu” zaznaczam checkbox przy „Primary” (tekst opisujący menu wybrany w podczas rejestracji menu) i klikam „Zapisz”.
Wyświetlenie menu w motywie
Żeby wyświetlić nawigację w naszym motywie, idę do pliku header.php i usuwam statyczną listę ul z odnośnikami nawigacyjnymi. Tag nav i przycisk otwierający nawigację zostawiam.
W miejsce listy z menu, wrzucam funkcję wp_nav_menu() zwracającą menu sworzone w panelu admina:
<nav class="navigation navigation--main">
<button class="menu-toggler" aria-controls="main-menu" aria-expanded="false">
<svg fill="#000000" height="24" viewBox="0 0 24 24" width="24" xmlns="http://www.w3.org/2000/svg" aria-hidden="true"><path d="M0 0h24v24H0z" fill="none"/><path d="M3 18h18v-2H3v2zm0-5h18v-2H3v2zm0-7v2h18V6H3z"/></svg>
</button>
<?php wp_nav_menu( array(
'theme_location' => 'main-menu',
) ); ?>
</nav>Żeby WP wiedział, które dokładnie menu chcę wyświetlić w tym miejscu, do parametru 'theme_location’ podaję identyfikator lokalizacji menu, który był określany przy okazji rejestracji menu.
Inne użyteczne paramtery funkcji wp_nav_menu():
wp_nav_menu( array(
'menu' => '', // ID, slug, nazwa lub obiekt menu
'menu_class' => 'menu', // klasa menu
'menu_id' => '{menu slug}', // ID menu
'container' => 'div', // czy lista ul ma być w kontenerze
'container_class' => 'menu-{menu slug}-container', // klasa kontenera
'container_id' => '', // ID kontenera
'before' => '', // tekst przez mark-upem hiperłącza (przed <a>)
'after' => '', // tekst za mark-upem hiperłącza (za </a>)
'link_before' => '', // tekst przed nazwą hiperłącza (za <a>)
'link_after' => '', // tekst za nazwą hiperłącza (przed </a>)
'depth' => 0, // ile poziomów ma mieć menu
'theme_location' => '', // identyfikator menu podany w register_nav_menu()/register_nav_menus()
'items_wrap' => '', //domyślnie ul z klasą i ID
'item_spacing' => 'preserve', // czy zachować białe znaki w kodzie HTML menu - przyjmuje jeszcze: discard
) );Rejestracja kolejnego menu
Na stronie ClodyBlog mamy jeszcze drugie menu nawigacyjne, które jest w stopce strony.
Żeby dać użytkownikowi możliwość wrzucania różnych odnośników nawigacyjnych do obu menu, powtarzam cały proces rejestracji, tworzenia i wyświetlania nowego menu.
function cloudyblog_setup(){
/* Funkcje z odcinka 05 */
// Rejestracja menu
register_nav_menus( array(
'main-menu' => 'Primary', //menu główne w topie strony
'footer-menu' => 'Secondary' //menu poboczne w stopce strony
) );
}
add_action('after_setup_theme', 'cloudyblog_setup');Teraz w panelu zarządzania menu klikam link „utwórz nowe menu”. Nowe menu nazywam „Footer menu” a po utworzeniu go, w sekcji „ustawienia menu – wyświetl lokalizację” zaznaczam checkbox obok nazwy „Secondary”.
W pliku footer.php, tak samo jak wcześniej w pliku nagłówka – usuwam listę ul z odnośnikami nawigacyjnymi i zamiast tego używam funkcji zwracającej menu utworzone w panelu admina. Jedyna różnica jest taka, że tym razem do 'theme_location' podaję 'footer-menu'.
Stylowanie menu
Warto wspomnieć, że menu generowane w WordPress automatycznie dostaje klasy i identyfikatory. Klasy i identyfikatory dla ul i kontenera można w jakimś stopniu zmieniać lub dodawać własne – za pomocą parametrów, które przekazujemy do wp_nav_menu().
Element listy li
Klasy dodawane do elementów listy nie są już tak łatwo edytowalne. Mimo tego, na starcie dostajemy całkiem spory wachlarz klas, które może otrzymać li. Z tych ciekawszych mamy:
.menu-item– tą klasę otrzymuje każdy elementli.menu-item-has-children= elementlima w sobie kolejny poziom (kolejną listęul).current-menu-item– klasa dla bieżącego elementu.menu-item-home= gdy element listy jest odnośnikiem do strony głównej.menu-item-object-page= element listy jest statyczną stroną
Podsumowanie
Żeby podpiąć menu nawigacyjne w naszym motywie WordPress:
- Rejestrujemy menu funkcją
register_nav_menu()lubregister_nav_menus()– w parametrach określamy identyfikator lokalizacji i tekstowy opis menu. - W panelu admina tworzymy nowe menu i przypisujemy go do odpowiedniej nazwy.
- Wyświetamy menu w motywie funkcją
wp_nav_menu()z uwzględnieniem lokalizacji podanej podczas rejestracji menu.