Samouczek: Utwórz widżet mikrodanych dla swojej firmy w WordPress

W tym samouczku dowiemy się, jak utworzyć niestandardowy widżet, który wyświetla informacje o Twojej firmie, takie jak oficjalna nazwa, adres, numer telefonu i adres e-mail. Pójdziemy jednak o krok dalej, wysyłając go za pomocą mikrodanych lub znaczników schematu, które umożliwią wyszukiwarkom zrozumienie treści.

Widżety to dynamiczne bloki, które można umieścić w dostępnych obszarach motywu. Zwykle motyw zawiera co najmniej jeden pasek boczny i co najmniej jeden obszar w stopce. Umieszczanie informacji o firmie jako widżetu w stopce jest powszechne i dość inteligentne – ponieważ stopka pojawia się na wszystkich stronach w Twojej witrynie.

Mikrodane to dodatkowe atrybuty HTML, które wyjaśniają, co zawiera konkretny znacznik HTML, aby maszyna mogła zrozumieć, czym one są (np. nazwa firmy, numer telefonu, adres firmy, firmowy adres e-mail itp.). Umożliwia to wyszukiwarkom takim jak Google wyodrębnianie informacji o Twojej firmie z kodu HTML.

Co stworzymy

Nasz widget wygeneruje informacje za pomocą schematu Microdata LocalBusiness, który jest idealny dla organizacji lub firmy. Od Ciebie zależy, jakie właściwości chcesz wyprowadzić, po prostu kliknij powyższy link, aby przeczytać wszystkie możliwe właściwości w LocalBusiness (w tym odziedziczone). Twoja firma lub kraj mogą preferować inny rodzaj informacji.

Widżet tego samouczka wyświetli następujące opcjonalne informacje:

• Nazwa firmy (właściwość mikrodanych: legalName)
• Numer identyfikacyjny VAT lub numer organizacji (właściwość mikrodanych: vatID)
• Adres pocztowy (znacznik Microdata: PostalAddressz właściwościami dla streetAddress, postalCode, i addressLocality)
• Adres e-mail firmy (właściwość Microdata: email)
• Numer telefonu (właściwość mikrodanych: telephone)

Ten samouczek nie poprowadzi Cię przez stylizację widżetu, ponieważ powinno to być całkiem proste. We frontendzie nasz widget będzie wyglądał jak zwykły widget tekstowy. Ale oczywiście pod maską ma znaczniki schematu, które pomagają Google.

Podstawy tworzenia niestandardowego widżetu

Możesz umieścić swój kod w motywie functions.phplub utworzyć niestandardową wtyczkę. Pamiętaj tylko, że jeśli trzymasz go we wtyczce, utracisz widżet podczas dezaktywacji wtyczki; podobnie trzymanie go w motywie spowoduje utratę widżetu, jeśli przełączysz się na inny motyw. W tym przykładzie dodam kod w motywie functions.php.

Tworzenie widgetu odbywa się za pomocą zorientowanego obiektowo kodu PHP. Piszesz klasę PHP, która rozszerza klasę widżetów WordPressa i inicjujesz ją, wywołując register_widget()i podając nazwę swojej klasy. W tym samouczku nazwałem moją klasę widżetów LocalBusiness.

Zacznijmy od wywołania register_widget()wewnątrz funkcji podpiętej do akcji widgets_init.

add_action('widgets_init', function() {
    register_widget('LocalBusiness');
});

Przyjrzyjmy się szybko szkieletowi niestandardowej klasy widżetów:

class LocalBusiness extends WP_Widget {
 
    // Initialize your widget in the class constructor
    public function __construct() { }
 
    // Responsible for outputting the widget in frontend
    public function widget($args, $instance) { }
 
    // Responsible for outputting the widget settings in admin
    public function form($instance) { }
 
    // Responsible for saving settings in admin
    public function update($new_instance, $old_instance) { }
}

Jak widać z góry, będziesz potrzebować czterech funkcji w swojej klasie. Przejrzyjmy kolejno każdą funkcję i wypełnijmy je.

