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

Автор: Сергей Ершов | Опубликовано: 12.12.2025

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

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

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

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

Основы создания виджета в WordPress: класс WP_Widget и регистрация

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

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

После создания класса виджета его нужно зарегистрировать с помощью хука widgets_init.

Пример создания простого виджета «Приветствие»

class WPLancer_Widget_Greeting extends WP_Widget {
    public function __construct() {
        parent::__construct(
            'wplancer_greeting', // ID виджета
            'WPLancer: Приветствие', // Название
            ['description' => 'Простой виджет для вывода приветствия с именем']
        );
    }

    public function widget($args, $instance) {
        echo $args['before_widget'];
        $name = !empty($instance['name']) ? $instance['name'] : 'Гость';
        echo $args['before_title'] . 'Приветствие' . $args['after_title'];
        echo '<p>Привет, ' . esc_html($name) . '! Добро пожаловать на сайт.</p>';
        echo $args['after_widget'];
    }

    public function form($instance) {
        $name = !empty($instance['name']) ? $instance['name'] : '';
        ?>
        <p>
            <label for="<?php echo $this->get_field_id('name'); ?>">Имя:</label>
            <input class="widefat" id="<?php echo $this->get_field_id('name'); ?>" name="<?php echo $this->get_field_name('name'); ?>" type="text" value="<?php echo esc_attr($name); ?>">
        </p>
        <?php
    }

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

function wplancer_register_greeting_widget() {
    register_widget('WPLancer_Widget_Greeting');
}
add_action('widgets_init', 'wplancer_register_greeting_widget');

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

Расширенные возможности виджетов: использование AJAX и динамического контента

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

Для реализации AJAX в виджете следует:

Добавить JavaScript с обработчиком события и AJAX-запросом.
Зарегистрировать AJAX-обработчик в PHP через хуки wp_ajax_ и wp_ajax_nopriv_.
Передавать nonce для безопасности.

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

Пример AJAX-виджета с динамическим выводом

class WPLancer_Widget_Quote extends WP_Widget {
    public function __construct() {
        parent::__construct('wplancer_quote', 'WPLancer: Случайная цитата', ['description' => 'Выводит случайную цитату по кнопке']);
    }

    public function widget($args, $instance) {
        echo $args['before_widget'];
        echo '<div id="wplancer-quote-content">Нажмите кнопку, чтобы получить цитату.</div>';
        echo '<button id="wplancer-quote-button">Показать цитату</button>';
        echo $args['after_widget'];
        $this->enqueue_scripts();
    }

    public function enqueue_scripts() {
        wp_enqueue_script('wplancer-quote-js', plugin_dir_url(__FILE__) . 'js/wplancer-quote.js', ['jquery'], null, true);
        wp_localize_script('wplancer-quote-js', 'wplancerQuoteData', [
            'ajax_url' => admin_url('admin-ajax.php'),
            'nonce' => wp_create_nonce('wplancer_quote_nonce')
        ]);
    }

    public function form($instance) {
        echo '<p>Настроек нет</p>';
    }

    public function update($new_instance, $old_instance) {
        return [];
    }
}

function wplancer_register_quote_widget() {
    register_widget('WPLancer_Widget_Quote');
}
add_action('widgets_init', 'wplancer_register_quote_widget');

// AJAX обработчик
function wplancer_handle_ajax_quote() {
    check_ajax_referer('wplancer_quote_nonce', 'nonce');
    $quotes = [
        'Слава — дитя труда.',
        'Кто ищет, тот всегда найдёт.',
        'Лучший способ предсказать будущее — создать его.',
        'Делай сегодня то, что другие не хотят.'
    ];
    $quote = $quotes[array_rand($quotes)];
    wp_send_json_success($quote);
}
add_action('wp_ajax_wplancer_get_quote', 'wplancer_handle_ajax_quote');
add_action('wp_ajax_nopriv_wplancer_get_quote', 'wplancer_handle_ajax_quote');

JS файл wplancer-quote.js (положите его в папку js плагина или темы):

jQuery(document).ready(function($) {
    $('#wplancer-quote-button').on('click', function() {
        $.ajax({
            url: wplancerQuoteData.ajax_url,
            method: 'POST',
            data: {
                action: 'wplancer_get_quote',
                nonce: wplancerQuoteData.nonce
            },
            success: function(response) {
                if(response.success) {
                    $('#wplancer-quote-content').text(response.data);
                } else {
                    $('#wplancer-quote-content').text('Ошибка загрузки цитаты');
                }
            },
            error: function() {
                $('#wplancer-quote-content').text('Ошибка AJAX запроса');
            }
        });
    });
});

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

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

Widget Options — добавляет гибкие настройки отображения виджетов по страницам, устройствам и ролям пользователей.
WP Custom Widget — позволяет создавать виджеты с настраиваемым HTML, CSS и JS без программирования.
Clearfy Pro с ссылкой на wpshop.ru — оптимизирует работу сайта и помогает управлять виджетами и другими элементами.

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

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

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

Всегда экранируйте вывод через esc_html(), esc_attr() и другие функции WordPress.
Используйте nonce и проверяйте их при обработке AJAX-запросов.
Минимизируйте использование тяжелых запросов и кешируйте результаты, если возможно.
Делайте настройки виджета удобными и понятными, чтобы пользователи могли легко менять параметры.
Тестируйте виджет на разных темах и с разными плагинами, чтобы избежать конфликтов.

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