У тех кто хоть раз делал свой шаблон для 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')
Полученный код будет иметь следующий вид:
function sp_widget_area_init() {
register_sidebar( array(
'name' => 'Test wiget area',
'id' => 'test-wiget-area-id',
'description' => 'add wiget here',
'before_widget' => '',
'after_widget' => '',
'before_title' => '',
'after_title' => '',
));
}
add_action('widgets_init', 'sp_widget_area_init');
Добавляем его в functions.php нашей темы.
1.2. Область готова. Теперь ее нужно вызвать во внешней части сайта (frondend). Делается это с помощью dynamic_sidebar(), где мы указываем уникальный id области виджета, в нашем случае это test-wiget-area-id.
if ( is_active_sidebar('test-wiget-area-id')){
echo '';
dynamic_sidebar('test-wiget-area-id');
echo '';
}
Добавляем его в нужный файл темы, к примеру в footer.php.
1.3. Осталось самое интересное. Создание самого виджета. Для этого нам потребуется стандартный класс WordPress по названием WP_Widget.
Создадим файл widgets.php и подключим его в functions.php нашей темы.
require get_template_directory() . '/inc/widgets.php';
Далее в файле widgets.php создадим класс тестового виджета SP_Test_Widget на основе класса WP_Widget и структура нашего виджета будет иметь вот такой вид:
class SP_Test_Widget extends WP_Widget {
function __construct() {
parent::__construct(
'sp_test_widget',
'Test widget',
array('description' => 'Test widget description')
);
}
function widget($args, $instance) {
//frontend
$sp_str = apply_filters('widget_text', $instance['sp_str']);
echo $args['before_widget'];
echo ''.$sp_str.'
';
echo $args['after_widget'];
}
function form($instance) {
//backend
if(!empty($instance['sp_str'])) $sp_str = $instance['sp_str'];
else $sp_str = '';
echo 'Строка:';
echo '<input type="text" class="sp_str" id="'.esc_attr($this->get_field_id('sp_str')).'" name="'.esc_attr($this->get_field_name('sp_str')).'" value="'.esc_attr($sp_str).'">
';
}
function update($new_instance, $old_instance) {
//сохранение данных
$instance = array();
$instance['sp_str'] = ( ! empty( $new_instance['sp_str'] ) ) ? sanitize_text_field($new_instance['sp_str']) : '';
return $instance;
}
}
function register_sp_widget() {
register_widget('SP_Test_Widget');
}
add_action('widgets_init', 'register_sp_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
require get_template_directory() . '/inc/class-sp-widget.php'; require get_template_directory() . '/inc/widgets.php';
Теперь зарегистрируем область виджетов.
$spWC = new SP_Widget();
$args = array(
'name' => 'Test wiget area',
'id' => 'test-wiget-area-id',
'description' => 'add wiget here',
);
$spWC->sp_register_widget_area($args);
Здесь мы создаем экземпляр класс SP_Widget и вызываем метод sp_register_widget_area, куда в свою очередь передаем параметры.
2.2. Теперь в файле widgets.php создаем тестовый виджет. Код примера который я показывал выше нужно закомментировать.
class SP_Test_Widget extends SP_Widget_ABS {
function __construct(){
parent::__construct('sp_test_widget', 'Test widget', array('description' => 'Test widget description'));
add_action('widgets_init', array($this,'sp_register_widget'));
}
function sp_register_widget() {
register_widget(get_class($this));
}
function sp_form($data){
$this->sp_add_fields_widget(
'text',
'Строка',
'Описание',
$this->sp_get_default_value($data, 'sp_str'),
'sp_str'
);
$this->sp_add_fields_widget(
'number',
'Число',
'Описание',
$this->sp_get_default_value($data, 'sp_str2'),
'sp_str2'
);
}
function sp_widget($args, $data){
$parameters = array();
foreach ($data as $key => $value) {
$parameters[$key] = apply_filters('widget_text', $value);
}
echo $args['before_widget'];
echo ''.$parameters['sp_str'].'
';
echo ''.$parameters['sp_str2'].'
';
echo $args['after_widget'];
}
}
$spTestWidget = new SP_Test_Widget();
Здесь мы также в __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 - предназначен для работы с виджетами.
Автор публикации
Спасибо за статью, будет кому то полезно.