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

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

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

Почему использовать AJAX в виджетах WordPress

Традиционно виджеты в WordPress выводят статический HTML-код, обновляющийся только при перезагрузке страницы. Однако динамический контент, загружаемый через AJAX, позволяет подгружать данные по запросу пользователя или по таймеру, не нарушая UX.

Примеры применения AJAX в виджетах:

Подгрузка последних комментариев без перезагрузки
Динамическое обновление курсов валют, погоды или других внешних данных
Формы обратной связи с моментальной проверкой и отправкой

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

Создание базового виджета WordPress

Начнем с создания простого виджета. Для этого создайте в папке темы или плагина файл class-wpbit-ajax-widget.php с классом, наследующим WP_Widget.

class WPBIT_Ajax_Widget extends WP_Widget {
    public function __construct() {
        parent::__construct(
            'wpbit_ajax_widget',
            'WPBIT AJAX Виджет',
            ['description' => 'Пример виджета с поддержкой AJAX']
        );
    }

    public function widget($args, $instance) {
        echo $args['before_widget'];
        echo '<div id="wpbit-ajax-content">Значение счетчика: <span id="wpbit-counter">0</span></div>';
        echo '<button id="wpbit-refresh-btn">Обновить счетчик</button>';
        echo $args['after_widget'];
    }

    public function form($instance) {
        // Можно добавить настройки виджета
    }

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

Далее зарегистрируем виджет в WordPress:

function wpbit_register_ajax_widget() {
    register_widget('WPBIT_Ajax_Widget');
}
add_action('widgets_init', 'wpbit_register_ajax_widget');

Добавление AJAX функционала

Для реализации AJAX-запроса в WordPress необходимо зарегистрировать обработчик в PHP и подключить скрипт с JavaScript, который будет инициировать запросы.

Регистрация AJAX обработчика в PHP

Добавим в файл плагина или темы следующий код:

function wpbit_ajax_counter_callback() {
    // Генерируем случайное число как пример данных
    $counter_value = rand(1, 1000);
    wp_send_json_success(['counter' => $counter_value]);
}
add_action('wp_ajax_wpbit_get_counter', 'wpbit_ajax_counter_callback');
add_action('wp_ajax_nopriv_wpbit_get_counter', 'wpbit_ajax_counter_callback');

Этот обработчик будет возвращать JSON с новым значением счетчика.

Подключение JavaScript для вызова AJAX

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

function wpbit_enqueue_widget_scripts() {
    wp_enqueue_script('wpbit-ajax-widget', get_template_directory_uri() . '/js/wpbit-ajax-widget.js', ['jquery'], null, true);
    wp_localize_script('wpbit-ajax-widget', 'wpbit_ajax_obj', [
        'ajax_url' => admin_url('admin-ajax.php')
    ]);
}
add_action('wp_enqueue_scripts', 'wpbit_enqueue_widget_scripts');

Создайте файл js/wpbit-ajax-widget.js с содержимым:

jQuery(document).ready(function($) {
    $('#wpbit-refresh-btn').on('click', function(e) {
        e.preventDefault();
        $.ajax({
            url: wpbit_ajax_obj.ajax_url,
            method: 'POST',
            data: {
                action: 'wpbit_get_counter'
            },
            success: function(response) {
                if (response.success) {
                    $('#wpbit-counter').text(response.data.counter);
                }
            },
            error: function() {
                alert('Ошибка при запросе данных');
            }
        });
    });
});

Расширение функционала виджета: настройки и кэширование

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

Добавление настроек в форму виджета

В метод form() класса виджета добавляем поля для минимального и максимального значения:

public function form($instance) {
    $min = !empty($instance['min']) ? intval($instance['min']) : 1;
    $max = !empty($instance['max']) ? intval($instance['max']) : 1000;
    ?>
    <p>
        <label for="<?php echo $this->get_field_id('min'); ?>">Минимальное значение:</label>
        <input class="widefat" id="<?php echo $this->get_field_id('min'); ?>" name="<?php echo $this->get_field_name('min'); ?>" type="number" value="<?php echo esc_attr($min); ?>" />
    </p>
    <p>
        <label for="<?php echo $this->get_field_id('max'); ?>">Максимальное значение:</label>
        <input class="widefat" id="<?php echo $this->get_field_id('max'); ?>" name="<?php echo $this->get_field_name('max'); ?>" type="number" value="<?php echo esc_attr($max); ?>" />
    </p>
    <?php
}

Изменение AJAX обработчика с учётом настроек

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

В JS добавим передачу параметров:

data: {
    action: 'wpbit_get_counter',
    min: 1, // можно брать из data-атрибутов
    max: 1000
},

В PHP обработчике учтём эти параметры:

function wpbit_ajax_counter_callback() {
    $min = isset($_POST['min']) ? intval($_POST['min']) : 1;
    $max = isset($_POST['max']) ? intval($_POST['max']) : 1000;
    if ($min > $max) {
        list($min, $max) = [$max, $min];
    }
    $counter_value = rand($min, $max);
    wp_send_json_success(['counter' => $counter_value]);
}

Кэширование результата AJAX

Для оптимизации можно сохранять сгенерированное значение в транзиент на несколько минут:

function wpbit_ajax_counter_callback() {
    $min = isset($_POST['min']) ? intval($_POST['min']) : 1;
    $max = isset($_POST['max']) ? intval($_POST['max']) : 1000;
    if ($min > $max) {
        list($min, $max) = [$max, $min];
    }
    $cache_key = 'wpbit_counter_' . $min . '_' . $max;
    $counter_value = get_transient($cache_key);
    if ($counter_value === false) {
        $counter_value = rand($min, $max);
        set_transient($cache_key, $counter_value, 5 * MINUTE_IN_SECONDS);
    }
    wp_send_json_success(['counter' => $counter_value]);
}

Используемые плагины для упрощения разработки виджетов с AJAX

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

Widget Logic — позволяет управлять отображением виджетов с помощью условий PHP.
AJAX Load More — плагин, который упрощает подгрузку контента через AJAX и может быть интегрирован в виджеты.
WP REST API — использовать REST API WordPress для более гибкой работы с AJAX и получением данных.

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

Подведение итогов и практические советы

Создание виджета с поддержкой AJAX в WordPress — мощный способ улучшить интерфейс сайта. Важно продумывать удобство пользователя и производительность:

Минимизируйте количество AJAX-запросов
Используйте кэширование для снижения нагрузки
Обрабатывайте ошибки и давайте пользователю понятную обратную связь
Добавляйте настройки для гибкости виджета

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