Публикация в группе: Полезное для 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')

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

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 - предназначен для работы с виджетами.

3

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

не в сети 2 недели

spoot@bk.ru

84
Комментарии: 54Публикации: 26Регистрация: 09-03-2016Продаж/Покупок: 0/0