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

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

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

Что такое виджет в WordPress и где он используется?

Виджет в WordPress – это небольшой блок с функционалом или контентом, который можно добавить в одну из заранее определённых областей темы, называемых сайдбарами (sidebar), футерами и другими зонами. Темы обычно предоставляют несколько таких областей, а в админ-панели в разделе «Внешний вид» → «Виджеты» или через кастомайзер пользователь может добавлять, удалять и настраивать виджеты.

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

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

В WordPress виджеты создаются через классы, которые наследуются от класса WP_Widget. Чтобы создать собственный виджет, нужно:

Создать класс, наследующий WP_Widget
Определить конструктор, где задаётся название и описание виджета
Реализовать метод widget() – вывод содержимого на фронтенде
Реализовать метод form() – вывод формы настроек в админке
Реализовать метод update() – обработка и сохранение настроек

Рассмотрим пример базового виджета для wpacademy, который выводит приветственное сообщение с настраиваемым текстом.

class WPACADEMY_Custom_Widget extends WP_Widget {
    public function __construct() {
        parent::__construct(
            'wpacademy_custom_widget', // ID виджета
            'WPAcademy: Приветственный виджет', // Название
            array( 'description' => 'Выводит приветственное сообщение с настраиваемым текстом' )
        );
    }

    public function widget( $args, $instance ) {
        echo $args['before_widget'];
        $title = apply_filters( 'widget_title', $instance['title'] ?? 'Приветствие' );
        $message = $instance['message'] ?? 'Добро пожаловать на WPAcademy!';

        if ( ! empty( $title ) ) {
            echo $args['before_title'] . esc_html( $title ) . $args['after_title'];
        }

        echo '<p>' . esc_html( $message ) . '</p>';
        echo $args['after_widget'];
    }

    public function form( $instance ) {
        $title = $instance['title'] ?? '';
        $message = $instance['message'] ?? '';
        ?>
        <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( 'message' ) ); ?>">Сообщение:</label> 
            <textarea class="widefat" rows="4" id="<?php echo esc_attr( $this->get_field_id( 'message' ) ); ?>" 
                      name="<?php echo esc_attr( $this->get_field_name( 'message' ) ); ?>"><?php echo esc_textarea( $message ); ?></textarea>
        </p>
        <?php
    }

    public function update( $new_instance, $old_instance ) {
        $instance = array();
        $instance['title'] = sanitize_text_field( $new_instance['title'] );
        $instance['message'] = sanitize_textarea_field( $new_instance['message'] );

        return $instance;
    }
}

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

После создания класса виджета его нужно зарегистрировать, чтобы WordPress его увидел и добавил в список доступных. Для этого используют хук widgets_init и функцию register_widget. Пример:

function wpacademy_register_custom_widget() {
    register_widget( 'WPACADEMY_Custom_Widget' );
}
add_action( 'widgets_init', 'wpacademy_register_custom_widget' );

Данный код обычно добавляют в файл functions.php активной темы или в отдельный плагин.

Добавление дополнительных настроек и расширение функционала виджета

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

Получение списка категорий для настройки

В методе form() получим категории с помощью функции get_categories() и выведем выпадающий список:

public function form( $instance ) {
    $title = $instance['title'] ?? '';
    $category = $instance['category'] ?? '';

    $categories = get_categories( array( 'hide_empty' => false ) );
    ?>
    <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' ) ); ?>">Категория:</label>
        <select id="<?php echo esc_attr( $this->get_field_id( 'category' ) ); ?>" 
                name="<?php echo esc_attr( $this->get_field_name( 'category' ) ); ?>">
            <option value="">Все категории</option>
            <?php foreach ( $categories as $cat ) : ?>
                <option value="<?php echo esc_attr( $cat->term_id ); ?>" <?php selected( $category, $cat->term_id ); ?>><?php echo esc_html( $cat->name ); ?></option>
            <?php endforeach; ?>
        </select>
    </p>
    <?php
}

Вывод записей из выбранной категории

В методе widget() выведем последние 5 записей выбранной категории:

public function widget( $args, $instance ) {
    echo $args['before_widget'];
    $title = apply_filters( 'widget_title', $instance['title'] ?? 'Последние записи' );
    $category = $instance['category'] ?? '';

    if ( ! empty( $title ) ) {
        echo $args['before_title'] . esc_html( $title ) . $args['after_title'];
    }

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

    if ( ! empty( $category ) ) {
        $query_args['cat'] = intval( $category );
    }

    $posts = new WP_Query( $query_args );

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

    echo $args['after_widget'];
}

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

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

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

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

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

При разработке виджетов важно соблюдать несколько правил:

Всегда экранируйте вывод с помощью esc_html(), esc_attr(), esc_url() и других функций, чтобы избежать XSS-уязвимостей.
Сохраняйте и обрабатывайте данные через функции очистки, например sanitize_text_field(), sanitize_textarea_field().
Минимизируйте количество запросов к базе данных, кэшируйте результаты, если нужно.
Тестируйте виджет на разных темах и версиях WordPress, чтобы избежать конфликтов.

Заключение

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