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

Автор: Ольга Громова | Опубликовано: 18.11.2025

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

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

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

Преимущества собственного виджета:

Полный контроль над содержимым и функционалом.
Возможность создавать интерактивные или динамические блоки.
Лёгкость интеграции с другими частями сайта.

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

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

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

Основные методы виджета:

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

Пример кода базового виджета для wppartner

class Wppartner_Widget_Recent_Posts extends WP_Widget {
    public function __construct() {
        parent::__construct(
            'wppartner_recent_posts',
            'Wppartner: Последние записи',
            array('description' => 'Выводит список последних записей с настройками')
        );
    }

    public function widget($args, $instance) {
        echo $args['before_widget'];
        $title = apply_filters('widget_title', $instance['title']);
        $number = !empty($instance['number']) ? absint($instance['number']) : 5;

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

        $query = new WP_Query(array(
            'posts_per_page' => $number,
            'post_status' => 'publish'
        ));

        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>';
        } else {
            echo '<p>Нет записей</p>';
        }
        wp_reset_postdata();

        echo $args['after_widget'];
    }

    public function form($instance) {
        $title = !empty($instance['title']) ? $instance['title'] : 'Последние записи';
        $number = !empty($instance['number']) ? absint($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('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['number'] = (int) $new_instance['number'];
        return $instance;
    }
}

// Регистрация виджета
function wppartner_register_widget() {
    register_widget('Wppartner_Widget_Recent_Posts');
}
add_action('widgets_init', 'wppartner_register_widget');

Настройка и расширение виджета

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

Для этого в метод form() добавляем новые поля, а в widget() — логику их обработки.

Добавление выбора категории

Чтобы добавить выбор категории, используем функцию get_categories() для вывода списка категорий в выпадающем списке.

public function form($instance) {
    $title = !empty($instance['title']) ? $instance['title'] : 'Последние записи';
    $number = !empty($instance['number']) ? absint($instance['number']) : 5;
    $category = !empty($instance['category']) ? $instance['category'] : 0;
    $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('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>
    <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')); ?>" class="widefat">
            <option value="0">Все категории</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 widget($args, $instance) {
    echo $args['before_widget'];
    $title = apply_filters('widget_title', $instance['title']);
    $number = !empty($instance['number']) ? absint($instance['number']) : 5;
    $category = !empty($instance['category']) ? absint($instance['category']) : 0;

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

    $query_args = array(
        'posts_per_page' => $number,
        'post_status' => 'publish'
    );
    if ($category) {
        $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>';
    } else {
        echo '<p>Нет записей</p>';
    }
    wp_reset_postdata();

    echo $args['after_widget'];
}

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

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

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

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

Эти плагины помогут вам гибко настраивать виджеты без глубоких знаний PHP и WordPress API.

Заключение

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