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

Автор: Тимур Комаров | Опубликовано: 13.11.2025

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

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

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

В этой статье мы разберём, как с нуля создать виджет с поддержкой настроек, который будет отображать, к примеру, произвольное сообщение с возможностью редактирования через панель администратора.

Основы создания виджета в WordPress: класс WP_Widget

Все виджеты в WordPress создаются на основе базового класса WP_Widget. Для создания собственного виджета нужно создать класс-наследник, реализовать несколько обязательных методов и зарегистрировать виджет.

Основные методы, которые необходимо определить:

__construct() — инициализация виджета, его название и описание;
widget($args, $instance) — вывод содержимого виджета на фронтенде;
form($instance) — форма настроек виджета в админке;
update($new_instance, $old_instance) — сохранение настроек после редактирования.

Рассмотрим пример простого виджета с возможностью вводить произвольный заголовок и текст.

Пример базового виджета с настройками

class WPLite_Custom_Widget extends WP_Widget {
    public function __construct() {
        parent::__construct(
            'wplite_custom_widget',
            'WPLite: Кастомный виджет',
            array('description' => 'Пример виджета с настраиваемым текстом')
        );
    }

    // Вывод виджета на сайте
    public function widget($args, $instance) {
        echo $args['before_widget'];
        if (!empty($instance['title'])) {
            echo $args['before_title'] . apply_filters('widget_title', $instance['title']) . $args['after_title'];
        }
        if (!empty($instance['text'])) {
            echo '<p>' . esc_html($instance['text']) . '</p>';
        }
        echo $args['after_widget'];
    }

    // Форма настроек в админке
    public function form($instance) {
        $title = !empty($instance['title']) ? $instance['title'] : '';
        $text = !empty($instance['text']) ? $instance['text'] : '';
        ?>
        <p>
            <label for="<?php echo esc_attr($this->get_field_id('title')); ?>">Заголовок:</label>
            <input class="widefat" id="<?php echo esc_attr($this->get_field_id('title')); ?>" 
                   name="<?php echo esc_attr($this->get_field_name('title')); ?>" type="text" value="<?php echo esc_attr($title); ?>">
        </p>
        <p>
            <label for="<?php echo esc_attr($this->get_field_id('text')); ?>">Текст:</label>
            <textarea class="widefat" rows="4" id="<?php echo esc_attr($this->get_field_id('text')); ?>" 
                      name="<?php echo esc_attr($this->get_field_name('text')); ?>"><?php echo esc_textarea($text); ?></textarea>
        </p>
        <?php
    }

    // Обработка и сохранение данных
    public function update($new_instance, $old_instance) {
        $instance = array();
        $instance['title'] = (!empty($new_instance['title'])) ? sanitize_text_field($new_instance['title']) : '';
        $instance['text'] = (!empty($new_instance['text'])) ? sanitize_textarea_field($new_instance['text']) : '';
        return $instance;
    }
}

// Регистрация виджета
function wplite_register_custom_widget() {
    register_widget('WPLite_Custom_Widget');
}
add_action('widgets_init', 'wplite_register_custom_widget');

Как подключить и использовать виджет на сайте

Чтобы виджет заработал, добавьте приведённый выше код в файл вашего дочернего шаблона functions.php или в отдельный плагин. После этого в админке WordPress в разделе Внешний вид - Виджеты появится новый виджет «WPLite: Кастомный виджет».

Вы можете добавить его в любую доступную область виджетов и настроить заголовок и текст. Это простой пример, который можно расширять под свои задачи: добавлять поля, выводить динамические данные, подключать стили и скрипты.

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

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

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

Пример расширенного виджета с цветом и ссылкой

class WPLite_Advanced_Widget extends WP_Widget {
    public function __construct() {
        parent::__construct(
            'wplite_advanced_widget',
            'WPLite: Расширенный виджет',
            array('description' => 'Виджет с цветом текста и ссылкой')
        );
    }

