Menu WordPress – zarządzanie identyfikatorami i klasami

Do każdego elementu menu (li) WordPress automatycznie dodaje identyfikator (id) oraz kilka klas (class). Zdarzają się jednak sytuacje, w których chcielibyśmy je usunąć i zwiększyć czytelność kodu lub odpowiednio zmodyfikować zostawiając tylko te, których naprawdę potrzebujemy. Wtedy powinniśmy sięgnąć po odpowiednie filtry.

Usuwanie identyfikatorów i klas

Przyjrzyjmy się domyślnemu kodowi menu generowanemu przez funkcję wp_nav_menu:

<ul>
   <li id="menu-item-74" class="current-menu-item menu-item menu-item-type-custom menu-item-object-custom menu-item-74"><a href="http://mojastrona.pl/">Strona główna</a></li>
   <li id="menu-item-71" class="menu-item menu-item-type-custom menu-item-object-page menu-item-71"><a href="http://mojastrona.pl/oferta/">Oferta</a></li>
   <li id="menu-item-72" class="menu-item menu-item-type-custom menu-item-object-page menu-item-72"><a href="http://mojastrona.pl/portfolio/">Portfolio</a></li>
   <li id="menu-item-73" class="menu-item menu-item-type-custom menu-item-object-page menu-item-73"><a href="http://mojastrona.pl/kontakt/">Kontakt</a></li>
</ul>

Jak widać dla każdego elementu <li> mamy do dyspozycji kilka domyślnych klas. Warto zwrócić uwagę na to, że każda z nich ma swoje znaczenie. Możemy je zmodyfikować za pomocą następujących filtrów:

• nav_menu_item_id – identyfikator (wp_nav_menu),
• nav_menu_css_class – klasy (wp_nav_menu),
• page_css_class – klasy (wp_list_pages).

Ostatni filtr dotyczy menu opartego o strony, wygenerowanego za pomocą funkcji wp_list_pages, które często używane jest jako metoda zastępcza dla głównej nawigacji, na wypadek gdy użytkownik nie stworzy własnego menu w panelu administracyjnym.

W naszym przykładzie wykorzystamy je w następujący sposób:

add_filter('nav_menu_css_class', 'nav_css_filter', 10, 1);
add_filter('nav_menu_item_id', 'nav_css_filter', 10, 1);
add_filter('page_css_class', 'nav_css_filter', 10, 1);

function nav_css_filter($classes) {
   $current = array('current-menu-item', 'current-menu-parent', 'current-menu-ancestor', 'current-page-ancestor');
   if (is_array($classes)) {
      $classes = array_intersect($classes, $current);
   } else {
      $classes = '';
   }
   return $classes;
}

W podanym przykładzie, usuwany jest identyfikator oraz wszystkie klasy, poza tymi podanymi w zmiennej $current. W zmiennej tej umieściłam klasy, które są przypisywane aktywnemu elementowi menu oraz jego elementom nadrzędnym, co jest często wykorzystywane do poprawnego ich oznaczenia w nawigacji.

Po jego zastosowaniu kod HTML menu wygląda następująco:

<ul>
   <li class="current-menu-item"><a href="http://mojastrona.pl/">Strona główna</a></li>
   <li><a href="http://mojastrona.pl/oferta/">Oferta</a></li>
   <li><a href="http://mojastrona.pl/portfolio/">Portfolio</a></li>
   <li><a href="http://mojastrona.pl/kontakt/">Kontakt</a>
</ul>

Dodawanie własnych klas

Podany przykład to zaledwie jeden z pomysłów na wykorzystanie zaprezentowanych filtrów. Innym częstym zastosowaniem, jest dodawanie własnych klas, pod specyficznymi warunkami, na przykład dodanie klasy elementowi o określonej nazwie.

add_filter('nav_menu_css_class' , 'my_nav_class' , 10 , 2);

function my_nav_class($classes, $item){
   if( $item->title == 'Kontakt'){
      $classes[] = 'kontakt';
   }
   return $classes;
}

W powyższym przykładzie elementowi <li>, zawierającemu pozycję menu o nazwie „Kontakt”, zostanie przypisana dodatkowa klasa „kontakt”.

Chciałam jeszcze zwrócić uwagę na obiekt $item, ponieważ jest on kluczem do filtrowania pozycji menu. W kodzie powyżej, w linijce 3 skorzystałam z właściwości title obiektu $item, a konkretnie sprawdziłam, czy ma ona wartość „Kontakt”. Obiekt $item ma jednak znacznie więcej właściwości, na podstawie których możesz tworzyć własne warunki. Aby wyświetlić ich pełną listę, możesz skorzystać z funkcji var_dump wywołując ją w środku funkcji my_nav_class:

var_dump($item);

Oczywiście musisz pamiętać, aby później ją usunąć.

Na koniec mam dla was jeszcze jeszcze fragment kodu, który jest uogólnieniem przykładu powyżej. Tutaj każdemu elementowi menu dodajemy klasę odpowiadającą jego nazwie, a polskie znaki diakrytyczne są zastępowane literami z podstawowego alfabetu łacińskiego:

add_filter('nav_menu_css_class' , 'my_nav_class' , 10 , 2);

function my_nav_class($classes, $item){
   $classes[] = sanitize_title_with_dashes(remove_accents($item->title));
   return $classes;
}

Po jego zastosowaniu kod HTML menu wygląda następująco:

<ul>
   <li class="current-menu-item strona-glowna"><a href="http://mojastrona.pl/">Strona główna</a></li>
   <li class="oferta"><a href="http://mojastrona.pl/oferta/">Oferta</a></li>
   <li class="portfolio"><a href="http://mojastrona.pl/portfolio/">Portfolio</a></li>
   <li class="kontakt"><a href="http://mojastrona.pl/kontakt/">Kontakt</a>
</ul>

Podsumowanie

Możliwość kontrolowania klas przypisywanych elementom menu daje w praktyce ogromne możliwości dostosowania menu do własnych potrzeb a przy tym nie wymaga zaawansowanych umiejętności programistycznych.

W kolejnym artykule pokażę Wam, w jaki sposób wygenerować menu z własną strukturą kodu HTML, bez konieczności pisania rozszerzenia klasy Walker.