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

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

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

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

Виджет — это самостоятельный блок, который можно вывести в определённой области темы (sidebar, footer и т.д.). Стандартные виджеты позволяют выводить последние записи, календарь, меню и прочее. Но если вам нужно, например, вывести уникальный текст, кастомную форму или динамические данные, то лучше создать свой виджет.

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

Создание собственного виджета: базовые шаги

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

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

1. Создание класса виджета

class WPDigest_Custom_Widget extends WP_Widget {
    public function __construct() {
        parent::__construct(
            'wpdigest_custom_widget', // ID виджета
            'WPDigest: Кастомный виджет', // Название
            array('description' => 'Простой пользовательский виджет WPDigest')
        );
    }

    // Вывод виджета на сайте
    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['content'])) {
            echo '<p>' . esc_html($instance['content']) . '</p>';
        }
        echo $args['after_widget'];
    }

    // Форма настроек виджета в админке
    public function form($instance) {
        $title = !empty($instance['title']) ? $instance['title'] : '';
        $content = !empty($instance['content']) ? $instance['content'] : '';
        ?>
        <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('content')); ?>">Текст:</label>
            <textarea class="widefat" id="<?php echo esc_attr($this->get_field_id('content')); ?>" 
                      name="<?php echo esc_attr($this->get_field_name('content')); ?>"><?php echo esc_textarea($content); ?></textarea>
        </p>
        <?php
    }

    // Сохранение настроек
    public function update($new_instance, $old_instance) {
        $instance = array();
        $instance['title'] = sanitize_text_field($new_instance['title']);
        $instance['content'] = sanitize_textarea_field($new_instance['content']);
        return $instance;
    }
}

2. Регистрация виджета

После создания класса виджета его нужно зарегистрировать в WordPress, чтобы он появился в списке доступных виджетов.

function wpdigest_register_custom_widget() {
    register_widget('WPDigest_Custom_Widget');
}
add_action('widgets_init', 'wpdigest_register_custom_widget');

Этот код можно добавить в файл functions.php вашей темы или в файл вашего плагина.

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

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

Добавление дополнительного поля для цвета фона

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

public function form($instance) {
    $title = !empty($instance['title']) ? $instance['title'] : '';
    $content = !empty($instance['content']) ? $instance['content'] : '';
    $bg_color = !empty($instance['bg_color']) ? $instance['bg_color'] : '#ffffff';
    ?>
    <!-- предыдущие поля -->
    <p>
        <label for="<?php echo esc_attr($this->get_field_id('bg_color')); ?>">Цвет фона:</label>
        <input class="widefat" id="<?php echo esc_attr($this->get_field_id('bg_color')); ?>" 
               name="<?php echo esc_attr($this->get_field_name('bg_color')); ?>" type="text" 
               value="<?php echo esc_attr($bg_color); ?>" placeholder="#ffffff">
    </p>
    <?php
}

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

public function widget($args, $instance) {
    $bg_style = '';
    if (!empty($instance['bg_color'])) {
        $bg_style = 'style="background-color:' . esc_attr($instance['bg_color']) . '; padding:10px;"';
    }
    echo $args['before_widget'];
    echo '<div ' . $bg_style . '>';
    if (!empty($instance['title'])) {
        echo $args['before_title'] . apply_filters('widget_title', $instance['title']) . $args['after_title'];
    }
    if (!empty($instance['content'])) {
        echo '<p>' . esc_html($instance['content']) . '</p>';
    }
    echo '</div>';
    echo $args['after_widget'];
}

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

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

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

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

Практические советы по разработке виджетов для WordPress

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

Безопасность: всегда фильтруйте и экранируйте пользовательский ввод с помощью функций sanitize_text_field, esc_html, wp_kses_post и т.д.
Локализация: если планируете распространять виджет, используйте функции перевода __() и _e().
Кэширование: для сложных виджетов с динамическими данными можно реализовать кэширование вывода для оптимизации.
Адаптивность: убедитесь, что ваш виджет корректно отображается на мобильных устройствах.

Также полезно использовать WP_Widget::flush_widget_cache() или собственные методы очистки кэша при обновлении настроек.

Вывод

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

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