    public function widget($args, $instance) {
        echo $args['before_widget'];

        $title = !empty($instance['title']) ? apply_filters('widget_title', $instance['title']) : '';
        $text = !empty($instance['text']) ? $instance['text'] : '';
        $color = !empty($instance['color']) ? $instance['color'] : '#000000';
        $link = !empty($instance['link']) ? esc_url($instance['link']) : '';

        if ($title) {
            echo $args['before_title'] . $title . $args['after_title'];
        }

        $style = 'color:' . esc_attr($color) . ';';

        if ($link) {
            echo '<p><a href="' . $link . '" style="' . $style . '">' . esc_html($text) . '</a></p>';
        } else {
            echo '<p style="' . $style . '">' . esc_html($text) . '</p>';
        }

        echo $args['after_widget'];
    }

    public function form($instance) {
        $title = !empty($instance['title']) ? $instance['title'] : '';
        $text = !empty($instance['text']) ? $instance['text'] : '';
        $color = !empty($instance['color']) ? $instance['color'] : '#000000';
        $link = !empty($instance['link']) ? $instance['link'] : '';
        ?>
        <p>
            <label for="<?php echo esc_attr($this->get_field_id('title')); ?>">Заголовок:</label>
            <input class="widefat" id="<?php echo esc_attr($this->get_field_id('title')); ?>" 
                   name="<?php echo esc_attr($this->get_field_name('title')); ?>" type="text" value="<?php echo esc_attr($title); ?>">
        </p>
        <p>
            <label for="<?php echo esc_attr($this->get_field_id('text')); ?>">Текст:</label>
            <textarea class="widefat" rows="3" id="<?php echo esc_attr($this->get_field_id('text')); ?>" 
                      name="<?php echo esc_attr($this->get_field_name('text')); ?>"><?php echo esc_textarea($text); ?></textarea>
        </p>
        <p>
            <label for="<?php echo esc_attr($this->get_field_id('color')); ?>">Цвет текста:</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="color" value="<?php echo esc_attr($color); ?>">
        </p>
        <p>
            <label for="<?php echo esc_attr($this->get_field_id('link')); ?>">Ссылка (опционально):</label>
            <input class="widefat" id="<?php echo esc_attr($this->get_field_id('link')); ?>" 
                   name="<?php echo esc_attr($this->get_field_name('link')); ?>" type="url" value="<?php echo esc_attr($link); ?>">
        </p>
        <?php
    }

    public function update($new_instance, $old_instance) {
        $instance = array();
        $instance['title'] = (!empty($new_instance['title'])) ? sanitize_text_field($new_instance['title']) : '';
        $instance['text'] = (!empty($new_instance['text'])) ? sanitize_textarea_field($new_instance['text']) : '';
        $instance['color'] = (!empty($new_instance['color'])) ? sanitize_hex_color($new_instance['color']) : '#000000';
        $instance['link'] = (!empty($new_instance['link'])) ? esc_url_raw($new_instance['link']) : '';
        return $instance;
    }
}

function wplite_register_advanced_widget() {
    register_widget('WPLite_Advanced_Widget');
}
add_action('widgets_init', 'wplite_register_advanced_widget');

Полезные плагины для создания и управления виджетами в WordPress

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

Widget Options – расширяет стандартные виджеты возможностями управления видимостью по страницам, ролям, устройствам и другим критериям.
Custom Sidebars – позволяет создавать неограниченное количество боковых панелей и назначать их на разные страницы.
SiteOrigin Widgets Bundle – набор мощных виджетов с визуальным редактором, которые можно использовать без сложного программирования.
Black Studio TinyMCE Widget – добавляет визуальный редактор в стандартный виджет текста, упрощая форматирование.

Использование этих плагинов позволяет быстро расширять функционал без глубоких знаний PHP, но если нужна максимальная гибкость, создание собственного виджета – лучший выбор.

Советы по безопасности и производительности при создании виджетов

При разработке виджетов важно соблюдать несколько правил:

Всегда экранируйте и фильтруйте входящие данные с помощью функций WordPress (sanitize_text_field, esc_html, esc_url и т.п.).
Не выводите необработанные данные из настроек, чтобы избежать XSS-уязвимостей.
Минимизируйте использование тяжелых запросов и внешних API во фронтенде виджета.
Кэшируйте вывод, если виджет делает сложные операции, чтобы не нагружать сервер.
Подключайте стили и скрипты только на страницах, где используется виджет, через хуки wp_enqueue_scripts с проверкой условий.

Соблюдение этих рекомендаций обеспечит стабильную работу сайта и безопасность пользователей.