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

Автор: Нина Ларионова | Опубликовано: 24.11.2025

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

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

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

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

Основные шаги создания виджета

Чтобы создать виджет, нужно:

Создать класс, наследующийся от WP_Widget.
Определить методы для инициализации, вывода виджета, настройки и сохранения настроек.
Зарегистрировать виджет с помощью хука widgets_init.

Далее покажем подробный пример.

Пример создания простого виджета "Приветствие" с настраиваемым текстом

Создадим виджет, который выводит приветственное сообщение, которое можно задать в админке. Такой виджет подойдет для демонстрации основных принципов.

class WpCodeRu_Widget_Greeting extends WP_Widget {

    public function __construct() {
        parent::__construct(
            'wpcoderu_greeting',
            __('WpCodeRu: Приветствие', 'wp-code'),
            array('description' => __('Простой виджет с приветственным сообщением', 'wp-code'))
        );
    }

    // Вывод виджета на сайте
    public function widget($args, $instance) {
        echo $args['before_widget'];
        $greeting = !empty($instance['greeting_text']) ? $instance['greeting_text'] : __('Привет, посетитель!', 'wp-code');
        echo $args['before_title'] . apply_filters('widget_title', $greeting) . $args['after_title'];
        echo $args['after_widget'];
    }

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

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

function wpcoderu_register_greeting_widget() {
    register_widget('WpCodeRu_Widget_Greeting');
}
add_action('widgets_init', 'wpcoderu_register_greeting_widget');

Код нужно добавить в файл functions.php вашей темы или в собственный плагин. После этого в админке появится новый виджет с названием "WpCodeRu: Приветствие".

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

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

Изменения в коде виджета

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

class WpCodeRu_Widget_Quotes extends WP_Widget {

    public function __construct() {
        parent::__construct(
            'wpcoderu_quotes',
            __('WpCodeRu: Случайные цитаты', 'wp-code'),
            array('description' => __('Виджет для вывода случайной цитаты из списка', 'wp-code'))
        );
    }

    public function widget($args, $instance) {
        echo $args['before_widget'];
        $title = !empty($instance['title']) ? $instance['title'] : __('Цитата дня', 'wp-code');
        echo $args['before_title'] . apply_filters('widget_title', $title) . $args['after_title'];

        if (!empty($instance['quotes'])) {
            $quotes = explode("\n", $instance['quotes']);
            $quotes = array_map('trim', $quotes);
            $quotes = array_filter($quotes);
            if (!empty($quotes)) {
                $random_quote = $quotes[array_rand($quotes)];
                echo '<p>' . esc_html($random_quote) . '</p>';
            } else {
                echo '<p>' . __('Нет цитат для отображения.', 'wp-code') . '</p>';
            }
        } else {
            echo '<p>' . __('Цитаты не заданы.', 'wp-code') . '</p>';
        }

        echo $args['after_widget'];
    }

    public function form($instance) {
        $title = !empty($instance['title']) ? $instance['title'] : __('Цитата дня', 'wp-code');
        $quotes = !empty($instance['quotes']) ? $instance['quotes'] : "";
        ?>
        <p>
            <label for="<?php echo $this->get_field_id('title'); ?>"><?php _e('Заголовок:'); ?></label>
            <input class="widefat" id="<?php echo $this->get_field_id('title'); ?>" name="<?php echo $this->get_field_name('title'); ?>" type="text" value="<?php echo esc_attr($title); ?>">
        </p>
        <p>
            <label for="<?php echo $this->get_field_id('quotes'); ?>"><?php _e('Цитаты (каждая с новой строки):'); ?></label>
            <textarea class="widefat" rows="6" id="<?php echo $this->get_field_id('quotes'); ?>" name="<?php echo $this->get_field_name('quotes'); ?>"><?php echo esc_textarea($quotes); ?></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['quotes'] = (!empty($new_instance['quotes'])) ? sanitize_textarea_field($new_instance['quotes']) : '';
        return $instance;
    }
}

function wpcoderu_register_quotes_widget() {
    register_widget('WpCodeRu_Widget_Quotes');
}
add_action('widgets_init', 'wpcoderu_register_quotes_widget');

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

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

Санитизация и экранирование данных

Очень важно всегда обрабатывать пользовательские данные, чтобы избежать XSS-уязвимостей. В методе update используйте функции sanitize_text_field и sanitize_textarea_field, а при выводе применяйте esc_html или esc_textarea. Никогда не выводите пользовательский ввод напрямую.

Кеширование

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

Оптимизация вывода

Не добавляйте тяжелые скрипты и стили без нужды. Если виджет требует CSS или JS, подключайте их только на страницах, где он отображается, используя условные проверки.

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

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

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

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

Итоги и рекомендации по созданию виджетов

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

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