Підручник: створіть віджет мікроданих для свого бізнесу в WordPress

У цьому підручнику ми дізнаємося, як створити спеціальний віджет, який виводить інформацію про вашу компанію, таку як офіційна назва, адреса, номер телефону та електронна пошта. Але ми зробимо ще один крок далі, вивівши його з мікроданими або розміткою схеми, що дозволить пошуковим системам зрозуміти ваш вміст.

Віджети — це динамічні блоки, які можна розмістити у доступних областях вашої теми. Зазвичай ваша тема має як мінімум одну бічну панель і одну або кілька областей у нижньому колонтитулі. Розміщення інформації про вашу компанію у вигляді віджета в нижньому колонтитулі є звичайним і досить розумним, оскільки нижній колонтитул відображається на всіх сторінках вашого сайту.

Мікродані — це додаткові HTML-атрибути, які пояснюють, що містить конкретний HTML-тег, щоб машина могла зрозуміти, що це таке (наприклад, назва підприємства, номер телефону, адреса підприємства, адреса електронної пошти підприємства тощо). Це дає змогу пошуковим системам, таким як Google, отримувати інформацію про вашу компанію з вашого HTML.

Що ми створимо

Наш віджет виводитиме інформацію за допомогою схеми мікроданих LocalBusiness, яка ідеально підходить для організації чи бізнесу. Ви самі вирішуєте, які властивості ви бажаєте вивести, просто клацніть посилання вище, щоб переглянути всі можливі властивості в LocalBusiness (включно з успадкованими). Ваш бізнес або ваша країна можуть віддати перевагу іншим видам інформації.

Віджет цього підручника виведе таку необов’язкову інформацію:

• Назва компанії (власність мікроданих: legalName)
• Ідентифікаційний номер ПДВ або номер організації (власність мікроданих: vatID)
• Поштова адреса (тег мікроданих: PostalAddressіз властивостями для streetAddress, postalCode, та addressLocality)
• Адреса електронної пошти компанії (власність мікроданих: email)
• Номер телефону (властивість мікроданих: telephone)

Цей підручник не допоможе вам створити стиль віджета, оскільки це має бути досить простим. У інтерфейсі наш віджет виглядатиме як звичайний текстовий віджет. Але, звичайно, під капотом є розмітка схеми, яка допомагає Google.

Основи створення спеціального віджета

Ви можете розмістити свій код у своїй темі functions.phpабо створити спеціальний плагін. Просто пам’ятайте, що якщо ви збережете його в плагіні, ви втратите віджет під час дезактивації плагіна; і так само, якщо зберегти його в темі, ви втратите віджет, якщо перейдете на іншу тему. У цьому прикладі я додам код у тему functions.php.

Створення віджета виконується за допомогою об’єктно-орієнтованого коду PHP. Ви пишете клас PHP, який розширює клас віджетів WordPress, і ініціалізуєте його, викликаючи register_widget()та вказуючи назву свого класу. У цьому посібнику я назвав свій клас віджета LocalBusiness.

Почнемо з виклику register_widget()внутрішньої функції, підключеної до дії widgets_init.

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

Давайте швидко розглянемо скелет спеціального класу віджетів:

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) { }
}

Як ви бачите вище, вам знадобляться чотири функції у вашому класі. Давайте переглянемо кожну функцію одну за іншою та заповнимо їх.

Створення віджета мікроданих LocalBusiness

Найлогічніше почати з конструктора, який відповідає за налаштування вашого віджета.

Функція __construct().

Усередині конструктора вам потрібно налаштувати деякі змінні, такі як ім’я віджета, і викликати функцію батьківського конструктора (батьківський клас – це той, який ви розширюєте; WP_Widget). Детальніше про можливі варіанти в конструкторі читайте тут. Я надам базовий ідентифікатор, назву та опис, наприклад:

Ви можете зробити більше в __constructметоді, наприклад поставити сценарії в чергу або визначити додаткові параметри віджетів. Але вищевказаного зазвичай достатньо в більшості випадків.

Функція form().

Наступним кроком є ​​створення всіх налаштувань і вводів, які ваш віджет приймає в адміністраторі. Для виведення налаштувань у Widget admin ми використовуємо функцію, form()яка надає вам один параметр; масив, який містить усі можливі збережені параметри віджетів. Важливо, щоб ви виводили відповідне збережене налаштування в усіх своїх введеннях, щоб дані зберігалися. (Ми розглянемо, як зберегти налаштування на наступному кроці).

У функції форми потрібно багато чого відслідковувати, тому давайте спершу додамо один вхід, для юридичної назви, і переконаємося, що ми розуміємо, що нам потрібно зробити:

