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

Автор: Сергей Савельев | Опубликовано: 18.11.2025

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

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

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

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

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

В WordPress виджеты создаются через классы, наследующиеся от WP_Widget. Основные методы, которые нужно реализовать в классе виджета:

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

Создадим пример виджета, который выводит приветствие с возможностью указать имя пользователя через настройки:

class Wpwp_Custom_Widget extends WP_Widget {
    public function __construct() {
        parent::__construct(
            'wpwp_custom_widget',
            'WPWP Приветственный виджет',
            ['description' => 'Выводит приветствие с именем пользователя']
        );
    }

    public function widget($args, $instance) {
        echo $args['before_widget'];
        $name = !empty($instance['name']) ? $instance['name'] : 'Гость';
        echo '<p>Привет, ' . esc_html($name) . '! Добро пожаловать на сайт.</p>';
        echo $args['after_widget'];
    }

    public function form($instance) {
        $name = !empty($instance['name']) ? $instance['name'] : '';
        ?>
        <p>
            <label for="<?php echo esc_attr($this->get_field_id('name')); ?>">Имя пользователя:</label>
            <input class="widefat" id="<?php echo esc_attr($this->get_field_id('name')); ?>" name="<?php echo esc_attr($this->get_field_name('name')); ?>" type="text" value="<?php echo esc_attr($name); ?>" />
        </p>
        <?php
    }

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

function wpwp_register_custom_widget() {
    register_widget('Wpwp_Custom_Widget');
}
add_action('widgets_init', 'wpwp_register_custom_widget');

Подключение и регистрация виджета в теме или плагине

Для того чтобы виджет появился в интерфейсе управления, необходимо зарегистрировать его через хук widgets_init. Обычно код виджета располагают либо в файле functions.php темы, либо в отдельном плагине. В нашем примере функция wpwp_register_custom_widget регистрирует созданный класс виджета.

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

Чтобы подключить виджет, достаточно добавить этот код в файл functions.php активной темы или создать плагин, содержащий класс и регистрацию, активировав его через админку WordPress.

Реальные примеры расширения виджета: добавление дополнительных полей

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

Добавим в форму настройки два поля: текст приветствия и цвет текста. Изменим методы виджета следующим образом:

public function widget($args, $instance) {
    echo $args['before_widget'];
    $name = !empty($instance['name']) ? $instance['name'] : 'Гость';
    $greeting = !empty($instance['greeting']) ? $instance['greeting'] : 'Привет';
    $color = !empty($instance['color']) ? $instance['color'] : '#000000';

    echo '<p style="color:' . esc_attr($color) . ';">' . esc_html($greeting) . ', ' . esc_html($name) . '! Добро пожаловать на сайт.</p>';
    echo $args['after_widget'];
}

public function form($instance) {
    $name = !empty($instance['name']) ? $instance['name'] : '';
    $greeting = !empty($instance['greeting']) ? $instance['greeting'] : 'Привет';
    $color = !empty($instance['color']) ? $instance['color'] : '#000000';
    ?>
    <p>
        <label for="<?php echo esc_attr($this->get_field_id('greeting')); ?>">Текст приветствия:</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')); ?>">Цвет текста:</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>
    <?php
}

public function update($new_instance, $old_instance) {
    $instance = [];
    $instance['name'] = (!empty($new_instance['name'])) ? sanitize_text_field($new_instance['name']) : '';
    $instance['greeting'] = (!empty($new_instance['greeting'])) ? sanitize_text_field($new_instance['greeting']) : '';
    $instance['color'] = (!empty($new_instance['color'])) ? sanitize_hex_color($new_instance['color']) : '#000000';
    return $instance;
}

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

Полезные плагины для работы с виджетами и расширения функционала

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

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

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

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

При написании собственного виджета важно помнить про безопасность и оптимизацию:

Всегда используйте функции esc_html(), esc_attr(), sanitize_text_field() и подобные для очистки и экранирования данных.
Избегайте тяжелых операций в методе widget(), чтобы не замедлять загрузку страниц.
Кэшируйте результаты, если виджет выполняет сложные запросы к базе данных.
Тестируйте виджет с разными темами и плагинами, чтобы избежать конфликтов.

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