W artykule:
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:
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:
Gdy to zrobisz, jeśli w Twojej witrynie nie ma jeszcze kilku stron, dodaj je. Muszą mieć wielopoziomową strukturę. Oto moje dummy pages:
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:
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:
Oto pełna funkcja:
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ć:
Edytuj kod menu nav, aby dodać nową funkcję, z istniejącym kodem wewnątrz else{} oświadczenie:
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ę:
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():
I edytuj go:
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:
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.
Tagi:
