Dodawanie niestandardowego widżetu do dowolnej strony, posta lub szablonu w WordPress

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ą one najczęściej w paskach bocznych i stopkach, gdzie są często używane do przechowywania widżetów, takich jak widżet wyszukiwania, widżet najnowsze posty, 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

Będę używał motywu child of the 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 Twoim wp-content / themes folder, utwórz nowy folder z nazwą Twojego motywu. Nazywam swoje wpmu-template-widgets. W tym, Dodaj styl.css plik i dodaj to 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ż istnieje lub jeśli jest to nowy motyw potomny, Utwórz plik o nazwie funkcje.php.

Zacznijmy od dodania funkcji empty do rejestracji widżetów i podłączenia jej do widgets_init hak. 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 wykorzystuje register_sidebar() funkcji, z tablicą parametrów w następujący sposób:

• Nazwa obszaru widżetu, który pojawi się na ekranie panelu administracyjnego widżetów i panelu dostosowania. Tłumaczyłem to.
• Unikalny identyfikator dla obszaru widgetu.
• Znaczniki przed widżetem, które wykorzystują symbole zastępcze do internacjonalizacji.
• Znaczniki po widżecie.
• Znaczników przed i po tytule widżetu, który jest zamknięty w h3 element.

Więc to jest 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 widgetized.

Jeśli chcesz przenieść obszary widgetu (np. umieszczając archiwum kategorii jeden po treści lub pojedynczy post jeden przed treścią), powinieneś 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 do wyjścia obszarów widżetu. 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 motywu utwórz nowy plik. Nazywam swoje page_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 strona-widgetized jako nazwę 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 strona na początku, jeśli wolisz.

Teraz poniżej komentowanego tekstu skopiuj wszystko z motywu (lub motywu nadrzędnego) strona.php plik. 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 swojej 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 treści:

To sprawdza, czy obszar widżetu został wypełniony przy użyciu unikalnego identyfikatora, który został utworzony 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 pliku szablonu mojej strony, dzięki czemu możesz zobaczyć, gdzie widżet znajduje się przed i po pętli:

Teraz testujemy. 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 potomnym, Utwórz plik o nazwie Kategoria.php. Skopiuj zawartość Kategoria.php Plik z motywu nadrzędnego (jeśli go posiada) lub archiwum.php plik (lub indeks.php jeśli tego nie ma).
• Jeśli nie pracujesz z motywem potomnym, ale twój motyw nie ma Kategoria.php plik, zrób go kopiując archiwum.php pliku (lub jeśli nie masz takiego, indeks.php plik).
• 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 single-post.php plik, jeśli twój motyw go nie ma (lub używasz motywu podrzędnego). Skopiuj zawartość z motywu nadrzędnego single-post.php plik do niego, lub z następnego pliku szablonu w hierarchii szablonów (singiel.php, pojedyncza.php lub indeks.php).
• Ponownie Dodaj obszar widżetu – tym razem po treści.

Oto kod:

Teraz, jeśli dodasz widżety, pojawią się one w Twojej witrynie. Oto mój pokazujący listę ostatnich postów po jednym poście:

Dodawanie obszarów widżetów do szablonów daje 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 pasek boczny.php plik dla różnych typów zawartości. Świat jest twoją ostrygą!

Tagi:

• widgety