Как создать собственный виджет WordPress: пошаговое руководство

Автор: Ксения Боброва | Опубликовано: 28.11.2025

Виджеты — это удобный способ добавить функциональность и контент в боковые панели и другие области вашего сайта на WordPress. Если стандартных виджетов недостаточно, можно создать собственный виджет, который будет решать конкретные задачи. В этой статье мы подробно рассмотрим, как создать собственный виджет WordPress с нуля, используя объектно-ориентированный подход и стандартные методы WordPress.

Что такое виджет в WordPress и зачем создавать свои

Виджет — это небольшой блок, который можно добавлять в определённые области сайта, например, в сайдбар или футер. Стандартный функционал WordPress предлагает множество виджетов, таких как поиск, последние записи, календарь и т.д. Но если вам нужно вывести уникальную информацию или реализовать особую логику, стандартных виджетов может не хватать.

Создание собственного виджета позволяет:

Добавить уникальный функционал без изменения темы;
Сделать настройки виджета удобными для администратора;
Использовать повторно виджет на разных сайтах и в разных местах.

Далее мы создадим простой виджет, который будет выводить приветствие с настраиваемым текстом.

Создание собственного виджета: базовый класс и регистрация

Для создания виджета нужно создать класс, который наследуется от WP_Widget. В нём нужно определить минимум три метода:

__construct() — конструктор виджета, здесь задаются название и описание;
widget() — вывод виджета на сайте;
form() — форма настроек в админке;
update() — обработка и сохранение настроек.

Пример создания простого виджета для сайта wpdirect.ru:

class WPDirect_Widget_Greeting extends WP_Widget {

    public function __construct() {
        parent::__construct(
            'wpdirect_widget_greeting',
            __('WPDirect: Приветствие', 'wpdirect'),
            [
                'description' => __('Простой виджет для вывода приветствия', 'wpdirect'),
            ]
        );
    }

    public function widget($args, $instance) {
        echo $args['before_widget'];
        $greeting = !empty($instance['greeting']) ? $instance['greeting'] : __('Привет, мир!', 'wpdirect');
        echo $args['before_title'] . apply_filters('widget_title', $greeting) . $args['after_title'];
        echo $args['after_widget'];
    }

    public function form($instance) {
        $greeting = !empty($instance['greeting']) ? $instance['greeting'] : __('Привет, мир!', 'wpdirect');
        ?>
        <p>
            <label for="<?php echo esc_attr($this->get_field_id('greeting')); ?>"><?php _e('Текст приветствия:'); ?></label>
            <input class="widefat" id="<?php echo esc_attr($this->get_field_id('greeting')); ?>" name="<?php echo esc_attr($this->get_field_name('greeting')); ?>" type="text" value="<?php echo esc_attr($greeting); ?>">
        </p>
        <?php
    }

    public function update($new_instance, $old_instance) {
        $instance = [];
        $instance['greeting'] = (!empty($new_instance['greeting'])) ? strip_tags($new_instance['greeting']) : '';
        return $instance;
    }
}

function wpdirect_register_widget() {
    register_widget('WPDirect_Widget_Greeting');
}
add_action('widgets_init', 'wpdirect_register_widget');

Этот код создаёт новый виджет с названием «WPDirect: Приветствие», который выводит настраиваемый заголовок.

Настройка виджета в админке и вывод на сайте

После добавления кода в файл плагина или functions.php темы, виджет появится в разделе «Внешний вид — Виджеты» в админке WordPress. Там вы можете перетащить его в нужную область и задать текст приветствия.

При выводе на сайте виджет будет отображать заголовок с вашим текстом в оформлении, заданном темой (обёртки $args['before_widget'] и $args['before_title'] позволяют сохранить стили).

Таким образом можно создавать виджеты с любым функционалом — например, выводом последних комментариев, произвольных данных из базы, форм обратной связи и т.д. Главное — реализовать методы widget() для вывода и form() для настроек.

Расширение функционала: добавляем дополнительные поля настроек

Чтобы сделать виджет более полезным, можно добавить дополнительные настройки. Например, цвет текста и количество повторов приветствия.

Добавим в форму два поля:

Цвет текста (поле для ввода цвета);
Количество повторов (число).

Обновим методы form() и update(), а также вывод в widget():