По-перше, наведений вище код виводить деякі HTML-оболонки та класи у форму, у якій WordPress виводить свої форми віджетів – ми робимо це, щоб форма виглядала гарно.

Є дві функції, з якими вам потрібно ознайомитися; get_field_id()і get_field_name()обидві вони є функціями всередині WP_Widget(саме тому ви викликаєте «$this->" спереду – тоді як $thisпосилається на екземпляр класу). Функції повертають ідентифікатор і назву наданого поля, відповідно, для використання у ваших введеннях idі nameатрибутах. Це дуже важливо щоб не забути додати nameатрибут до свого введення, інакше ви ніколи не отримаєте його значення під час збереження.

І, нарешті, ми виводимо поточне збережене значення як valueнаш вхід, посилаючись на переданий аргумент $instance. Якщо це не зробити для вашого значення, вхідні дані ніколи не будуть заповнені тим, що збережено в базі даних, і щоразу відображатимуться порожніми, що може заплутати користувачів.

Якщо вам потрібні різні введення форм, наприклад прапорці або розкривні списки, ви зможете легко додати їх, дотримуючись правил, згаданих вище. Давайте додамо решту параметрів наших віджетів. Усі вони є текстовими введеннями, тому це той самий код, який повторюється вище, за винятком їхніх ідентифікаторів полів. Наш form()метод виглядає так:

Якщо ви додаєте свій віджет у доступну область віджетів, він має виглядати так:

Функція update().

Ця update()функція відповідає за фактичне збереження введених вами значень в admin. На жаль, WordPress не робить це автоматично за вас. У цій функції передбачено два параметри; зазвичай називають $new_instanceі $old_instance. У першому параметрі, $new_instanceви знайдете всі надіслані значення, а в другому, $old_instanceви знайдете значення, які наразі зберігаються в базі даних. Це дає вам змогу робити розумні порівняння, якщо потрібно.

Зазвичай ви просто створюєте новий масив усіх налаштувань ваших віджетів і зберігаєте все, що встановлено всередині $new_instance. Ми також подбаємо про дезінфекцію. Нарешті ми просто повертаємо цей масив, який вкаже WordPress, що зберігати.

// 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;
}

Тепер ви можете протестувати свій віджет, якщо хочете, і перевірити, чи зберігаються введені значення. І якщо ви пам’ятаєте правильно встановити valueатрибут у form(), коли ви збережете та натиснете кнопку «Оновити», значення мають зберегтися. Чудово! Тепер перейдемо до останнього і, за загальним визнанням, найцікавішого кроку – виведення біта інтерфейсу.

Функція widget().

Функція widget()відповідає за виведення вашого віджета у інтерфейс. Ми отримаємо два аргументи функції; по-перше, масив із деякою корисною інформацією, такою як обгортки визначеної області віджетів теми, а по-друге, збережені значення параметрів віджетів.

Вихід вашого віджета має завжди починатися з echoing $args['before_widget']і завжди закінчуватися echoing $args['after_widget']. Це гарантує, що ваш віджет буде загорнуто в ту саму правильну оболонку HTML віджета, як визначено темою. Уздовж тих самих доріжок, ви можете повторити $args['before_title']і $args['after_title']для виведення правильних HTML-огорток навколо назви віджета. У нас немає фактичної назви віджета як такої, але ми загорнемо юридичну назву компанії як назву віджета.

В іншому випадку ви отримаєте свої збережені значення, посилаючись на другий аргумент, $instance, за вашими назвами ключів, встановленими в form()і update(). Рекомендується виводити лише встановлені налаштування та ігнорувати порожні.

Оскільки ми також виводимо мікродані, нам потрібно додати відповідні властивості відповідно до правил schema.org.

Ви самі вирішуєте, як ви хочете вивести свій віджет; можливо, ви можете додати більше HTML-оболонок для полегшення стилю.

Налаштуйте результат, додайте стиль і все!

Для вашої інформації: ваш віджет отримає назву класу упаковки «widget_<base ID>» (базовий ідентифікатор — це те, що ви вказали в конструкторі). У нашому випадку наш віджет отримає клас " widget_local_business“. Це може допомогти вам додати цілеспрямований стиль.

Підведення підсумків і остаточний код

У цьому підручнику ми дізналися, як створити спеціальний віджет і як відтворити вихідні дані у форматі Microdata з його налаштувань. Ви повинні мати можливість створювати власні віджети, дотримуючись основ класу віджетів!

Для довідки, ось повний код разом.