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

Главная > Как создать свой виджет в WordPress с примерами кода

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

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

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

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

Собственный виджет позволяет:

Добавить уникальный блок с нужной вам информацией;
Настроить отображение через админку;
Повысить удобство управления контентом на сайте;
Интегрировать сторонние API или данные.

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

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

Для создания виджета нужно написать класс, который наследуется от WP_Widget. В нем реализуются основные методы: __construct(), widget(), form() и update(). Рассмотрим на примере виджета, который выводит произвольный текст, задаваемый в настройках.

Шаг 1. Создаем класс виджета

В файле functions.php вашей темы или в отдельном плагине добавьте следующий код:

class WPExamples_Widget_Text extends WP_Widget {
    public function __construct() {
        parent::__construct(
            'wpexamples_widget_text',
            __('WPExamples Текстовый виджет', 'wpexamples'),
            array('description' => __('Простой текстовый виджет с настройками', 'wpexamples'))
        );
    }

    // Вывод виджета на сайте
    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 = isset($instance['title']) ? $instance['title'] : '';
        $text = isset($instance['text']) ? $instance['text'] : '';
        ?>
        <p>
            <label for="<?php echo esc_attr($this->get_field_id('title')); ?>"><?php _e('Заголовок:', 'wpexamples'); ?></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')); ?>"><?php _e('Текст:', 'wpexamples'); ?></label>
            <textarea class="widefat" 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'] = sanitize_text_field($new_instance['title']);
        $instance['text'] = sanitize_textarea_field($new_instance['text']);
        return $instance;
    }
}

Шаг 2. Регистрируем виджет

Чтобы WordPress распознал ваш класс как виджет, нужно зарегистрировать его с помощью хука widgets_init. Добавьте в тот же файл такой код:

function wpexamples_register_widget() {
    register_widget('WPExamples_Widget_Text');
}
add_action('widgets_init', 'wpexamples_register_widget');

Теперь в админке в разделе Внешний вид > Виджеты появится ваш виджет с названием WPExamples Текстовый виджет.

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

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

Добавляем поле выбора цвета

Для выбора цвета удобно использовать HTML5 input type="color". Изменим метод form() следующим образом:

public function form($instance) {
    $title = isset($instance['title']) ? $instance['title'] : '';
    $text = isset($instance['text']) ? $instance['text'] : '';
    $color = isset($instance['color']) ? $instance['color'] : '#000000';
    ?>
    <p>
        <label for="<?php echo esc_attr($this->get_field_id('title')); ?>"><?php _e('Заголовок:', 'wpexamples'); ?></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')); ?>"><?php _e('Текст:', 'wpexamples'); ?></label>
        <textarea class="widefat" 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')); ?>"><?php _e('Цвет текста:', 'wpexamples'); ?></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 = array();
    $instance['title'] = sanitize_text_field($new_instance['title']);
    $instance['text'] = sanitize_textarea_field($new_instance['text']);
    $instance['color'] = sanitize_hex_color($new_instance['color']);
    return $instance;
}

В методе widget() применим цвет к тексту:

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'])) {
        $color = !empty($instance['color']) ? $instance['color'] : '#000000';
        echo '<p style="color:' . esc_attr($color) . '">' . esc_html($instance['text']) . '</p>';
    }
    echo $args['after_widget'];
}

Используем плагины для упрощения работы с виджетами

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

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

Но если нужно уникальное решение, писать свой виджет — лучший вариант.