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

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

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

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

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

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

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

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

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

Основные методы, которые нужно реализовать:

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

Рассмотрим пример кода с приставкой wptemp_ для функций и классов:

class Wptemp_Sample_Widget extends WP_Widget {
    public function __construct() {
        parent::__construct(
            'wptemp_sample_widget',
            'WPTEMP: Простой текстовый виджет',
            array('description' => 'Отображает произвольный текст')
        );
    }

    public function widget($args, $instance) {
        echo $args['before_widget'];
        if (!empty($instance['text'])) {
            echo $args['before_title'] . apply_filters('widget_title', $instance['title']) . $args['after_title'];
            echo '<p>' . esc_html($instance['text']) . '</p>';
        }
        echo $args['after_widget'];
    }

    public function form($instance) {
        $title = !empty($instance['title']) ? $instance['title'] : '';
        $text = !empty($instance['text']) ? $instance['text'] : '';
        ?>
        <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('text')); ?>">Текст:</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;
    }
}

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

function wptemp_register_sample_widget() {
    register_widget('Wptemp_Sample_Widget');
}
add_action('widgets_init', 'wptemp_register_sample_widget');

Расширяем виджет: добавление динамического контента и настроек

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

Добавим в настройки виджета выбор категории и количества записей для вывода.

class Wptemp_Recent_Posts_Widget extends WP_Widget {
    public function __construct() {
        parent::__construct(
            'wptemp_recent_posts',
            'WPTEMP: Последние записи из категории',
            array('description' => 'Выводит последние записи выбранной категории')
        );
    }

    public function widget($args, $instance) {
        echo $args['before_widget'];
        $title = !empty($instance['title']) ? $instance['title'] : 'Последние записи';
        $category = !empty($instance['category']) ? $instance['category'] : '';
        $number = !empty($instance['number']) ? absint($instance['number']) : 5;

        echo $args['before_title'] . apply_filters('widget_title', $title) . $args['after_title'];

        $query_args = array(
            'posts_per_page' => $number,
            'post_status' => 'publish',
        );

        if ($category) {
            $query_args['category_name'] = $category;
        }

        $recent_posts = new WP_Query($query_args);

        if ($recent_posts->have_posts()) {
            echo '<ul>';
            while ($recent_posts->have_posts()) {
                $recent_posts->the_post();
                echo '<li><a href="' . get_permalink() . '">' . get_the_title() . '</a></li>';
            }
            echo '</ul>';
            wp_reset_postdata();
        } else {
            echo '<p>Записи не найдены.</p>';
        }

        echo $args['after_widget'];
    }

    public function form($instance) {
        $title = !empty($instance['title']) ? $instance['title'] : '';
        $category = !empty($instance['category']) ? $instance['category'] : '';
        $number = !empty($instance['number']) ? $instance['number'] : 5;
        ?>
        <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('category')); ?>">Категория (slug):</label>
            <input class="widefat" id="<?php echo esc_attr($this->get_field_id('category')); ?>" name="<?php echo esc_attr($this->get_field_name('category')); ?>" type="text" value="<?php echo esc_attr($category); ?>">
            <small>Введите slug категории для фильтрации или оставьте пустым для всех записей.</small>
        </p>
        <p>
            <label for="<?php echo esc_attr($this->get_field_id('number')); ?>">Количество записей:</label>
            <input class="tiny-text" id="<?php echo esc_attr($this->get_field_id('number')); ?>" name="<?php echo esc_attr($this->get_field_name('number')); ?>" type="number" step="1" min="1" value="<?php echo esc_attr($number); ?>" size="3">
        </p>
        <?php
    }

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

function wptemp_register_recent_posts_widget() {
    register_widget('Wptemp_Recent_Posts_Widget');
}
add_action('widgets_init', 'wptemp_register_recent_posts_widget');

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

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

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

Рассмотрим два полезных плагина:

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

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

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

При создании собственных виджетов важно соблюдать несколько рекомендаций:

Безопасность данных: всегда фильтруйте и экранируйте входные данные в методах update() и выводите их с помощью функций esc_html(), esc_attr() и подобных.
Производительность: избегайте тяжёлых запросов в методе widget(). При необходимости кешируйте результаты с помощью Transients API.
Совместимость: следите за правильным использованием хуков и стандартов WordPress, чтобы виджет корректно работал с различными темами и плагинами.
Интерфейс настройки: делайте настройки простыми и понятными, добавляйте подсказки и описания.

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

Заключение

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

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