Menu nawigacyjne w WordPress

Dodawanie nawigacji WordPress Odcinek o numerze 06

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 element li
  • .menu-item-has-children = element li ma 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:

  1. Rejestrujemy menu funkcją register_nav_menu() lub register_nav_menus() – w parametrach określamy identyfikator lokalizacji i tekstowy opis menu.
  2. W panelu admina tworzymy nowe menu i przypisujemy go do odpowiedniej nazwy.
  3. Wyświetamy menu w motywie funkcją wp_nav_menu() z uwzględnieniem lokalizacji podanej podczas rejestracji menu.