Tworzenie widżetu mikrodanych LocalBusiness

Najbardziej logicznym miejscem do rozpoczęcia jest konstruktor, który odpowiada za ustawienie widżetu.

Funkcja __construct()

Wewnątrz konstruktora musisz ustawić kilka zmiennych, takich jak nazwa widżetu, i wywołać funkcję konstruktora rodzica (klasa rodzica to ta, którą rozszerzasz; WP_Widget). Przeczytaj więcej o możliwych opcjach w konstruktorze tutaj. Dostarczę podstawowy identyfikator, tytuł i opis, jak na przykład:

Możesz zrobić więcej w __constructmetodzie, na przykład kolejkować skrypty lub zdefiniować więcej ustawień widżetów. Ale w większości przypadków powyższe jest wystarczające.

Funkcja form()

Następnym krokiem jest zbudowanie wszystkich ustawień i danych wejściowych, które Twój widżet akceptuje w admin. Do wyprowadzania ustawień do administratora Widget używamy funkcji, form()która daje jeden parametr; tablica, która zawiera wszystkie prawdopodobnie zapisane opcje widżetów. Ważne jest, aby wyprowadzić odpowiednie zapisane ustawienie we wszystkich wejściach, aby dane zostały zachowane. (Przyjrzymy się, jak zapisać ustawienia w następnym kroku).

W funkcji formularza jest wiele rzeczy do śledzenia, więc najpierw dodajmy tylko jedno dane wejściowe dla oficjalnej nazwy i upewnijmy się, że rozumiemy, co musimy zrobić:

Przede wszystkim powyższy kod wyprowadza niektóre wrappery i klasy HTML w formie, w której WordPress wyprowadza ich formularze widżetów – robimy to, aby formularz wyglądał ładnie.

