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

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

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

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

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

Создавая свой виджет, вы получаете:

Контроль над выводом информации и стилями;
Возможность добавлять настройки для пользователя;
Упрощённое повторное использование на разных сайтах;
Оптимизацию под конкретные задачи вашего проекта.

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

Структура и базовый код виджета WordPress

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

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

Вот базовый пример кода для вашего файла плагина или темы:

class WPMy_Custom_Widget extends WP_Widget {
    public function __construct() {
        parent::__construct(
            'wpmy_custom_widget',
            'WPMy: Пользовательский виджет',
            ['description' => 'Пример собственного виджета WPMy']
        );
    }

    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'];
        }
        echo '<p>Привет от WPMy! Это ваш собственный виджет.</p>';
        echo $args['after_widget'];
    }

    public function form($instance) {
        $title = ! empty($instance['title']) ? $instance['title'] : '';
        ?>
        <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>
        <?php
    }

    public function update($new_instance, $old_instance) {
        $instance = [];
        $instance['title'] = sanitize_text_field($new_instance['title']);
        return $instance;
    }
}

function wpmy_register_custom_widget() {
    register_widget('WPMy_Custom_Widget');
}
add_action('widgets_init', 'wpmy_register_custom_widget');

Подробный разбор кода виджета

Конструктор __construct()

Метод __construct() задаёт уникальный ID виджета (wpmy_custom_widget) и его отображаемое название, а также описание. Эти параметры отображаются в админке WordPress при добавлении виджета.

Метод widget() — вывод на фронтенде

Этот метод отвечает за отображение содержимого виджета на сайте. Важно использовать переменные $args['before_widget'] и $args['after_widget'] для правильного оборачивания HTML, что обеспечивает корректное оформление виджета темой.

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

Метод form() — настройки виджета

В админке виджет отображает форму с полем для ввода заголовка. Используются методы $this->get_field_id() и $this->get_field_name() для правильной генерации имени и ID полей формы.

Использование esc_attr() обеспечивает безопасность вывода и корректное отображение HTML.

Метод update() — сохранение настроек

Этот метод обрабатывает данные, отправленные из формы. Мы используем sanitize_text_field() для очистки текста, чтобы избежать XSS и других проблем безопасности.

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

Для примера сделаем виджет более функциональным — добавим настройку цвета текста. Для этого расширим методы form() и update(), а также изменим вывод в widget().

Обновлённый метод form() с полем цвета:

public function form($instance) {
    $title = ! empty($instance['title']) ? $instance['title'] : '';
    $color = ! empty($instance['color']) ? $instance['color'] : '#000000';
    ?>
    <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('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
}

Обновлённый метод update():

public function update($new_instance, $old_instance) {
    $instance = [];
    $instance['title'] = sanitize_text_field($new_instance['title']);
    $instance['color'] = sanitize_hex_color($new_instance['color']);
    return $instance;
}

Метод widget() теперь выводит заголовок с выбранным цветом:

public function widget($args, $instance) {
    echo $args['before_widget'];
    if ( ! empty($instance['title']) ) {
        $color = ! empty($instance['color']) ? $instance['color'] : '#000000';
        echo $args['before_title'] . '<span style="color:' . esc_attr($color) . '">' . apply_filters('widget_title', $instance['title']) . '</span>' . $args['after_title'];
    }
    echo '<p>Привет от WPMy! Это ваш собственный виджет с цветом текста.</p>';
    echo $args['after_widget'];
}

Советы и рекомендации по созданию виджетов WordPress

При разработке виджетов важно учитывать несколько моментов:

Безопасность: всегда фильтруйте и экранируйте входящие и исходящие данные (sanitize_text_field, esc_html, esc_attr и т.д.).
Совместимость: используйте стандартные хуки и методы WordPress для максимальной совместимости с темами и плагинами.
Удобство пользователя: предоставляйте понятный интерфейс настроек, добавляйте подсказки и проверки.
Производительность: избегайте избыточных запросов к базе данных, кэшируйте результаты при необходимости.

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

Дополнительные плагины для расширения возможностей виджетов

Для улучшения и расширения функционала виджетов можно использовать следующие плагины:

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

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