Публикация в группе: Полезное для WordPress

Категории группы: Полезное

У тех кто хоть раз делал свой шаблон для WordPress, возникал вопрос: "А как же сделать свой собственный виджет?" Давайте, я попробую рассказать как это сделать.
Как вы уже догадались, в этой статье речь пойдет о создании своего виджета.

Содержание

  • 1. Стандартное создание виджета WordPress.
  • 2. Создание виджета WordPress на основе классов SP_Widget и SP_Widget_ABS.

1. Стандартное создание Виджета WordPress

Давайте рассмотрим по порядку процесс создания виджета.

1.1. Для начала надо зарегистрировать новую область для виджета с помощью register_sidebar.

Создадим функцию sp_widgets_init и прикрепим ее к хуку widgets_init. Далее в нашей функции вызываем register_sidebar, где указываем название области виджета ('name' => 'test wiget'),
ее уникальный id ('id' => 'test-wiget-area-id') и описание ('description' => 'add wiget here')

Полученный код будет иметь следующий вид:

Добавляем его в functions.php нашей темы.

1.2. Область готова. Теперь ее нужно вызвать во внешней части сайта (frondend). Делается это с помощью dynamic_sidebar(), где мы указываем уникальный id области виджета, в нашем случае это test-wiget-area-id.

Добавляем его в нужный файл темы, к примеру в footer.php.

1.3. Осталось самое интересное. Создание самого виджета. Для этого нам потребуется стандартный класс WordPress по названием WP_Widget.
Создадим файл widgets.php и подключим его в functions.php нашей темы.

Далее в файле widgets.php создадим класс тестового виджета SP_Test_Widget на основе класса WP_Widget и структура нашего виджета будет иметь вот такой вид:

Тут я думаю визуально все понятно.

В __construct() мы указываем уникальный id виджета(sp_test_widget), его имя (Test widget) и описание ('description' => 'Test widget description').

Метод widget() отвечает за frontend(внешняя часть сайта). Здесь в $args содержатся параметры, а в $instance значения (в нашем случае строка $instance['sp_str']);

Метод form() отвечает за backend(админка), здесь мы работаем со значениями $instance (в нашем случае строка $instance['sp_str']).

Метод update() сохраняет изменение данных в виджете.

2. Создание виджета WordPress на основе класса SP_Widget

В примере который я показал выше, видно как можно создавать свои виджет. И вроде все просто и хорошо. А если вместо одного поля, будет 10 полей, которые нужно добавить в виджет. Код станет большим и не читаемым. Меня такое положение дел не устраивает и я создал свой класс, с помощью которого можно быстро и удобно работать с виджетами.

Давайте разберем процесс создание виджета на основе моего класса SP_Widget

2.1 Для начала подключим класс в файл functions.php нашей темы, перед widgets.php

Теперь зарегистрируем область виджетов.

Здесь мы создаем экземпляр класс SP_Widget и вызываем метод sp_register_widget_area, куда в свою очередь передаем параметры.

2.2. Теперь в файле widgets.php создаем тестовый виджет. Код примера который я показывал выше нужно закомментировать.

Здесь мы также в __construct() указываем нужные параметры. В методе sp_register_widget ничего не делаем, оставляем как есть. В методе sp_form() вызываем метод sp_add_fields_widget, где указываем тип поля, название, описание, значение по умолчанию и id.

Как раз в методе sp_add_fields_widget и содержится удобство, нам не нужно каждый раз создавать html разметку поля и в методе update указывать какое поле сохранять.

Ну и метод sp_widget() отвечает за frontend.

Метод sp_add_fields_widget() поддерживает два типа полей:

text - текстовое поле
number - числовое поле

Скачать class-sp-widget.php можно тут.
Файл содержит два класса SP_Widget и SP_Widget_ABS

SP_Widget - предназначен для работы с областями виджетов
SP_Widget_ABS - предназначен для работы с виджетами.

3

Автор публикации

не в сети 6 дней

spoot@bk.ru

74
Комментарии: 49Публикации: 25Регистрация: 09-03-2016Продаж/Покупок: 191/3