Учебное пособие: создание виджета микроданных для вашего бизнеса в 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(), которая дает вам один параметр; массив, который содержит все ваши, возможно, сохраненные параметры виджета. Важно, чтобы вы выводили соответствующие сохраненные настройки во все ваши входные данные, чтобы данные сохранялись. (Мы рассмотрим, как сохранить настройки на следующем шаге).

В функции формы нужно отслеживать многое, поэтому давайте сначала добавим один вход, для юридического имени, и убедимся, что мы понимаем, что нам нужно делать:

Прежде всего, приведенный выше код выводит некоторые HTML-обертки и классы в форме, в которой WordPress выводит свои формы виджетов — мы делаем это, чтобы форма выглядела красиво.

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

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

Если вам нужны различные входные данные формы, такие как флажки или раскрывающиеся списки, вы сможете легко добавить их, следуя правилам, упомянутым выше. Давайте добавим остальные настройки нашего виджета. Все они являются текстовыми вводами, поэтому повторяется тот же код, что и выше, за исключением идентификаторов полей. Наш form()метод в итоге выглядит так:

Если вы добавите свой виджет в доступную область виджетов, он должен выглядеть так:

Функция обновления()

Функция 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()отвечает за вывод вашего виджета во фронтэнд. Мы получим два аргумента функции; во-первых, массив с некоторой полезной информацией, такой как определенные обертки области виджета темы, и, во-вторых, ваши сохраненные значения настроек виджета.

Вывод вашего виджета всегда должен начинаться с 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". Это может помочь вам добавить некоторые целевые стили.

Завершение и окончательный код

В этом уроке мы узнали, как создать пользовательский виджет и как отображать выходные данные в формате микроданных из его настроек. Вы должны уметь создавать свои собственные виджеты, следуя основам класса виджетов!

Для справки, вот полный код, все вместе.