publikacja: 2 lipca 2012, autor: , komentarzy 21 https://wpninja.pl/artykuly/menu-wordpress-zarzadzanie-identyfikatorami-i-klasami/

Menu WordPress – zarządzanie identyfikatorami i klasami

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:

 
   "menu-item-74""current-menu-item menu-item menu-item-type-custom menu-item-object-custom menu-item-74""http://mojastrona.pl/"Strona główna
   "menu-item-71""menu-item menu-item-type-custom menu-item-object-page menu-item-71""http://mojastrona.pl/oferta/"Oferta
   "menu-item-72""menu-item menu-item-type-custom menu-item-object-page menu-item-72""http://mojastrona.pl/portfolio/"Portfolio
   "menu-item-73""menu-item menu-item-type-custom menu-item-object-page menu-item-73""http://mojastrona.pl/kontakt/"Kontakt
 

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:

 
   "current-menu-item""http://mojastrona.pl/"Strona główna
   "http://mojastrona.pl/oferta/"Oferta
   "http://mojastrona.pl/portfolio/"Portfolio
   "http://mojastrona.pl/kontakt/"Kontakt
 

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:

 
   "current-menu-item strona-glowna""http://mojastrona.pl/"Strona główna
   "oferta""http://mojastrona.pl/oferta/"Oferta
   "portfolio""http://mojastrona.pl/portfolio/"Portfolio
   "kontakt""http://mojastrona.pl/kontakt/"Kontakt
 

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.

Dodaj własny komentarz