widżety sprawiają, że WordPress jest naprawdę elastyczny. Dodając obszary widżetów do motywów, pozwalasz użytkownikom wstawiać własną niestandardową zawartość bez konieczności pisania linii kodu.
są najczęściej używane w paskach bocznych i stopkach, gdzie są często używane do przechowywania widżetów, takich jak widżet wyszukiwania, widżet ostatnich postów, a może niestandardowe menu. Ale jeśli dodasz je do swojej strony i szablonów postów, uczynisz je jeszcze potężniejszymi.
możesz dodać obszary widżetów do dowolnego pliku szablonu. Lubię dodawać wiele z nich do moich tematów, w miejscach takich jak nagłówek, przed i po głównej nawigacji oraz przed i po treści. Możesz dodać je do części szablonu (takiej jak nagłówek), która jest używana przez każdą stronę w witrynie, lub możesz być bardziej szczegółowy i po prostu dodać je do plików szablonów dla danego typu treści.
w tym poście pokażę Ci, jak to zrobić. Stworzę motyw potomny domyślnego motywu Twenty Seventeen, a następnie w ramach tego motywu potomnego stworzę kilka nowych plików szablonów: niestandardowy plik szablonu strony, plik archiwum kategorii i pojedynczy plik szablonu posta.
w każdym z nich dodam obszar widżetu specyficzny dla tego typu treści, więc użytkownicy będą go widzieć tylko wtedy, gdy przeglądają stronę za pomocą szablonu strony, archiwum kategorii lub pojedynczego postu, odpowiednio.
więc zaczynajmy!
Uwaga: Dodałem kod do tego posta do GitHub, więc możesz go sprawdzić, jeśli pracujesz wraz z tym samouczkiem.
Konfigurowanie motywu potomnego
zamierzam używać motywu potomnego twenty seventeen: jeśli pracujesz z własnym motywem, możesz go edytować bezpośrednio, zamiast tworzyć motyw potomny. Ale jeśli używasz motywu innej firmy, musisz utworzyć motyw potomny. Dzieje się tak dlatego, że po zaktualizowaniu motywu wszelkie zmiany w nim wprowadzone zostaną utracone.
więc w folderze wp-content/themes utwórz nowy folder z nazwą Twojego motywu. Nazywam moje wpmu-template-widgets. Wewnątrz tego Dodaj styl.plik css i dodaj do niego:
pamiętaj, że jeśli pracujesz z własnym motywem, możesz pominąć ten krok. A jeśli używasz innego motywu nadrzędnego, musisz edytować arkusz stylów, aby to odzwierciedlić. Jeśli nie masz pewności, sprawdź nasz post na temat tworzenia motywów potomnych.
rejestrowanie obszarów widżetów
zanim będziemy mogli dodać obszary widżetów do naszych plików szablonów, musimy je zarejestrować w pliku funkcji motywu. Otwórz plik funkcji jeśli motyw już go posiada lub jeśli jest to nowy motyw potomny, Utwórz plik o nazwie funkcje.php.
Zacznijmy od dodania pustej funkcji do rejestracji widżetów i podłączenia jej do Hooka widgets_init. Dodaj to do pliku funkcji:
w ramach tej funkcji zarejestrujemy cztery obszary widżetów: po jednym z pojedynczych szablonów post i category archive oraz dwa dla niestandardowego szablonu strony.
zacznij od zarejestrowania pierwszego widżetu:
to używa funkcji register_sidebar(), z tablicą parametrów w następujący sposób:
- nazwa obszaru widżetu, która pojawi się na ekranie panelu administracyjnego widżetów i panelu dostosowywania. Tłumaczyłem to.
- unikalny identyfikator dla obszaru widżetu.
- znaczniki przed widżetem, który używa symboli zastępczych do internacjonalizacji.
- znaczniki po widżecie.
- znaczniki przed i po tytule widżetu, które są zamknięte w elemencie
h3.
więc to pierwszy. Teraz, nadal wewnątrz funkcji, dodaj pozostałe trzy:
więc mamy teraz cztery widżety:
- jeden po treści na pojedynczych postach.
- jeden przed treścią w archiwum kategorii.
- jeden przed i jeden po treści na naszym szablonie strony.
jeśli chcesz przenieść obszary widgetu (np. umieszczając archiwum kategorii jeden po treści lub pojedynczy post jeden przed treścią), powinieneś odpowiednio zmienić ich nazwę. Jest to tak, że wiesz, co się dzieje, gdy przyjdziesz do edycji kodu w przyszłości, a użytkownicy wiedzą, gdzie obszary widżetów będą wyświetlane, gdy dodadzą widżety do nich za pośrednictwem ekranu administratora widżetów. Pamiętaj, że jeśli to zmienisz, musisz umieścić kod, aby wyprowadzić widżety we właściwym miejscu w plikach szablonów w następnym kroku, co może być inne niż miejsce, w którym umieszczam moje.
teraz, jeśli otworzysz stronę administratora widżetów, zobaczysz obszary widżetów, gotowe na widżety:
ale jeśli dodasz widżety do nowych obszarów widżetów, nie pojawią się one w interfejsie witryny. Nadal muszą być zakodowane w plikach szablonów.
dodawanie obszarów widżetów do plików szablonów
teraz dodajemy kod, aby wyświetlić obszary widżetów. Jeśli pracujesz z własnym motywem, możesz po prostu edytować istniejące pliki szablonów motywów. Jeśli pracujesz z motywem potomnym (lub Twój motyw nie ma jeszcze odpowiednich plików szablonów), musisz utworzyć nowe pliki.
zacznijmy od widgetyzowanego pliku szablonu strony, ponieważ twój motyw i tak tego nie będzie.
w folderze motywów utwórz nowy plik. Nazywam moją stronę_widgetized.php. Otwórz ten plik i dodaj do niego:
to mówi WordPress, że jest to niestandardowy szablon strony. Jeśli chcesz dowiedzieć się o nich więcej, zapoznaj się z naszym szczegółowym przewodnikiem.
uwaga: nie używaj page-widgetized jako nazwy pliku. Dzieje się tak dlatego, że strona – jest zastrzeżonym przyrostkiem w WordPress. Użyj podkreślnika zamiast myślnika lub po prostu unikaj używania strony na początku, jeśli wolisz.
teraz poniżej komentowanego tekstu skopiuj wszystko ze strony motywu (lub motywu nadrzędnego).plik php. Alternatywą jest zrobienie kopii pliku i dodanie komentowanego tekstu, to zależy od Ciebie.
teraz będziesz mógł wybrać ten szablon podczas edycji strony w Twojej witrynie:
wybierz go dla jednej ze swoich stron, aby móc wypróbować widżety. Oto moja strona:
nie wygląda to teraz bardzo ekscytująco, ponieważ nie dodałem obszarów widżetów do pliku szablonu. Zróbmy to.
w pliku szablonu dodaj ten kod bezpośrednio nad zawartością strony, dla obszaru widżetu powyżej zawartości:
to sprawdza, czy obszar widżetu został wypełniony, używając unikalnego identyfikatora, który utworzono dla obszaru widżetu podczas rejestracji go w pliku funkcji. Jeśli został wypełniony, wyświetla zawartość obszaru widżetu.
teraz Dodaj obszar widżetu poniżej zawartości. Po treści (i wewnątrz dowolnego elementu) Dodaj to:
Zapisz plik szablonu strony.
oto Pełny kod mojego pliku szablonu strony, więc możesz zobaczyć, gdzie obszar widżetu przed i po pętli:
teraz, aby go przetestować. Dodałem widżet do każdego z nowych obszarów widżetów:
A oto jak wyglądają na mojej stronie:
więc to jest niestandardowy szablon strony skonfigurowany. Teraz musisz edytować pozostałe dwa pliki szablonów stron (lub utworzyć je w razie potrzeby). Wykonaj następujące czynności:
- jeśli pracujesz z motywem podrzędnym, Utwórz plik o nazwie Kategoria.php. Skopiuj zawartość kategorii.plik php z motywu nadrzędnego (jeśli go posiada)lub archiwum.plik php (lub indeks.php jeśli tego nie ma).
- jeśli nie pracujesz z motywem podrzędnym, ale twój motyw nie ma kategorii.plik php, zrób go kopiując archiwum.plik php (lub jeśli go nie masz, indeks.pliku php).
- Dodaj obszar widżetu nad zawartością w pliku archiwum kategorii-ponownie, bezpośrednio przed pętlą.
oto kod dla obszaru widżetu:
teraz powtórz to dla pojedynczego szablonu:
- Utwórz pojedynczy post.plik php, jeśli twój motyw go nie ma (lub używasz motywu podrzędnego). Skopiuj zawartość z pojedynczego postu motywu nadrzędnego.plik php do niego, lub z następnego pliku szablonu w hierarchii szablonów (pojedynczy.php, liczba pojedyncza.php lub index.php).
- ponownie Dodaj obszar widżetu – tym razem po treści.
oto kod:
teraz, jeśli dodasz widżety, pojawią się one na twojej stronie. Oto mój pokazujący listę ostatnich postów po jednym poście:
dodawanie obszarów widżetów do szablonów zapewnia elastyczność
obszary widżetów umożliwiają użytkownikom szablonu dodawanie dodatkowej zawartości bez konieczności pisania kodu. Ale nie są tylko dla paska bocznego. Dodawanie dodatkowych obszarów widżetów do plików szablonów zapewnia ukierunkowane obszary w witrynie, do których można dodawać widżety, z dokładną kontrolą nad tym, gdzie będą się pojawiać.
możesz wziąć te przykłady dalej, jeśli chcesz, dodając obszary widżetów do wszystkich plików, a nawet używając różnych wersji paska bocznego.plik php dla różnych typów treści. Świat jest twoją ostrygą!