Kiedy system menu nawigacyjnego został wydany z WordPress 3.0, był to jeden z czynników, które zmieniły WordPress z platformy blogowej w CMS.

Oznaczało to, że możesz dodać dowolną treść do menu nawigacji witryny, w tym niestandardowe linki. Interfejs “przeciągnij i upuść” oznaczał, że każdy mógł stworzyć własne niestandardowe menu bez umiejętności kodowania.

Ale czasami nie chcesz na tym polegać. Jeśli tworzysz witrynę dla klienta, który będzie dodawał strony do swojej witryny, ale jest mało prawdopodobne, aby aktualizował menu nawigacyjne, gdy to zrobi, lub nie ma do tego umiejętności, przydatne może być automatyczne menu nawigacyjne.

W tym poście pokażę Ci, jak utworzyć automatyczne menu nawigacyjne, które wyświetla wszystkie strony w Twojej witrynie, a strony podrzędne wyświetlane są jako wpisy drugiego poziomu w menu nawigacyjnym.

Następnie możesz dodać ten kod do nagłówka strony w szablonie lub na pasku bocznym lub stopce, jeśli chcesz, a linki użytkowników będą automatycznie aktualizowane po dodaniu nowej zawartości do witryny.

Czego potrzebujesz, aby zautomatyzować menu nawigacji WordPress

Aby śledzić ten post, musisz:

  • Rozwój lub testowanie instalacji WordPress, z dodanymi niektórymi stronami i podstronami oraz
  • Edytor kodu.

Cały kod jest na Githubie, więc jeśli utkniesz, możesz go przesłuchać, aby zobaczyć, co powinieneś robić.

Konfigurowanie kodu

Mam zamiar dodać ten kod do wtyczki tak, że mam jeszcze go, jeśli powinienem zmienić mój temat w przyszłości. W ten sposób mogę kodować funkcję z mojej wtyczki do mojego motywu, aby dodać menu nawigacyjne lub menu sekcji we właściwym miejscu. Jeśli twój motyw ma Hooki, możesz użyć jednego lub więcej z nich, aby dodać swój kod.

Jeśli pracujesz z motywem innej firmy, który nie ma hooków, musisz dodać do niego kod. Nie koduj tego bezpośrednio do motywu: zamiast tego utwórz motyw potomny i dodaj do niego swój kod. Po prostu zrób duplikat pliku szablonu motywu z motywu nadrzędnego, który chcesz edytować, dodaj go do motywu podrzędnego i edytuj go.

Pierwszym krokiem jest utworzenie wtyczki. Tworzę folder dla mojego w moim wp-content / wtyczki folder. Utworzenie folderu oznacza, że mogę dodać więcej plików do wtyczki w przyszłości, jeśli zajdzie taka potrzeba, takich jak arkusz stylów lub pliki include.

Najpierw musisz dodać kod otwierający do wtyczki, w komentarzach, aby powiedzieć WordPress, co to jest:

Ładowanie gist 5d799dbd9f723a77fc6ea125b1c35318

Teraz aktywuj wtyczkę.

Następnie, jeśli używasz motywu podrzędnego, skonfiguruj go. Używam motywu child Of The Twenty Seventeen-oto mój arkusz stylów:

Ładowanie gist 43d6ad0777beb8824919888831831891

Gdy to zrobisz, jeśli w Twojej witrynie nie ma jeszcze kilku stron, dodaj je. Muszą mieć wielopoziomową strukturę. Oto moje dummy pages:

Pages added to the WordPress admin

Teraz zacznijmy dodawać kod do wtyczki.

Tworzenie funkcji hierarchicznej listy wszystkich stron

Użyjemy wp_list_pages() funkcja pobierania wszystkich stron i wyświetlania ich z linkami. Ale najpierw musimy zdefiniować kilka argumentów na to. Zacznij od utworzenia funkcji i Włączenia argumentów:

Ładowanie gist 51ff327cd3394dc10f70f37046f5220e

Argumenty są bardzo proste-jest tylko jeden dla poziomu stron, do których chcemy zejść. Ustawiając to na 2 oznacza to, że strony najwyższego poziomu i ich podstrony będą wyświetlane, ale nic niżej.

Teraz dodajmy wp_list_pages() funkcja po argumentach:

Ładowanie gist ce9a5471c5940ac4ba712233755c4cc8

Oto pełna funkcja:

Ładowanie gist cc2d95cf6d531f80587307c245602960

Dodawanie funkcji do motywu

W tej chwili funkcja nie pokazuje niczego nigdzie na mojej stronie. Aby to zmienić, musimy dodać kopię nagłówka z motywu nadrzędnego do motywu podrzędnego i edytować go.