Istnieją dwie funkcje, z którymi musisz się zapoznać; get_field_id()i get_field_name()oba są funkcjami wewnątrz WP_Widget(dlatego wywołujesz „ $this->" z przodu – podczas gdy $thisodnosi się do instancji klasy). Funkcje zwracają odpowiednio identyfikator i nazwę dostarczonego pola do użycia w danych wejściowych idi nameatrybutach. To bardzo ważne aby nie zapomnieć o dodaniu nameatrybutu do danych wejściowych, w przeciwnym razie nigdy nie zdobędziesz jego wartości podczas zapisywania.

I na koniec wypisujemy bieżącą zapisaną wartość jako valuenasze dane wejściowe, odwołując się do przekazanego argumentu $instance. Bez robienia tego dla twojej wartości, dane wejściowe nigdy nie zostaną wypełnione tym, co jest zapisane w bazie danych i za każdym razem będą wyświetlane puste, co może zmylić użytkowników.

Jeśli potrzebujesz różnych danych wejściowych formularza, takich jak pola wyboru lub listy rozwijane, powinieneś mieć możliwość łatwego ich dodania zgodnie z powyższymi zasadami. Dodajmy resztę naszych ustawień widżetów. Wszystkie są danymi wejściowymi tekstowymi, więc powtórzono ten sam kod, co powyżej, z wyjątkiem ich identyfikatorów pól. Nasza form()metoda wygląda tak:

Jeśli dodasz widżet do dostępnego obszaru widżetów, powinien on wyglądać tak:

Funkcja update()

Funkcja update()jest odpowiedzialna za faktyczne zapisywanie wprowadzonych wartości w admin. Niestety WordPress nie robi tego automatycznie za Ciebie. W tej funkcji podane są dwa parametry; zwykle o nazwie $new_instancei $old_instance. Wewnątrz pierwszego parametru, $new_instance, znajdziesz wszystkie wartości, które zostały przesłane, a w drugim, $old_instance, znajdziesz wartości, które są aktualnie zapisane w bazie danych. Pozwala to w razie potrzeby na wykonanie inteligentnych porównań.

Zwykle po prostu tworzysz nową tablicę wszystkich ustawień widżetów i zapisujesz wszystko, co jest w niej ustawione $new_instance. Zajmujemy się również odkażaniem. Na koniec po prostu zwracamy tę tablicę, która powie WordPressowi, co zapisać.

// Responsible for saving settings in admin
public function update($new_instance, $old_instance) {
    $instance = [];
    $instance['legal_name'] = (!empty($new_instance['legal_name']))? strip_tags($new_instance['legal_name']): '';
    $instance['vat_id'] = (!empty($new_instance['vat_id']))? strip_tags($new_instance['vat_id']): '';
    $instance['street_address'] = (!empty($new_instance['street_address']))? strip_tags($new_instance['street_address']): '';
    $instance['postal_code'] = (!empty($new_instance['postal_code']))? strip_tags($new_instance['postal_code']): '';
    $instance['postal_city'] = (!empty($new_instance['postal_city']))? strip_tags($new_instance['postal_city']): '';
    $instance['email_address'] = (!empty($new_instance['email_address']))? strip_tags($new_instance['email_address']): '';
    $instance['phone_number'] = (!empty($new_instance['phone_number']))? strip_tags($new_instance['phone_number']): '';
    return $instance;
}

Możesz teraz przetestować swój widżet, jeśli chcesz, i sprawdzić, czy wprowadzone wartości są zapisywane. A jeśli pamiętasz o valueprawidłowym ustawieniu atrybutu w form(), po zapisaniu i naciśnięciu przycisku odświeżania wartości powinny zostać zachowane. Świetny! Przejdźmy teraz do ostatniego i, co prawda, najfajniejszego kroku – wyprowadzania frontendu.

Funkcja widget()

Funkcja widget()odpowiada za wyprowadzenie widżetu w interfejsie użytkownika. Do funkcji otrzymamy dwa argumenty; po pierwsze tablica z przydatnymi informacjami, takimi jak opakowania obszaru widżetów zdefiniowanych w motywie, a po drugie zapisane wartości ustawień widżetów.

Wyjście widżetu powinno zawsze zaczynać się od echa $args['before_widget']i zawsze kończyć się echem $args['after_widget']. Dzięki temu widżet zostanie opakowany w te same odpowiednie opakowania HTML widżetów, które zostały zdefiniowane przez motyw. Wzdłuż tych samych ścieżek możesz wykonać echo $args['before_title']i $args['after_title']wyprowadzić prawidłowe obwoluty HTML wokół tytułu widżetu. Nie mamy samego tytułu widżetu, ale umieścimy oficjalną nazwę firmy jako tytuł widżetu.

W przeciwnym razie uzyskasz zapisane wartości, odwołując się do drugiego argumentu, $instance, za pomocą nazw kluczy ustawionych w form()i update(). Dobrą praktyką jest wyświetlanie tylko tych ustawień, które zostały ustawione – i ignorowanie tych pustych.

Ponieważ wyprowadzamy również mikrodane, musimy dodać odpowiednie właściwości zgodnie z regułami schema.org.

Od Ciebie zależy, w jaki sposób chcesz wyświetlić swój widżet; możesz prawdopodobnie rozważyć dodanie większej liczby wrapperów HTML, aby ułatwić stylizację.

Dostosuj wyjście, dodaj trochę stylizacji i to wszystko!

FYI: Twój widżet otrzyma nazwę klasy opakowującej „ widget_<base ID>” (podstawowy identyfikator to ten, który podałeś w konstruktorze). W naszym przypadku nasz widżet otrzyma klasę „ widget_local_business“. Może to pomóc w dodaniu ukierunkowanej stylizacji.

Zawijanie i kod końcowy

W tym samouczku dowiedzieliśmy się, jak utworzyć niestandardowy widżet i jak renderować dane wyjściowe sformatowane w mikrodanych z jego ustawień. Powinieneś być w stanie tworzyć własne widżety, postępując zgodnie z podstawami klasy widżetów!

Dla odniesienia, oto pełny kod, wszystko razem.