WordPress umożliwia korzystanie z tzw. klas Walkera do przemierzania i wyświetlania elementów w strukturze hierarchicznej. W tym poście dowiemy się, jak tworzyć, implementować i dostosowywać naszą własną klasę walkera, aby dostosować wyjście naszego menu.
Najbardziej znane zastosowanie dostosowywania za pomocą klas Walkera w WordPressie dotyczy menu, ale w rzeczywistości WordPress używa klas Walkera w wielu przypadkach, na przykład wyprowadzanie hierarchii taksonomii, hierarchii komentarzy [wp_list_pages](https://developer.wordpress.org/reference/functions/wp_list_pages/)()i [wp_list_categories](https://developer.wordpress.org/reference/functions/wp_list_categories/)(). Wszyscy oni rozszerzają Walkerklasę ogólną. Rozszerzymy ten Walker_Nav_Menu, który jest używany do menu w WordPressie.
Ponieważ rozszerzamy kolejną klasę, wystarczy dodać funkcje, które chcemy przesłonić. Jeśli funkcja nie istnieje w naszej klasie, WordPress uruchomi funkcję klasy nadrzędnej (klasy, którą rozszerzamy).
Przygotowanie
Możesz dodać swoją klasę walkera do plików wtyczek, motywów function.phplub dowolnego pliku PHP zawartego w functions.php(aby uzyskać czystszy kod). Zaczynasz od zdefiniowania swojej klasy według wybranej przez siebie nazwy (upewnij się, że nazwa klasy jest unikalna i obejmuje to możliwe nazwy klas w rdzeniu WordPressa!), rozszerzając Walker_Nav_Menu:
class AWP_Menu_Walker extends Walker_Nav_Menu {
}Aby powiedzieć WordPressowi, aby używał naszego chodzika, definiujemy to w naszych [wp_nav_menu](https://developer.wordpress.org/reference/functions/wp_nav_menu/)()rozmowach. Ta funkcja jest odpowiedzialna za wyświetlanie menu i prawdopodobnie masz przynajmniej jedno w swoim motywie głównego menu.
W tablicy argumentów wp_nav_menu()dodajesz nowy element z kluczem „walker" i tworzysz nową instancję twojej klasy walker, jak na przykład:
Jeśli odświeżysz witrynę, nie zobaczysz żadnych zmian. Dzieje się tak, ponieważ nasza klasa nie nadpisuje żadnej z funkcji rodzica, a zatem WordPress po prostu uruchamia normalne funkcje walkera menu podczas wyświetlania menu, tak jak wcześniej powiedzieliśmy mu, aby używał naszego walkera.
Poniżej znajdują się funkcje, które możesz dodać do swojej niestandardowej klasy chodzika, aby zastąpić funkcje klasy rodzicielskiej Walker_Nav_Menu:
Pierwsze cztery to funkcje, które są po prostu odpowiedzialne za wypisywanie i wszystkie wymagają dołączenia do łańcucha – pierwszej zmiennej parametru. Ważne jest, aby wiedzieć, że echonic tu nie robisz, wszystko ma być zbudowane jako sznurek.
start_lvl
Funkcja start_lvlodpowiada za wyprowadzenie kodu HTML na początek nowego poziomu. Krótko mówiąc, powinien wypisać początkowy <ul>.
function start_lvl(&$output, $depth=0, $args=null) { }Pierwszy parametr $output– przekazany przez odwołanie, to ciąg, do którego dołączysz swoje dane wyjściowe. $depthjest liczbą całkowitą sygnalizującą poziom, na którym się znajdujesz; 0 dla najwyższego poziomu, 1 dla bezpośredniego dziecka najwyższego poziomu i tak dalej. $argsjest obiektem wszystkich argumentów podanych w wp_nav_menu().
end_lvl
Funkcja end_lvljest odpowiedzialna za wyprowadzenie kodu HTML na koniec poziomu. Zwykle jest to tylko zamknięcie </ul>.
function end_lvl(&$output, $depth=0, $args=null) { }Parametry są dokładnie takie same jak start_lvlpowyżej.
start_el
Ta funkcja jest odpowiedzialna za wyprowadzenie kodu HTML każdego elementu. W skrócie powinien wypisać początek <li>i <a>tag z tytułem linku w środku.
function start_el(&$output, $item, $depth=0, $args=null, $id=0) { }Pierwszy argument, $output, jest jak zwykle łańcuchem, do którego dołączysz dane wyjściowe. Drugi argument, $item, to obiekt elementu menu — i to właśnie z niego pobierzesz większość danych do wyprowadzenia elementu menu. Jeśli link do menu jest pozycją menu posta, otrzymasz tutaj obiekt posta. Niezależnie od rodzaju menu, otrzymasz również kilka dodatkowych przydatnych elementów; takich jak classes, url, titlei description.
Trzeci argument, $depth, jest liczbą całkowitą mówiącą, na jakim poziomie jesteśmy. Poziom 0 jest najwyższym poziomem, 1 jest bezpośrednim dzieckiem najwyższego poziomu i tak dalej. Czwarty argument, $args, jest obiektem wszystkich argumentów dostarczonych do wp_nav_menu(). Piąty parametr, $id, to identyfikator aktualnej pozycji menu.
end_el
Funkcja end_elodpowiada za wyprowadzenie zamknięcia elementu. Zwykle po prostu wyprowadzałby </li>tag.
function end_el(&$output, $item, $depth=0, $args=null) { }Argumenty dla end_elsą takie same jak start_elpowyżej, z wyjątkiem tego, że funkcja nie ma piątego parametru, $id.
display_element
Funkcja display_elementjest funkcją dziedziczoną z Walkerklasy ogólnej i jest funkcją odpowiedzialną za przechodzenie. Jest to funkcja, która kolejno wywołuje wszystkie powyższe funkcje.
Włączam to tutaj, ponieważ w niektórych przypadkach, na przykład, jeśli chcesz zapobiec przechodzeniu całej gałęzi, użyjesz do tego tej funkcji.
function display_element($element, &$children_elements, $max_depth, $depth, $args, &$output) { }Pierwszym argumentem, $element, jest obiekt pozycji menu – to jest to, co jest przekazywane jak $itemw powyższych funkcjach. Drugi argument $children_elements– przekazany przez odwołanie, zawiera wszystkie elementy potomne, które ta funkcja będzie przemierzać. $max_depth, trzeci argument, to liczba całkowita, która sygnalizuje, jak głęboko powinniśmy przebyć, a czwarty argument, $depth, to głębokość, na której aktualnie się znajdujemy. Piąty argument, $args, to argumenty przekazywane do funkcji, która wywołała walker (w przypadku menu byłyby to argumenty dostarczone do wp_nav_menu()), a ostatni argument $output– przekazywany przez referencję, to dane wyjściowe przekazywane jako pierwszy argument we wszystkich z powyższych funkcji.
Modyfikowanie wyjścia każdego elementu
W powyższym przeglądzie powinieneś zobaczyć, że funkcja start_el()jest odpowiedzialna za wyprowadzenie kodu HTML dla pojedynczego elementu menu. Zacznijmy od zastąpienia tej funkcji w naszej klasie chodzika prostym przykładem.
Przykład: zapobieganie dodawaniu linków dla elementów „#”
Upewnijmy się, że każdy #link „ ” otrzymuje <span>element zamiast tagu linku, aby uniknąć odświeżania strony.
Element zaczniemy od dodania <li>tagu do $output. Chcemy mieć pewność, że domyślne klasy WordPressa (na przykład ‘menu-item’, ‘menu-item-has-children’ itp.), a także klasy wprowadzone ręcznie w edytorze menu zostaną dodane do naszego elementu listy. Klasy dostarczone w postaci tablicy przyklejamy za $item->classespomocą funkcji PHP [implode](https://www.php.net/manual/en/function.implode.php)()oddzielając każdy element spacją.
W liniach #5-9 i #13-17 zajmujemy się warunkowym wyjściem elementu opakowującego. Wyprowadzamy <a>tag, chyba że adres URL elementu to „ #“, w którym to przypadku <span>zamiast tego dostarczamy tag. W linii #11 po prostu wypisujemy tekst linku, który znajduje się w $item->title.
To wszystko, czego potrzebujemy, aby upewnić się, że #nie można kliknąć wszystkich elementów menu, które mają „ ” jako adres URL!
Jeśli robisz to w motywie stylizowanym, pamiętaj, że możesz stracić trochę stylu, jeśli motyw stylizuje <a>tag bezpośrednio. Możesz rozwiązać ten problem, zmieniając styl i ewentualnie dodając klasę do elementu span.
Jako przykład, inną rzeczą, którą możesz tutaj zrobić, jest wyświetlenie opisu menu. Istnieje, ale nie jest domyślnie aktywowany. W edytorze menu WordPress musisz kliknąć „Opcje ekranu” w prawym górnym rogu i zaznaczyć „Opis”:
Pozwala to użytkownikowi na wprowadzenie opisu do każdego elementu. Możesz wypisać ten opis w swojej klasie chodzika. Załóżmy, że chcesz wyświetlić opis tylko elementów najwyższego poziomu, ponieważ jest to część projektu Twojego motywu. Możesz po prostu sprawdzić, czy $itemma opis i czy $depthjest 0, tak:
Przykład: dodawanie karetek rozwijanych
Bardziej powszechnym i użytecznym przykładem jest dodanie „daszka”, ikony sygnalizującej, że ta pozycja menu ma menu rozwijane (ma elementy podrzędne).
Przykład karetek w akcji – za „Blogiem” i „Aktualnościami”
Musisz ustalić, jaki kod wyjściowy w postaci karetki zostanie wyświetlony. W moim przypadku wyprowadzam <i>element z określonymi klasami dla ładnej strzałki w dół dostępnej przez bibliotekę Fontawesome, która zapewnia tysiące ikon. Chcesz również zapewnić, aby ta karetka wyprowadzała tylko elementy, które mają dzieci. Najlepszym sposobem, jaki znalazłem, aby dowiedzieć się, czy bieżący element ma dzieci, jest odwołanie się do obiektu walker (tak, który jest samym naszym walkerem, ale także klasami, które rozszerza!) w $argsi sprawdzenie wartości logicznej has_children. Wyprowadzanie karetki jest tak proste, jak:
Kompletna klasa chodzika wyglądałaby tak:
I to wszystko, czego potrzebujesz, aby zapewnić, że Twoje menu będzie miało ładne ikony karetki na elementach nadrzędnych i że #linki „ ” nie będą klikalne.
Jeśli chcesz, aby ikona karetki zmieniła się, na przykład w strzałkę w górę, gdy menu jest aktywne, musisz dodać to za pomocą JavaScript do swojego motywu.
Jak sugerują powyższe przykłady, możesz manipulować danymi wyjściowymi w dowolny sposób, na podstawie dowolnych warunków. Możesz na przykład zmodyfikować dane wyjściowe na podstawie obecności określonej klasy (na przykład klasy wprowadzonej ręcznie w edytorze menu), wyszukując klasę w $item->classes, lub możesz manipulować (na przykład wielkimi literami) wyświetlanym tekstem elementu podanym w $item->title.
Chciałbym wspomnieć o jeszcze jednej przydatnej rzeczy. Pamiętaj, że $args zawiera wszystkie argumenty dostarczone do wp_nav_menu(). Obejmuje to na przykład theme_locationi inne, więc jeśli możesz modyfikować dane wyjściowe tylko dla określonych lokalizacji motywu – na przykład menu głównego. Ale w rzeczywistości możesz podać dowolne niestandardowe argumenty!
Załóżmy, że wielokrotnie wyświetlasz to samo menu, na przykład jedno na komputerze i ponownie na urządzeniu mobilnym. A może chcesz, aby twój chodzik manipulował elementami tylko wtedy, gdy są one wyświetlane wp_nav_menu()w twoim motywie, a nie wtedy, gdy menu jest dodawane za pomocą widżetu? Być może chcesz, aby twój chodzik radził sobie inaczej w takich przypadkach?
Możesz podać dowolne argumenty niestandardowe do wp_nav_menu(). Jako prosty przykład dodam boolean ‘ show_carets‘ do argumentów, aby upewnić się, że karetki są dodawane tylko w tych przypadkach, w których je chcę – zamiast mojej klasy chodzika dodawania karetek do wszystkich menu.
Następnie mogę po prostu zmienić mój fragment kodu z dodawaniem karetki powyżej (wiersz 19-21) w celu sprawdzenia, czy show_caretsjest obecny i prawdziwy w $args, na przykład:
Możesz dodać dowolne argumenty, upewniając się, że chodzik dostosowuje tylko te menu, które chcesz. Na przykład proste wartości logiczne dla różnych przypadków, np is_mobile_menu. lub cokolwiek innego, czego potrzebujesz.
I to wszystko. Zachęcamy do eksperymentowania i daj mi znać, jeśli masz jakieś pytania lub sugestie poniżej!