public function widget($args, $instance) {
    echo $args['before_widget'];
    $greeting = !empty($instance['greeting']) ? $instance['greeting'] : __('Привет, мир!', 'wpdirect');
    $color = !empty($instance['color']) ? $instance['color'] : '#000000';
    $count = !empty($instance['count']) ? intval($instance['count']) : 1;

    $style = 'color:' . esc_attr($color) . ';';
    for ($i = 0; $i < $count; $i++) {
        echo '<p style="' . $style . '">' . esc_html($greeting) . '</p>';
    }
    echo $args['after_widget'];
}

public function form($instance) {
    $greeting = !empty($instance['greeting']) ? $instance['greeting'] : __('Привет, мир!', 'wpdirect');
    $color = !empty($instance['color']) ? $instance['color'] : '#000000';
    $count = !empty($instance['count']) ? intval($instance['count']) : 1;
    ?>
    <p>
        <label for="<?php echo esc_attr($this->get_field_id('greeting')); ?>"><?php _e('Текст приветствия:'); ?></label>
        <input class="widefat" id="<?php echo esc_attr($this->get_field_id('greeting')); ?>" name="<?php echo esc_attr($this->get_field_name('greeting')); ?>" type="text" value="<?php echo esc_attr($greeting); ?>">
    </p>
    <p>
        <label for="<?php echo esc_attr($this->get_field_id('color')); ?>"><?php _e('Цвет текста (HEX):'); ?></label>
        <input class="widefat" id="<?php echo esc_attr($this->get_field_id('color')); ?>" name="<?php echo esc_attr($this->get_field_name('color')); ?>" type="text" value="<?php echo esc_attr($color); ?>" placeholder="#000000">
    </p>
    <p>
        <label for="<?php echo esc_attr($this->get_field_id('count')); ?>"><?php _e('Количество повторов:'); ?></label>
        <input id="<?php echo esc_attr($this->get_field_id('count')); ?>" name="<?php echo esc_attr($this->get_field_name('count')); ?>" type="number" value="<?php echo esc_attr($count); ?>" min="1" max="10">
    </p>
    <?php
}

public function update($new_instance, $old_instance) {
    $instance = [];
    $instance['greeting'] = (!empty($new_instance['greeting'])) ? strip_tags($new_instance['greeting']) : '';
    $instance['color'] = (!empty($new_instance['color']) && preg_match('/^#([a-f0-9]{3}){1,2}$/i', $new_instance['color'])) ? $new_instance['color'] : '#000000';
    $instance['count'] = (!empty($new_instance['count']) && intval($new_instance['count']) > 0) ? intval($new_instance['count']) : 1;
    return $instance;
}

Теперь администратор может выбрать цвет текста и сколько раз вывести приветствие.

Используем плагины для создания виджетов: обзор и примеры

Если вы не хотите писать виджет вручную, можно использовать плагины-конструкторы виджетов, например:

Widget Options — расширенные настройки виджетов, включая отображение по условиям;
SiteOrigin Widgets Bundle — набор визуальных виджетов с возможностью настройки;
Custom Widget Boilerplate — шаблон для быстрой разработки собственных виджетов.

Однако для точного контроля и оптимизации лучше писать виджет самостоятельно, как мы показали выше. Это даёт максимум гибкости и производительности.

Как отлаживать и тестировать собственные виджеты в WordPress

Во время разработки виджета важно проверять корректность работы и отсутствие ошибок. Рекомендуемые практики:

Используйте error_log() для отладки;
Проверяйте входные данные и используйте функции очистки и экранирования, например esc_html(), esc_attr();
Тестируйте виджет в разных темах и на разных устройствах;
Проверяйте совместимость с другими плагинами и кеширующими системами.

Для комплексного тестирования можно создать отдельный плагин с вашим виджетом и включать его по мере необходимости.

Итог

Создание собственного виджета — это отличный способ добавить уникальный функционал на сайт WordPress без изменения темы. В статье мы рассмотрели создание простого виджета с настраиваемым приветствием, расширили его настройками цвета и количества повторов, а также дали советы по отладке и использованию плагинов. Теперь вы можете создавать сложные виджеты под любые задачи и улучшать пользовательский интерфейс вашего сайта.