Jak kodować Automatyczny widget menu sekcji w WordPress

Jeśli regularnie korzystasz z dużych witryn e-commerce lub serwisów informacyjnych, zauważysz, że mają one menu sekcji z linkami do wszystkich stron w sekcji, w której aktualnie się znajdujesz. Dodanie jednego z nich do witryny pomaga użytkownikom znaleźć powiązane treści i zmniejszy współczynnik odrzuceń.

Ale ustawienie menu, które automatycznie wykrywa, w której sekcji znajduje się użytkownik i daje mu odpowiednie linki, nie jest takie proste. Możesz dodać niestandardowy widżet Menu do paska bocznego, ale wyświetli to samo menu na każdej stronie witryny. Jak więc przejść do dodania menu, które automatycznie identyfikuje, gdzie w witrynie użytkownik aktualnie przegląda i daje mu linki do innych stron w tej sekcji?

W tym poście pokażę Ci, jak napisać wtyczkę, która właśnie to robi. Robi dwie rzeczy:

• Po pierwsze, wykrywa, w której części witryny jesteśmy i jaka jest strona najwyższego poziomu dla tej sekcji.
• Następnie wyświetla listę wszystkich stron potomnych tej strony najwyższego poziomu, z linkiem do strony najwyższego poziomu.
• Na koniec tworzy widżet, którego możesz użyć do wyświetlenia menu sekcji.

Jeśli użytkownik znajduje się na stronie drugiego poziomu, zobaczy link do strony powyżej i wszystkich stron podrzędnych. A jeśli są na stronie najwyższego poziomu, zobaczą link do tej samej strony i wszystkich jej dzieci.

Uwaga: przesłałem kod do tego posta na GitHub, więc możesz go sprawdzić, jeśli śledzisz.

Czego potrzebujesz

Jest to post oparty na kodzie, więc będziesz potrzebował kilku rzeczy, jeśli masz zamiar podążać wzdłuż:

• Rozwój lub testowanie instalacji WordPress.
• Edytor kodu.

Uwaga: pomaga to również, jeśli masz zrozumienie, jak pisać wtyczki. Jeśli jest to dla Ciebie nowość, zapoznaj się z naszym kursem Akademii na temat rozwoju WordPress dla początkujących.

Tworzenie wtyczki

Zacznij od utworzenia pustej wtyczki. W Twoim wp-content / wtyczki katalog, utwórz folder dla wtyczki, a następnie wewnątrz, które tworzą pusty plik php. Nadaj mu nazwę, która jest niezapomniana i opisuje, co robi wtyczka.

Uwaga: chociaż na razie moja wtyczka ma tylko jeden plik, dobrym pomysłem jest umieszczenie go we własnym folderze, aby Jeśli chcesz dodać dodatkowe pliki, takie jak arkusz stylów w późniejszym terminie, możesz to zrobić łatwo.

Otwórz nowy plik i dodaj go do niego:

Teraz aktywuj wtyczkę za pomocą ekranu administratora wtyczek.

Sprawdzanie, czy jesteśmy na stronie najwyższego poziomu

Najpierw napiszemy funkcję, która sprawdza, czy jesteśmy na stronie najwyższego poziomu, a jeśli tak, zapisuje ten identyfikator strony jako zmienną, której możemy użyć później. Jeśli znajdujemy się na stronie drugiego poziomu, zidentyfikuje ona stronę najwyższego poziomu nad nią i zapisze identyfikator tej strony.

W swoim pluginie dodaj to:

Przejdźmy przez ten kod, aby zobaczyć, co robi:

• Po pierwsze, nazywa global $post zmienna, której będziemy używać w funkcji.
• To zastosowania if ($post - >post_parent ) aby sprawdzić, czy obecny post ma rodziców.
• Jeśli tak, to używa array_reverse (get_post_ancestors ($post- > ID ) aby pobrać listę przodków dla bieżącego postu i zapisać je w zmiennej o nazwie $ rodzice.
• Zwraca ID przodka najwyższego poziomu za pomocą powrót $rodzice [0].
• Jeśli bieżący post nie ma żadnych przodków, zwraca identyfikator bieżącego postu.

Oznacza to, że ta funkcja zwraca jedną z dwóch rzeczy: identyfikator bieżącego postu, jeśli jest to najwyższy poziom, lub identyfikator jego najwyższego przodka, jeśli ma przodków.

Następnie użyjemy tego identyfikatora w naszej następnej funkcji.

Wyświetlanie stron w bieżącej sekcji

Następnym krokiem jest użycie tego identyfikatora do wyświetlenia odpowiednich stron.

Teraz w pliku Wtyczki Dodaj pustą funkcję:

Musimy dodać dwie rzeczy do tej funkcji. Najpierw ustawimy wszystko, nazywając wpmu_check_for_top_page() funkcji i definiowanie argumentów dla get_pages() oraz wp_list_pages() funkcje. Następnie dodamy kod, aby wyświetlić te strony z linkami.

Najpierw wszystko ustalmy. Wewnątrz pustej funkcji dodaj to:

Wywołaliśmy wyniki naszej pierwszej funkcji i zapisaliśmy ją jako zmienną o nazwie $ przodek. Następnie używamy tego jako jednego z argumentów dla get_pages(). Argumenty określają również głębokość listy i jej tytuł, który jest pusty.

Teraz wyprowadźmy te strony z linkami. Jeszcze wewnątrz funkcji, dodaj to:

Popracujmy nad tym.:

• Najpierw uciekamy get_pages() używając naszych argumentów i definiując ją jako nową zmienną o nazwie $list_pages.
• Następnie sprawdzamy czy nasza zmienna jest wypełniona, tzn. czy get_pages() zwrócił wszystko.
• Jeśli tak, otwieramy ul element.
• Pierwszym elementem na liście jest sam przodek. To nie będzie wywoływane przez wp_list_pages() funkcja, ponieważ wszystko, co zwróci, to dzieci przodka, więc dodajemy to ręcznie. Jeśli nie chcesz umieszczać strony najwyższego poziomu na liście, możesz opuścić tę linię.
• Potem uciekamy wp_list_pages() z naszymi argumentami, które wyprowadzą listę stron z linkami.

Więc to jest nasz kod ustawiony. Jeśli chcesz, możesz po prostu dodać funkcję wpmu_list_subpages() gdzieś w plikach szablonów motywu, aby ją uruchomić (na przykład na pasku bocznym). Ale daje nam to większą elastyczność, jeśli zamienimy go w widżet, więc zróbmy to.

Tworzenie widżetu do wyświetlania naszej listy stron

Nie zamierzam wchodzić w wiele szczegółów na temat tego, jak działa kod do tworzenia widżetu, ale będę pracować przez kod krok po kroku. Jeśli chcesz dowiedzieć się więcej, możesz przejść do naszego postu na temat tworzenia własnego niestandardowego widżetu WordPress.

Pierwszym krokiem jest skonfigurowanie naszej funkcji widgetu za pomocą WP_Widget klasy. Dodaj to do swojej wtyczki:

Ta funkcja będzie musiała zawierać cztery rzeczy: funkcję konstruktora do tworzenia widżetu, funkcję formularza do wyświetlania formularza na ekranie administratora widżetów (i dostosowywania), funkcję aktualizacji, aby zapisać cokolwiek wejściowego do formularza, i wreszcie funkcję do wyświetlania zawartości widżetu na stronie.

Wewnątrz funkcji zacznij od dodania funkcji konstruktora:

Teraz Dodaj funkcję, aby dodać widżet do ekranu administratora widżetów i dostosowywania:

Spowoduje to utworzenie kodu HTML, który wyświetli formularz na ekranach administratora.

Następnym krokiem jest dodanie funkcji aktualizacji. Bez tego nic, co dodasz na ekranach administratora, nie zostanie zapisane:

A na koniec dodaj kod, aby wyświetlić zawartość widżetu na stronie:

Przyjrzyjmy się temu, co robi ta ostatnia funkcja:

• Najpierw sprawdza, czy jesteśmy na stronie, która nie jest stroną główną. Dzieje się tak dlatego, że strona główna nie ma podstron, więc nie powinna wyświetlać menu sekcji. Jeśli w Twojej witrynie jest inaczej, możesz usunąć ten bit.
• Następnie wyświetla wszelkie argumenty przed widżetem, zdefiniowane przez naszą funkcję formularza, i definiuje tytuł widżetu (który możesz edytować na ekranach administratora).
• Następnie tworzy na bok element, wypisuje tytuł i uruchamia nasz wpmu_list_subpages() funkcja.
• Wreszcie zamyka element na bok i pobiera wszelkie argumenty za po widżecie.

To jest konfiguracja widgetu. Ale nie zadziała, dopóki go nie zarejestrujesz. Oto ostatnia funkcja, którą musisz dodać do wtyczki:

Korzystanie z widżetu w witrynie

Masz teraz wtyczkę z widżetem, który automatycznie wyświetli menu sekcji. Tutaj jest na ekranie administratora widgetów:

I tak to wychodzi z przodu strony:

Od teraz po dodaniu nowych stron do struktury witryny będą one automatycznie dodawane do menu sekcji dla odpowiedniej sekcji. Zrobione!

Zautomatyzowane Menu Sekcji Pomoże Użytkownikom Poruszać Się Po Witrynie

Jeśli witryna jest oparta na hierarchicznej strukturze stron, dodanie menu sekcji pomoże użytkownikom znaleźć zawartość związaną z aktualnie przeglądaną stroną i poruszać się po niej. Na pasku bocznym działa jako przydatny dodatek do głównej nawigacji witryny.

Możesz dostosować tę wtyczkę, aby utworzyć listę stron w bieżącej sekcji na dole każdej strony,na przykład, być może dodając polecane obrazy. Wiązałoby się to z dodaniem obsługi polecanych obrazów do stron, a także postów-dlaczego nie wypróbować?