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

Автор: Екатерина Боброва | Опубликовано: 20.11.2025

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

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

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

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

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

Структура и основные методы виджета WordPress

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

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

Рассмотрим подробнее каждый метод и создадим пример виджета.

Пример: создание виджета "WPOnline: Последние статьи с кастомным заголовком"

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

1. Подключение и регистрация виджета

Для начала создадим класс и зарегистрируем его через хук widgets_init.

add_action('widgets_init', 'wponline_register_latest_posts_widget');
function wponline_register_latest_posts_widget() {
    register_widget('WPOnline_Latest_Posts_Widget');
}

2. Класс виджета с базовым функционалом

class WPOnline_Latest_Posts_Widget extends WP_Widget {
    public function __construct() {
        parent::__construct(
            'wponline_latest_posts',
            'WPOnline: Последние статьи',
            ['description' => 'Выводит последние посты с кастомным заголовком']
        );
    }

    public function widget($args, $instance) {
        echo $args['before_widget'];
        $title = !empty($instance['title']) ? $instance['title'] : 'Последние статьи';
        echo $args['before_title'] . apply_filters('widget_title', $title) . $args['after_title'];

        $query = new WP_Query(['posts_per_page' => 5]);
        if ($query->have_posts()) {
            echo '<ul>';
            while ($query->have_posts()) {
                $query->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'] : 'Последние статьи';
        ?>
        <p>
            <label for="<?php echo $this->get_field_id('title'); ?>">Заголовок:</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>
        <?php
    }

    public function update($new_instance, $old_instance) {
        $instance = [];
        $instance['title'] = (!empty($new_instance['title'])) ? strip_tags($new_instance['title']) : '';
        return $instance;
    }
}

Расширение виджета: добавление выбора количества постов и категорий

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

Обновленный метод form()

public function form($instance) {
    $title = !empty($instance['title']) ? $instance['title'] : 'Последние статьи';
    $number = !empty($instance['number']) ? absint($instance['number']) : 5;
    $category = !empty($instance['category']) ? absint($instance['category']) : 0;
    ?>
    <p>
        <label for="<?php echo $this->get_field_id('title'); ?>">Заголовок:</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('number'); ?>">Количество постов:</label>
        <input id="<?php echo $this->get_field_id('number'); ?>" name="<?php echo $this->get_field_name('number'); ?>" type="number" step="1" min="1" max="20" value="<?php echo esc_attr($number); ?>" size="3" />
    </p>
    <p>
        <label for="<?php echo $this->get_field_id('category'); ?>">Категория (ID):</label>
        <input id="<?php echo $this->get_field_id('category'); ?>" name="<?php echo $this->get_field_name('category'); ?>" type="number" step="1" min="0" value="<?php echo esc_attr($category); ?>" size="3" />
        <small>Оставьте 0 для всех категорий</small>
    </p>
    <?php
}

Обновленный метод widget()

public function widget($args, $instance) {
    echo $args['before_widget'];
    $title = !empty($instance['title']) ? $instance['title'] : 'Последние статьи';
    echo $args['before_title'] . apply_filters('widget_title', $title) . $args['after_title'];

    $number = !empty($instance['number']) ? absint($instance['number']) : 5;
    $category = !empty($instance['category']) ? absint($instance['category']) : 0;

    $query_args = ['posts_per_page' => $number];
    if ($category > 0) {
        $query_args['cat'] = $category;
    }

    $query = new WP_Query($query_args);

    if ($query->have_posts()) {
        echo '<ul>';
        while ($query->have_posts()) {
            $query->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'];
}

Как использовать созданный виджет на сайте

После добавления кода в файл плагина или functions.php вашей темы, перейдите в админку WordPress в раздел Внешний вид > Виджеты. Там найдете наш виджет "WPOnline: Последние статьи". Просто перетащите его в нужную область и настройте заголовок, количество постов и категорию.

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

Заключение: преимущества создания собственных виджетов

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