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

Автор: Лев Борисов | Опубликовано: 30.11.2025

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

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

Виджет — это блок с определённым функционалом, который можно добавить в области виджетов темы (sidebar, footer и т. д.). WordPress по умолчанию поставляется с набором стандартных виджетов: последние записи, календарь, текст и т. д. Однако если вам нужно вывести уникальную информацию или добавить интерактивность, стандартных возможностей может не хватить.

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

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

Для создания виджета нужно выполнить следующие шаги:

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

Рассмотрим каждый шаг на примере.

Создание класса виджета и конструктор

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

class WPLessons_Custom_Widget extends WP_Widget { 
    public function __construct() {
        parent::__construct(
            'wplessons_custom_widget', // ID виджета
            'WPLessons: Пользовательский виджет', // Название
            array( 'description' => 'Пример собственного виджета для WordPress' )
        );
    }
}

Метод widget — вывод содержимого

Метод widget() отвечает за отображение виджета на сайте. В него передаются аргументы темы и настройки, сохранённые пользователем.

В этом методе формируется HTML-вывод. Например, вы можете вывести заголовок, текст и любую другую информацию.

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'];
    }

    echo '<p>Это мой кастомный виджет, созданный с помощью WPLessons.</p>';

    echo $args['after_widget'];
}

Метод form — настройки виджета в админке

Для того чтобы администратор мог изменить параметры виджета, нужно реализовать метод form(). Здесь создаются поля формы с текущими значениями, например, поле для заголовка.

public function form( $instance ) {
    $title = ! empty( $instance['title'] ) ? $instance['title'] : 'Заголовок по умолчанию';
    ?>
    <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>
    <?php 
}

Метод update — сохранение настроек

Когда пользователь сохраняет настройки виджета, вызывается метод update(). Здесь нужно обработать и очистить входящие данные перед сохранением.

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

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

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

function wplessons_register_custom_widget() {
    register_widget( 'WPLessons_Custom_Widget' );
}
add_action( 'widgets_init', 'wplessons_register_custom_widget' );

Расширение функционала виджета: пример с выбором категории

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

Добавляем поле выбора категории в форму

public function form( $instance ) {
    $title = ! empty( $instance['title'] ) ? $instance['title'] : '';
    $category = ! empty( $instance['category'] ) ? $instance['category'] : '';
    $categories = get_categories();
    ?>
    <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
}

Обработка и сохранение выбранной категории

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

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

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'];
    }

    $query_args = array(
        'posts_per_page' => 5,
        'post_status' => 'publish',
    );
    if ( ! empty( $instance['category'] ) ) {
        $query_args['cat'] = $instance['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'];
}

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

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

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

Но для уникального функционала собственный виджет — лучший вариант.

Заключение

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

Используйте собственные виджеты, чтобы сделать ваш сайт на WordPress более мощным и удобным!