Ta lekcja opisuje, jak dodać dwie podstawowe funkcje WordPress do naszego motywu; menu i obszary widżetów. Dowiadujemy się, jak zarejestrować lokalizację głównego menu nawigacyjnego witryny i wyświetlić menu w naszych szablonach, a także umożliwić dodawanie widżetów w naszym pasku bocznym i obszarze stopki.
Zapewne zauważyliście, że ani „Menu", ani „Widżety” nie są dostępne z menu „Wygląd” w panelu administracyjnym. To dlatego, że nasz motyw jeszcze ich nie obsługuje. Naprawimy to w tej lekcji – zaczynając od menu .
Menu WordPress
Dodawanie menu do motywu składa się z dwóch części. Najpierw musisz zdefiniować jedną lub więcej lokalizacji menu w swoim functions.php. Przykładem jest menu główne, które będzie znajdować się w nagłówku wszystkich stron. Druga część to dodanie kodu w tym miejscu, które chcesz wyświetlić w menu. Na przykład w header.phpmiejscu, w którym chcesz umieścić menu główne.
W tym samouczku dodamy jedną lokalizację menu do głównej nawigacji witryny i umieścimy jej dane wyjściowe w naszym header.php. Zacznijmy od zarejestrowania lokalizacji w functions.php, co odbywa się za pomocą funkcji register_nav_menu :
add_action('init', 'wptutorial_register_menu');
function wptutorial_register_menu() {
register_nav_menu('main-nav', __('Main Navigation', 'wptutorial'));
}Musimy podpiąć się pod hak init, który WordPress uznał, że jest dobrym „punktem kontrolnym” do rejestrowania lokalizacji menu. Wewnątrz naszej funkcji wywołujemy, register_nav_menu()która przyjmuje minimum dwóch parametrów; uchwyt menu, który jest unikalnym ślimakiem, którego będziesz używać jako identyfikatora podczas renderowania menu, oraz widoczną nazwę menu, która pojawia się w panelu administracyjnym. Zwróć uwagę, że umieściłem nazwę __()w środku, aby można ją było przetłumaczyć, jak dowiedzieliśmy się w poprzednim kroku.
Jeśli odświeżysz panel administracyjny, powinieneś zobaczyć nową pozycję podmenu pod „Wygląd”; „Menu”. Gratulacje, Twój motyw obsługuje teraz tworzenie menu!
Jeśli nie jesteś zaznajomiony z tworzeniem i administrowaniem menu w WordPressie, jest to dobry przewodnik dla Ciebie.
Utwórz nowe menu w „Wygląd > Menu” – może zawierać wszystko, co chcesz, właśnie dodałem fałszywe posty, które stworzyłem w moim WordPressie.
Po zapisaniu pierwszego menu pod obszarem edycji menu pojawi się nowa sekcja o nazwie „Ustawienia menu”, która pozwala wybrać lokalizację tego menu. Powinna zawierać jedną dostępną lokalizację, którą stworzyliśmy; "Główna nawigacja".
Zaznacz pole „Główna nawigacja” i naciśnij Zapisz. Teraz nowo utworzone menu jest połączone z lokalizacją i będzie wyświetlane automatycznie w dowolnym miejscu, w którym dodasz kod, aby wyświetlić tę lokalizację menu. Zróbmy to teraz.
Otwórz header.phpi gdziekolwiek chcesz, aby było wyjście menu, dodaj wywołanie do wp_nav_menu(). Ta funkcja akceptuje całą masę argumentów w tablicy, aby naprawdę dostosować wyjście menu. Co najważniejsze, potrzebujemy parametru, który mówi mu, aby pobrać lokalizację „Główna nawigacja”. W tym celu dodajemy argument „ theme_location” i ustawiamy go w uchwycie naszego menu; ‘ main-nav‘.
Dodałem wyjście menu zaraz po rozpoczęciu <body>tagu, ale jeśli uzupełniłeś swoje szablony za pomocą HTML, sam zdecyduj, gdzie ma się pojawiać menu.
Odśwież swój frontend i powinieneś zobaczyć menu, które utworzyłeś w admin, wyprowadzone jako nieuporządkowana lista na początku szablonu.
Jak zwykle, zachęcam do zagłębienia się w parametry wp_nav_menuw dokumentacji WordPress Codex i pobaw się z tym, jak chcesz, aby wynik był. Na przykład: możesz sprawić, że nie będzie wyświetlany na liście HTML, możesz ograniczyć pozycje menu tylko do określonych poziomów (aby zapobiec podmenu) i nie tylko.
Jeśli jesteś ciekawy części dotyczącej stylizacji; spójrz na klasy, które WordPress automatycznie dodaje do każdej pozycji menu. Będziesz mógł łatwo dodawać style dla aktywnego elementu menu, elementów, które mają elementy podrzędne, elementu nadrzędnego aktywnego elementu podrzędnego itp.
Uwaga: każdy użytkownik motywu może zawsze utworzyć wiele menu i wybrać wyświetlanie ich poza zarejestrowanymi lokalizacjami motywu za pomocą widżetów. Jednak, aby to zrobić, twój motyw musi zdefiniować kilka obszarów widżetów! Zróbmy to dalej.
Obszary widżetów
Obszary widżetów działają bardzo podobnie w przypadku menu. Rejestrujesz lokalizację (w przypadku widżetów definiujesz obszar, w którym użytkownik motywu może umieszczać widżety), a gdziekolwiek chcesz, aby lokalizacja/obszar pojawiał się w szablonach, dodajesz fragment kodu, który odnosi się do identyfikatora uchwytu podanego w Twoim kod rejestracyjny.
Zdefiniujmy obszar widżetu na naszym pasku bocznym i jeden w stopce. Często motywy zawierają wiele obszarów widżetów w stopce, aby ładnie podzielić je na kolumny, ale w tym samouczku po prostu dodamy jeden do stopki.
Obszary widżetów są określane jako „paski boczne” w kodzie WordPress, ale nie dotyczy to wyłącznie prawego paska bocznego w dawnych czasach na stronach internetowych. Wygląda na to, że jakaś starsza nazwa po prostu utknęła z czasów, gdy witryny internetowe zwykle miały tylko obszar widżetów na pasku bocznym. Nie myśl, że „paski boczne” mogą odnosić się tylko do rzeczywistych pasków bocznych.
Zarejestruj obszary widżetów
Zaczynamy od zarejestrowania dwóch obszarów widżetów w naszym functions.php. Używamy tej funkcji register_sidebardo rejestrowania naszych pasków bocznych, podpiętych do widgets_inithaka, który WordPress zdefiniował jako najlepszy hak do rejestrowania obszarów widżetów (i niestandardowych widżetów).
Funkcja register_sidebar()przyjmuje sporo argumentów, jako minimum potrzebujesz argumentów ‘id’ i ‘name’. Dostępne są parametry umożliwiające zdefiniowanie sposobu wyświetlania opakowań HTML widżetów.
Odśwież panel administracyjny. Powinieneś teraz zobaczyć pozycję menu „Widżety” w sekcji „Wygląd”. W panelu administracyjnym „Widżety” możesz zobaczyć dwa dostępne obszary widżetów w prawym obszarze; czyli nasz „Obszar widżetów paska bocznego” i „Obszar widżetów stopki”.
Umieść losowy widżet w naszym obszarze widżetów paska bocznego lub stopki, aby zobaczyć go w akcji.
Wyprowadzanie obszaru widżetów w szablonie
Ostatnią częścią jest wyprowadzanie obszarów widżetów do naszych szablonów. W tym celu korzystamy z funkcji dynamic_sidebar()i udostępniamy uchwyt jako parametr. Otwórz sidebar.phpi dodaj następujące elementy wewnątrz <aside>tagów:
Zauważ, że owinąłem go wewnątrz nieuporządkowanego znacznika listy (<ul>). Dzieje się tak, ponieważ domyślnie dynamic_sidebarwypisuje wszystkie widżety opakowane w <li>elementy. Zachęcam do zabawy z parametrami wyjściowymi, jeśli nie lubisz widżetów będących listą.
Jeśli chodzi o stopkę, dodajemy ją na samym początku footer.php, zawiniętą w <footer>tag (jeśli chcesz).
To tyle, jeśli chodzi o menu i obszary widżetów. Twój motyw ma teraz możliwość tworzenia nowego menu i używania widżetu do wyświetlania go na pasku bocznym lub w stopce. W następnej lekcji z tej serii samouczków stworzymy więcej szablonów do naszego motywu.