[]
Czy kiedykolwiek chciałeś stworzyć niestandardowy widget dla swojej witryny WordPress? Podczas gdy WordPress zawiera wbudowany widżet tekstowy, którego można użyć do wyświetlania HTML wraz z osadzonym CSS i JavaScript, jeśli chcesz zrobić coś więcej niż widżet tekstowy po prostu go nie wyciąć.
Co zrobić, jeśli chcesz pobrać trochę treści z bazy danych witryny i wyświetlić ją w widżecie? Rozwiązaniem jest kodowanie niestandardowego widżetu paska bocznego. Chociaż może to brzmieć jak trudne zadanie, tak długo, jak masz podstawowe umiejętności PHP, jest to w zasięgu ręki.
Postępuj zgodnie z tym samouczkiem, a dowiesz się, jak utworzyć dwa różne widżety:
- Prosty widżet, który wyświetla tytuł widżetu, tytuł witryny i slogan witryny.
- Nieco bardziej złożony widżet, który wyświetla listę wszystkich kategorii posortowanych Alfabetycznie i podzielonych na dwie kolumny.
Gotowy, aby nauczyć się podstaw niestandardowego tworzenia widżetów WordPress? Przejdźmy do rzeczy.:
Będziesz potrzebować trzech rzeczy, aby śledzić ten samouczek:
- Środowisko programistyczne WordPress
- Podstawowe umiejętności programowania PHP
- Podstawowe doświadczenie programistyczne WordPress
Wystarczy jeden błędny przecinek lub brak klamry, aby zawiesić witrynę WordPress, a jeśli jesteś stosunkowo nowy w programowaniu, Twoja witryna może być wyłączona przez kilka minut lub dłużej podczas próby zlokalizowania naruszającego kod. Z tego powodu powinieneś koniecznie uruchomić widżet za pomocą lokalnego środowiska programistycznego, zanim spróbujesz użyć go na aktywnej stronie internetowej.
Pisaliśmy o wielu lokalnych środowiskach programistycznych w przeszłości. Osobiście używam XAMPP, ale każdy serwer localhost zrobi. Wybierz jedną i uruchom ją.
Jeśli nigdy nie napisałeś linii PHP lub zakodowałeś podstawową wtyczkę WordPress, ten samouczek może być nieco poza twoim zasięgiem. Jednak dobrą wiadomością jest to, że możesz dowiedzieć się wszystkiego, co musisz wiedzieć, albo nieformalnie, pracując przez naszą serię na temat rozwoju WordPress dla początkujących, albo formalnie, zapisując się na nadchodzący kurs w Akademii.
Jeśli spełnisz te trzy podstawowe wymagania, jesteś gotowy, aby rozpocząć zawieszanie kodu. Bierzmy się do roboty.
Tworzysz nowy widget WordPress, dodając kod do jednego z dwóch miejsc:
- Niestandardowa wtyczka, której powinieneś użyć, jeśli chcesz użyć widżetu z więcej niż jednym motywem lub na więcej niż jednej stronie internetowej.
- Na funkcje.php plik aktywnego motywu-który powinien być motywem potomnym lub całkowicie niestandardowym.
Dla przykładu, możesz znaleźć wypełniony kod dla prostego widżetu paska bocznego opisanego w tym samouczku dostępnym na GitHub. Jeśli nie jesteś pewien, gdzie napisać kod, lub po prostu chcesz zobaczyć cały kod na raz, Pobierz kopię tej wtyczki.
Widżety WordPress są tworzone z odrobiną programowania obiektowego. Klasa WP_Widget jest rozszerzona o tworzenie każdego widżetu. Klasa WP_Widget zawiera blisko 20 różnych metod. Jednak w przypadku podstawowych widżetów musisz użyć tylko czterech z nich:
- __construct (): rejestruje podstawowe informacje o widgecie.
- widget (): zawiera wyjście widgetu – to, co faktycznie widzisz na swoim interfejs witryny po dodaniu widżetu do obszaru widżetu.
- form (): definiuje ustawienia widżetu wyświetlane w obszarze administracyjnym WordPress.
- update (): aktualizuje ustawienia widżetu, gdy nowe ustawienia są zapisywane w obszarze administracyjnym WordPress.
Oprócz tych czterech metod, funkcja add_action jest używana do powiązania niestandardowej funkcji widżetu z Hookiem widgets_init.
Przykład # 1: wyświetl Tytuł widżetu, Tytuł witryny i slogan
Pierwszą rzeczą do zrobienia jest rozszerzenie klasy WP_Widget w ten sposób:
W tym przypadku nazwa nowej funkcji widżetu to jpen_Example_Widget. Zauważ, że jpen to po prostu prefiks, który dodaję do wszystkich funkcji niestandardowych, aby uniknąć konfliktów z dowolnymi funkcjami innych wtyczek, motywów lub rdzenia WordPress. Możesz użyć dowolnej nazwy odpowiedniej dla widżetu i dodać prefiks, jeśli chcesz przestrzegać najlepszych praktyk.
Będziemy pisać funkcje za pomocą czterech metod wymienionych na powyższej liście i zagnieżdżać wszystkie cztery wewnątrz naszej funkcji widżetu. Następnie, w ostatnim kroku, napiszemy funkcję rejestracji widżetu.
Rozpocznijmy proces pisania metody od metody _ _ construct ().
WP_Widget:: _ _ construct()
Metoda _ _ construct() służy do przypisania widżetowi id, tytułu, nazwy klasy i opisu. Oto jak wygląda funkcja konstruktora, aby utworzyć nasz pierwszy przykładowy widżet:
Aby zrozumieć tę funkcję, zacznij od linii, która zaczyna się od parent:: _ _ construct (). Chodzi o to, że ta linia tworzy nowy widget z id ‘example-widget’, nazwą ‘Example Widget’ i dwoma opcjami widgetu: nazwą klasy i krótkim opisem.
Cały ten kod trafia do jpen_Example_Widget i służy do rejestracji widżetu za pomocą WordPress, a następnie wyświetla tytuł i opis widżetu w obszarze administracyjnym.
WP_Widget:: widget()
Następnym krokiem jest użycie metody widget () do zdefiniowania wyjścia widżetu, które będzie wyświetlane w interfejsie witryny.
Funkcja widget() zawiera kod generujący rzeczywistą zawartość wyświetlaną przez widget. Zawartość widget () może być prawie wszystko, ale ogólnie będzie zawierać niektóre PHP. W przeciwnym razie wystarczy użyć widżetu tekstowego wbudowanego w WordPress.
W naszym przypadku damy użytkownikom możliwość wyświetlania niestandardowego tytułu widżetu. Musimy więc pobrać ten tytuł, a następnie użyć get_bloginfo (), aby wyświetlić tytuł bloga i slogin. Oto kod, którego użyjemy, aby to zrobić:
W tej funkcji dzieje się kilka rzeczy, które będziesz chciał zrozumieć:
- $args []: ta zmienna wczytuje tablicę argumentów, które mogą być użyte podczas budowania wyjścia widżetu. Wartości zawarte w $args są ustawiane przez aktywny motyw podczas rejestracji regionu paska bocznego.
- $instance []: ta zmienna ładuje wartości powiązane z bieżącą instancją widżetu. Jeśli dwukrotnie dodałeś widżet do paska bocznego, każda instancja $będzie zawierać wartości specyficzne dla każdej instancji widżetu.
- filtr widget_title: zwraca tytuł bieżącej instancji widgetu.
- get_bloginfo (): funkcja, która może być używana do zwracania wszelkiego rodzaju metadanych o witrynie WordPress, w tym nazwy witryny i sloganu.
Po zdefiniowaniu kilku wariables korzystając z informacji z powyższej listy, kod następnie tworzy rzeczywisty wynik, który składa się z informacji z $args, tytułu oraz nazwy witryny i sloganu.
Zauważ, że praktycznie każdy widget powinien zawierać argumenty’ before_widget’, ‘after_widget’, ‘before_title’ i ‘after_title’. Są one niezbędne, aby każdy widżet był zagnieżdżony wewnątrz tagów HTML specyficznych dla motywu.
Cała Metoda widget () powinna być zagnieżdżona wewnątrz jpen_Example_Widget.
WP_Widget:: form()
Metoda form () służy do dodawania pól ustawień do widżetu, które będą wyświetlane w obszarze administracyjnym WordPress.
Widżety, które zawierają wiele opcji, będą dość złożone w tym dziale. Jednak w przypadku naszego przykładowego widżetu, wszystko, co chcemy zrobić, to pozwolić użytkownikom na przypisanie widżetowi niestandardowego tytułu. Wszystko jest proste.
Funkcja ta zwraca bieżące wartości tej konkretnej instancji widżetu przez wywołanie parametru $ instance. Następnie sprawdzamy informacje o bieżącej instancji, aby sprawdzić, czy tytuł jest pusty. Jeśli tak nie jest, wyświetlamy bieżący tytuł.
Następnie etykiety i elementy wejściowe zagnieżdżone wewnątrz znaczników akapitu tworzą oznaczone pole wejściowe, aby użytkownik mógł dodać nowy tytuł.
Po dodaniu tego fragmentu kodu do jpen_Example_Widget ustawienia widżetu będą wyglądać następująco:
WP_Widget:: update()
Następnym krokiem jest aktualizacja informacji w bazie danych WordPress za pomocą metody update ().
Metoda ta przyjmuje dwa parametry: $ new_instance oraz $old_instance. Pierwsza zawiera wartości dodane do formularza ustawień widżetu. Drugi zawiera istniejące ustawienia-jeśli istnieją.
Metoda update () powinna odpowiednio zweryfikować nowe ustawienia, a następnie przypisać je do zmiennej $ instance i zwrócić tę zaktualizowaną zmienną. Jeśli brzmi to trochę skomplikowanie, poniższy przykład powinien wyjaśnić pewne rzeczy.
W przypadku naszego przykładowego widżetu, wszystko, co robimy, to aktualizacja tytułu. Więc wszystko, co musimy zrobić, to:
-
- Pobierz tytuł z nowej instancji,
- Usuń wszystkie znaczniki HTML lub PHP, które mogły zostać dodane do tytułu widgetu,
- Przypisać ten tytuł instancji, oraz
- Zwraca zaktualizowaną instancję.
Zarejestruj widżet
Ostatnim krokiem w procesie jest zarejestrowanie widżetu za pomocą funkcji add_action i Hooka widget_init. Oto jak to zrobić:
Najpierw tworzymy funkcję rejestracji widżetu i używamy nazwy obiektu widżetu do jego identyfikacji. Następnie powiązujemy funkcję rejestracji z WordPress za pomocą Hooka widgets_init i nazwy naszej funkcji rejestracji.
Ten bit kodu jest dodawany Na Zewnątrz of jpen_Example_Widget. Gdy zostanie wywołany, wyciągnie widżet z odpowiednią nazwą, w tym przypadku jpen_Example_Widget i uruchomi cały kod zawarty w widżecie.
Dzięki temu ostatniemu bitowi kodu możemy dodać nasz widżet do paska bocznego, skonfigurować go według naszych upodobań i wyświetlić nasz tytuł witryny i slogan na pasku bocznym, w ten sposób:
Przykład # 2: Wyświetla kategorie w dwóch kolumnach</h2>
Jakiś czas temu napisałem tutorial wyjaśniający, w jaki sposób można przekształcić dowolny szablon HTML5 w motyw WordPress. Jednak to, czego nie zrobiłem w tym samouczku, to odtworzenie dowolnego widżetu paska bocznego zawartego w szablonie. Nasz drugi przykładowy widżet będzie widżetem bocznym listy kategorii z szablonu HTML5 na blogu przez Start Bootstrap.
Oto jak wygląda widżet paska bocznego w oryginalnym szablonie HTML5:
Odtworzenie tego widżetu wymaga nieco więcej kodu niż nasz prosty przykładowy widżet, ale w rzeczywistości nie jest to zbyt skomplikowane. W rzeczywistości funkcje _construct(), form() I update () są zasadniczo niezmienione. Jedyną rzeczywistą różnicą między tym widżetem a naszym poprzednim przykładem jest to, że metoda wyjściowa widget() zawiera znacznie więcej kodu.
Powodem tego jest to, że aby utworzyć zawartość widżetu, musimy wygenerować listę wszystkich kategorii, posortować listę w porządku alfabetycznym, a następnie uporządkować kategorie w dwie kolumny. Chociaż istnieje wiele sposobów, aby to osiągnąć, oto jeden sposób, aby wykonać zadanie.
Na początek stworzyłem funkcję widget() :
Następnie stworzyłem kilka zmiennych:
Zmienne tytułu i kategorii są dość oczywiste. Posiadają tytuł widżetu i listę wszystkich kategorii.
Zmienna $cat_count będzie używana do śledzenia całkowitej liczby kategorii, abyśmy mogli posortować je na dwie listy. Dwie zmienne kolumnowe, $cat_col_one i $cat_col_two zostaną użyte do podziału kategorii na dwie kolumny.
Następnie pojawia się funkcja iteracyjna we wszystkich kategoriach i dzieli je na dwie kolumny.
Dla każdej kategorii tworzona jest zmienna $cat_count i tworzony jest $category_link. Następnie, w oparciu o bieżącą wartość $ cat_count – niezależnie od tego, czy jest parzysta, czy nieparzysta-zmienna $category_variable jest dodawana do zmiennej column one lub column two.
Ponadto kod ten zagnieżdża każdą kategorię w elemencie listy z klasą “list-unstyled”, aby pasowała do klas I HTML używanych w oryginalnym szablonie.
Na koniec musimy wydrukować $cat_col_one i $cat_col_two, aby wyświetlić listę kategorii:
Ten kod iteracje przez każdą ze zmiennych kolumny kategorii i wypisuje każdą listę kategorii do div. Klasy i struktura HTML przypisane do widżetu odzwierciedlają klasy i strukturę zawartą w oryginalnym szablonie, aby upewnić się, że styl zawarty w oryginalnych zasobach CSS szablonu jest prawidłowo zastosowany do nowego widżetu.
Oto jak wyglądał widżet paska bocznego po zakończeniu. Jeśli spojrzysz wstecz na oryginalną wersję szablonu na powyższym obrazku, zobaczysz, że jest to idealne dopasowanie!
Jeśli chcesz zobaczyć pełny kod tworzący ten widżet paska bocznego, poszukaj instancji Jpen_category_list_widget klasy WP_Widget w funkcje.php plik Simple Blog Theme na GitHub.
Tworzenie niestandardowego widżetu paska bocznego wymaga pracy z dość złożoną klasą WP_Widget. Choć może się to wydawać nieco zniechęcające, dobre wiadomością jest to, że możesz sprowadzić proces do pięciu kroków:
-
-
- Użyj _ _ construct (), aby zdefiniować podstawowe informacje o widżecie.
- Użyj widget (), aby zdefiniować wyjście widgetu.
- Użyj form (), aby utworzyć menu ustawień administratora.
- Użyj update (), aby zaktualizować ustawienia widżetu.
- Użyj add_action (), aby powiązać obiekt widżetu z odpowiednim Hookiem.
-
Podczas gdy tworzenie niestandardowego widżetu może być nieco skomplikowane, istnieje stosunkowo wąska wiedza, którą musisz opanować, aby utworzyć potężne niestandardowe widżety. Owinąć głowę wokół tych pięciu funkcji, a będziesz w stanie włączyć prawie każdy pomysł można wymarzyć w widget WordPress.
Tagi:
