[wp_list_pages](https:\/\/developer.wordpress.org\/reference\/functions\/wp_list_pages\/)()<\/code>i [wp_list_categories](https:\/\/developer.wordpress.org\/reference\/functions\/wp_list_categories\/)()<\/code>. Wszyscy oni rozszerzaj\u0105 Walker<\/code>klas\u0119 og\u00f3ln\u0105. Rozszerzymy ten Walker_Nav_Menu<\/code>, kt\u00f3ry jest u\u017cywany do menu w WordPressie.<\/p>\nPoniewa\u017c rozszerzamy kolejn\u0105 klas\u0119, wystarczy doda\u0107 funkcje, kt\u00f3re chcemy przes\u0142oni\u0107. Je\u015bli funkcja nie istnieje w naszej klasie, WordPress uruchomi funkcj\u0119 klasy nadrz\u0119dnej (klasy, kt\u00f3r\u0105 rozszerzamy).<\/p>\n
Przygotowanie<\/h2>\n
Mo\u017cesz doda\u0107 swoj\u0105 klas\u0119 walkera do plik\u00f3w wtyczek, motyw\u00f3w function.php<\/code>lub dowolnego pliku PHP zawartego w functions.php<\/code>(aby uzyska\u0107 czystszy kod). Zaczynasz od zdefiniowania swojej klasy wed\u0142ug wybranej przez siebie nazwy (upewnij si\u0119, \u017ce nazwa klasy jest unikalna i obejmuje to mo\u017cliwe nazwy klas w rdzeniu WordPressa!), rozszerzaj\u0105c Walker_Nav_Menu<\/code>:<\/p>\nclass AWP_Menu_Walker extends Walker_Nav_Menu {\n}<\/code><\/pre>\nAby powiedzie\u0107 WordPressowi, aby u\u017cywa\u0142 naszego chodzika, definiujemy to w naszych [wp_nav_menu](https:\/\/developer.wordpress.org\/reference\/functions\/wp_nav_menu\/)()<\/code>rozmowach. Ta funkcja jest odpowiedzialna za wy\u015bwietlanie menu i prawdopodobnie masz przynajmniej jedno w swoim motywie g\u0142\u00f3wnego menu.<\/p>\nW tablicy argument\u00f3w wp_nav_menu()<\/code>dodajesz nowy element z kluczem \u201ewalker" i tworzysz now\u0105 instancj\u0119 twojej klasy walker, jak na przyk\u0142ad:<\/p>\nwp_nav_menu([\n 'theme_location' => 'primary',\n 'menu_class' => 'main-menu',\n 'container' => 'nav',\n 'container_class' => 'header__main-nav',\n 'walker' => new AWP_Menu_Walker()\n]);<\/code><\/pre>\nJe\u015bli od\u015bwie\u017cysz witryn\u0119, nie zobaczysz \u017cadnych zmian. Dzieje si\u0119 tak, poniewa\u017c nasza klasa nie nadpisuje \u017cadnej z funkcji rodzica, a zatem WordPress po prostu uruchamia normalne funkcje walkera menu podczas wy\u015bwietlania menu, tak jak wcze\u015bniej powiedzieli\u015bmy mu, aby u\u017cywa\u0142 naszego walkera.<\/p>\n
Przegl\u0105d funkcji, kt\u00f3re mo\u017cemy nadpisa\u0107Walker_Nav_Menu<\/code><\/h2>\nPoni\u017cej znajduj\u0105 si\u0119 funkcje, kt\u00f3re mo\u017cesz doda\u0107 do swojej niestandardowej klasy chodzika, aby zast\u0105pi\u0107 funkcje klasy rodzicielskiej Walker_Nav_Menu<\/code>:<\/p>\nPierwsze cztery to funkcje, kt\u00f3re s\u0105 po prostu odpowiedzialne za wypisywanie i wszystkie wymagaj\u0105 do\u0142\u0105czenia do \u0142a\u0144cucha \u2013 pierwszej zmiennej parametru. Wa\u017cne jest, aby wiedzie\u0107, \u017ce echo<\/code>nic tu nie robisz, wszystko ma by\u0107 zbudowane jako sznurek.<\/p>\nstart_lvl<\/h3>\n
Funkcja start_lvl<\/code>odpowiada za wyprowadzenie kodu HTML na pocz\u0105tek nowego poziomu. Kr\u00f3tko m\u00f3wi\u0105c, powinien wypisa\u0107 pocz\u0105tkowy <ul><\/code>.<\/p>\nfunction start_lvl(&$output, $depth=0, $args=null) { }<\/code><\/pre>\nPierwszy parametr $output<\/code>\u2013 przekazany przez odwo\u0142anie, to ci\u0105g, do kt\u00f3rego do\u0142\u0105czysz swoje dane wyj\u015bciowe. $depth<\/code>jest liczb\u0105 ca\u0142kowit\u0105 sygnalizuj\u0105c\u0105 poziom, na kt\u00f3rym si\u0119 znajdujesz; 0 dla najwy\u017cszego poziomu, 1 dla bezpo\u015bredniego dziecka najwy\u017cszego poziomu i tak dalej. $args<\/code>jest obiektem wszystkich argument\u00f3w podanych w wp_nav_menu()<\/code>.<\/p>\nend_lvl<\/h3>\n
Funkcja end_lvl<\/code>jest odpowiedzialna za wyprowadzenie kodu HTML na koniec poziomu. Zwykle jest to tylko zamkni\u0119cie <\/ul><\/code>.<\/p>\nfunction end_lvl(&$output, $depth=0, $args=null) { }<\/code><\/pre>\nParametry s\u0105 dok\u0142adnie takie same jak start_lvl<\/code>powy\u017cej.<\/p>\nstart_el<\/h3>\n
Ta funkcja jest odpowiedzialna za wyprowadzenie kodu HTML ka\u017cdego elementu. W skr\u00f3cie powinien wypisa\u0107 pocz\u0105tek <li><\/code>i <a><\/code>tag z tytu\u0142em linku w \u015brodku.<\/p>\nfunction start_el(&$output, $item, $depth=0, $args=null, $id=0) { }<\/code><\/pre>\nPierwszy argument, $output<\/code>, jest jak zwykle \u0142a\u0144cuchem, do kt\u00f3rego do\u0142\u0105czysz dane wyj\u015bciowe. Drugi argument, $item<\/code>, to obiekt elementu menu \u2014 i to w\u0142a\u015bnie z niego pobierzesz wi\u0119kszo\u015b\u0107 danych do wyprowadzenia elementu menu. Je\u015bli link do menu jest pozycj\u0105 menu posta, otrzymasz tutaj obiekt posta. Niezale\u017cnie od rodzaju menu, otrzymasz r\u00f3wnie\u017c kilka dodatkowych przydatnych element\u00f3w; takich jak classes<\/code>, url<\/code>, title<\/code>i description<\/code>.<\/p>\nTrzeci argument, $depth<\/code>, jest liczb\u0105 ca\u0142kowit\u0105 m\u00f3wi\u0105c\u0105, na jakim poziomie jeste\u015bmy. Poziom 0 jest najwy\u017cszym poziomem, 1 jest bezpo\u015brednim dzieckiem najwy\u017cszego poziomu i tak dalej. Czwarty argument, $args<\/code>, jest obiektem wszystkich argument\u00f3w dostarczonych do wp_nav_menu()<\/code>. Pi\u0105ty parametr, $id<\/code>, to identyfikator aktualnej pozycji menu.<\/p>\nend_el<\/h3>\n
Funkcja end_el<\/code>odpowiada za wyprowadzenie zamkni\u0119cia elementu. Zwykle po prostu wyprowadza\u0142by <\/li><\/code>tag.<\/p>\nfunction end_el(&$output, $item, $depth=0, $args=null) { }<\/code><\/pre>\nArgumenty dla end_el<\/code>s\u0105 takie same jak start_el<\/code>powy\u017cej, z wyj\u0105tkiem tego, \u017ce funkcja nie ma pi\u0105tego parametru, $id<\/code>.<\/p>\ndisplay_element<\/h3>\n
Funkcja display_element<\/code>jest funkcj\u0105 dziedziczon\u0105 z Walker<\/code>klasy og\u00f3lnej i jest funkcj\u0105 odpowiedzialn\u0105 za przechodzenie. Jest to funkcja, kt\u00f3ra kolejno wywo\u0142uje wszystkie powy\u017csze funkcje.<\/p>\nW\u0142\u0105czam to tutaj, poniewa\u017c w niekt\u00f3rych przypadkach, na przyk\u0142ad, je\u015bli chcesz zapobiec przechodzeniu ca\u0142ej ga\u0142\u0119zi, u\u017cyjesz do tego tej funkcji.<\/p>\n
function display_element($element, &$children_elements, $max_depth, $depth, $args, &$output) { }<\/code><\/pre>\nPierwszym argumentem, $element<\/code>, jest obiekt pozycji menu \u2013 to jest to, co jest przekazywane jak $item<\/code>w powy\u017cszych funkcjach. Drugi argument $children_elements<\/code>\u2013 \u200b\u200bprzekazany przez odwo\u0142anie, zawiera wszystkie elementy potomne, kt\u00f3re ta funkcja b\u0119dzie przemierza\u0107. $max_depth<\/code>, trzeci argument, to liczba ca\u0142kowita, kt\u00f3ra sygnalizuje, jak g\u0142\u0119boko powinni\u015bmy przeby\u0107, a czwarty argument, $depth<\/code>, to g\u0142\u0119boko\u015b\u0107, na kt\u00f3rej aktualnie si\u0119 znajdujemy. Pi\u0105ty argument, $args<\/code>, to argumenty przekazywane do funkcji, kt\u00f3ra wywo\u0142a\u0142a walker (w przypadku menu by\u0142yby to argumenty dostarczone do wp_nav_menu()<\/code>), a ostatni argument $output<\/code>\u2013 \u200b\u200bprzekazywany przez referencj\u0119, to dane wyj\u015bciowe przekazywane jako pierwszy argument we wszystkich z powy\u017cszych funkcji.<\/p>\nModyfikowanie wyj\u015bcia ka\u017cdego elementu<\/h2>\n
W powy\u017cszym przegl\u0105dzie powiniene\u015b zobaczy\u0107, \u017ce funkcja start_el()<\/code>jest odpowiedzialna za wyprowadzenie kodu HTML dla pojedynczego elementu menu. Zacznijmy od zast\u0105pienia tej funkcji w naszej klasie chodzika prostym przyk\u0142adem.<\/p>\nPrzyk\u0142ad: zapobieganie dodawaniu link\u00f3w dla element\u00f3w \u201e#”<\/h3>\n
Upewnijmy si\u0119, \u017ce ka\u017cdy #<\/code>link \u201e ” otrzymuje <span><\/code>element zamiast tagu linku, aby unikn\u0105\u0107 od\u015bwie\u017cania strony.<\/p>\nclass AWP_Menu_Walker extends Walker_Nav_Menu {\n function start_el(&$output, $item, $depth=0, $args=[], $id=0) {\n $output .= \"<li class='\". implode(\" \", $item->classes). \"'>\";\n\u00a0\n if ($item->url && $item->url != '#') {\n $output .= '<a href=\"'. $item->url. '\">';\n } else {\n $output .= '<span>';\n }\n\u00a0\n $output .= $item->title;\n\u00a0\n if ($item->url && $item->url != '#') {\n $output .= '<\/a>';\n } else {\n $output .= '<\/span>';\n }\n }\n}<\/code><\/pre>\nElement zaczniemy od dodania <li><\/code>tagu do $output<\/code>. Chcemy mie\u0107 pewno\u015b\u0107, \u017ce domy\u015blne klasy WordPressa (na przyk\u0142ad 'menu-item’, 'menu-item-has-children’ itp.), a tak\u017ce klasy wprowadzone r\u0119cznie w edytorze menu zostan\u0105 dodane do naszego elementu listy. Klasy dostarczone w postaci tablicy przyklejamy za $item->classes<\/code>pomoc\u0105 funkcji PHP [implode](https:\/\/www.php.net\/manual\/en\/function.implode.php)()<\/code>oddzielaj\u0105c ka\u017cdy element spacj\u0105.<\/p>\nW liniach #5-9 i #13-17 zajmujemy si\u0119 warunkowym wyj\u015bciem elementu opakowuj\u0105cego. Wyprowadzamy <a><\/code>tag, chyba \u017ce adres URL elementu to \u201e #<\/code>„, w kt\u00f3rym to przypadku <span><\/code>zamiast tego dostarczamy tag. W linii #11 po prostu wypisujemy tekst linku, kt\u00f3ry znajduje si\u0119 w $item->title<\/code>.<\/p>\nTo wszystko, czego potrzebujemy, aby upewni\u0107 si\u0119, \u017ce #<\/code>nie mo\u017cna klikn\u0105\u0107 wszystkich element\u00f3w menu, kt\u00f3re maj\u0105 \u201e ” jako adres URL!<\/p>\nJe\u015bli robisz to w motywie stylizowanym, pami\u0119taj, \u017ce mo\u017cesz straci\u0107 troch\u0119 stylu, je\u015bli motyw stylizuje <a><\/code>tag bezpo\u015brednio. Mo\u017cesz rozwi\u0105za\u0107 ten problem, zmieniaj\u0105c styl i ewentualnie dodaj\u0105c klas\u0119 do elementu span.<\/p>\nPrzyk\u0142ad: wy\u015bwietlanie opis\u00f3w pozycji menu<\/h3>\n
Jako przyk\u0142ad, inn\u0105 rzecz\u0105, kt\u00f3r\u0105 mo\u017cesz tutaj zrobi\u0107, jest wy\u015bwietlenie opisu menu. Istnieje, ale nie jest domy\u015blnie aktywowany. W edytorze menu WordPress musisz klikn\u0105\u0107 \u201eOpcje ekranu” w prawym g\u00f3rnym rogu i zaznaczy\u0107 \u201eOpis”:<\/p>\n
![\"Dowiedz](\"https:\/\/wordpress.mediadoma.com\/wp-content\/uploads\/2022\/01\/post-151802-61e4cfd7d3371.png\")
<\/a><\/p>\nPozwala to u\u017cytkownikowi na wprowadzenie opisu do ka\u017cdego elementu. Mo\u017cesz wypisa\u0107 ten opis w swojej klasie chodzika. Za\u0142\u00f3\u017cmy, \u017ce chcesz wy\u015bwietli\u0107 opis tylko element\u00f3w najwy\u017cszego poziomu, poniewa\u017c jest to cz\u0119\u015b\u0107 projektu Twojego motywu. Mo\u017cesz po prostu sprawdzi\u0107, czy $item<\/code>ma opis i czy $depth<\/code>jest 0, tak:<\/p>\n ...\n $output .= $item->title;\n\u00a0\n if ($depth == 0 && !empty($item->description)) {\n $output .= '<span class=\"description\">'. $item->description. '<\/span>';\n }\n ...<\/code><\/pre>\nPrzyk\u0142ad: dodawanie karetek rozwijanych<\/h3>\n
Bardziej powszechnym i u\u017cytecznym przyk\u0142adem jest dodanie \u201edaszka”, ikony sygnalizuj\u0105cej, \u017ce ta pozycja menu ma menu rozwijane (ma elementy podrz\u0119dne).<\/p>\n