Zacznij od powielenia pliku nagłówka do motywu podrzędnego i otwórz go. W twenty seventeen kod do menu nawigacyjnego jest w template-parts / nawigacja / Nawigacja-top.php co oznacza, że muszę dodać kopię tego pliku w tym samym miejscu w moim motywie podrzędnym, aby został poprawnie wywołany z nagłówek.php plik. W Twoim temacie może być nagłówek.php sam plik, który musisz skopiować.

W zależności od motywu kod menu będzie inny. W twenty seventeen, to jest kod, który muszę zastąpić:

Ładowanie gist 32f0895c18b9293b7b15e47f3d806015

Edytuj kod menu nav, aby dodać nową funkcję, z istniejącym kodem wewnątrz else{} oświadczenie:

Ładowanie gist 2c424baa714b94bbfa0a6844a8dd840f

Instrukcje warunkowe są ważne: najpierw sprawdza, czy funkcja dodana do wtyczki jest obecna (tj. jeśli wtyczka jest aktywowana), a jeśli tak, uruchamia funkcję z tego. Jeśli nie, uruchamia menu nawigacyjne jak zwykle.

Teraz rzućmy okiem na moją stronę:

the list of top level pages in the header,

Linki są wyświetlane, ale jest kilka problemów. Nie chcę, aby na górze było napisane ” strony “(co jest domyślne dla wp_list_pages() funkcja) i chcę bardziej efektywnie zamawiać strony. Zobaczysz, że strona główna znajduje się w środku listy, co nie jest idealne.

Poprawa funkcji

Wróćmy do kodu wtyczki i dostosuj go, aby rozwiązać te problemy.

Znajdź argumenty, dla których już zdefiniowałeś wp_list_pages():

Ładowanie gist e48bc295f1a3de12662fbed2f60e8e13

I edytuj go:

Ładowanie gist 52b5a8a12fc77a4447b6fa2c111bfeac

To dodaje dwa dodatkowe argumenty:

  • Znacznik przed listą, który teraz mówi “Menu” zamiast “strony”.
  • Kolejność wyświetlania stron.

Musisz wrócić do ekranów edycji stron i ustawić kolejność stron dla każdej z nich. Nadaj swojej stronie głównej wartość 0 i inne strony najwyższego poziomu wartości wyższe niż to.

Teraz, gdy przeglądasz menu, będzie to wyglądać tak:

Top level pages in the header with the home page listed first

Możesz również zmienić kolejność menu stron drugiego poziomu. Te nigdy nie będą wyświetlane powyżej stron najwyższego poziomu, więc możesz zacząć od 0 LUB 1 dla każdego zestawu podstron. Dobrym pomysłem jest, aby nie robić tych numerów po sobie, więc możesz wstawić dodatkowe strony w przyszłości, jeśli chcesz.

Automatyzacja menu nawigacji może zaoszczędzić pracę i zminimalizować błędy

Jeśli witryna jest całkowicie oparta na stronie, użycie tej techniki pozwoli Ci zaoszczędzić na dodawaniu nowych stron do menu podczas ich tworzenia. Jeśli tworzysz witrynę dla klienta i nie jesteś pewien, czy będzie on miał umiejętności lub pewność, aby edytować menu nawigacji, to w przyszłości potwierdzi to witrynę i zminimalizuje ryzyko błędu. Będziesz musiał pokazać klientowi, jak ustawić kolejność menu dla nowych stron, ale nie będziesz musiał uczyć go funkcjonalności menu.

A jeśli nie chcesz używać tego w głównym menu nawigacyjnym, zawsze możesz użyć go w stopce lub po treści. W ten sposób odwiedzający Twoją witrynę mają dokąd pójść po przeczytaniu każdej strony.

Mam nadzieję, że ten poradnik okazał się pomocny. Jeśli masz jakieś pytania dotyczące implementacji kodu w tym poście, daj mi znać w komentarzach poniżej.

Tagi:

You May Also Like

Jak naprawić nieprawidłowy błąd JSON w WordPress (Przewodnik dla początkujących)

W artykule: Co powoduje błąd “nieprawidłowa odpowiedź JSON” w WordPress?1. Sprawdź adresy…

Jak naprawić błąd krytyczny w WordPress (krok po kroku)

W artykule: Co To jest błąd krytyczny w WordPress?Co powoduje krytyczny błąd…

Jak zmienić kolor linku w WordPress (poradnik dla początkujących)

W artykule: Dlaczego Linki Są Ważne?Jak dodawać linki w postach i stronach…

9 Najlepsze Darmowe Wtyczki WordPress Author Bio Box

W artykule: 1. Simple Author Box2. Branda3. Autor postu WP4. Author Bio…