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

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

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

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

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

AJAX (Asynchronous JavaScript and XML) — это технология, позволяющая отправлять запросы к серверу и получать ответ в фоновом режиме. В WordPress есть встроенные способы работы с AJAX, которые мы и используем для создания динамического виджета.

Создание плагина для динамического виджета с AJAX

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

Начнем с создания базового виджета. Создайте файл wptests-dynamic-widget.php в папке wp-content/plugins/wptests-dynamic-widget/ и добавьте следующий код:

<?php
/*
Plugin Name: WPTTests Dynamic Widget
Description: Динамический виджет с загрузкой контента через AJAX
Version: 1.0
Author: WPTTests
*/

class WPTTests_Dynamic_Widget extends WP_Widget {
    public function __construct() {
        parent::__construct(
            'wptests_dynamic_widget',
            'WPTTests Динамический Виджет'
        );
        add_action('wp_enqueue_scripts', array($this, 'wptests_enqueue_scripts'));
        add_action('wp_ajax_wptests_load_content', array($this, 'wptests_load_content_callback'));
        add_action('wp_ajax_nopriv_wptests_load_content', array($this, 'wptests_load_content_callback'));
    }

    public function widget($args, $instance) {
        echo $args['before_widget'];
        echo '<div id="wptests-dynamic-content">Загрузка...</div>';
        echo $args['after_widget'];
    }

    public function wptests_enqueue_scripts() {
        wp_enqueue_script('wptests-ajax-script', plugin_dir_url(__FILE__) . 'wptests-ajax.js', array('jquery'), null, true);
        wp_localize_script('wptests-ajax-script', 'wptests_ajax_obj', array(
            'ajax_url' => admin_url('admin-ajax.php'),
            'nonce' => wp_create_nonce('wptests_nonce')
        ));
    }

    public function wptests_load_content_callback() {
        check_ajax_referer('wptests_nonce', 'nonce');

        // Здесь можно получить данные, например из базы или API
        $current_time = current_time('H:i:s');
        $response = "Текущее время на сервере: " . esc_html($current_time);

        wp_send_json_success($response);
    }
}

function wptests_register_dynamic_widget() {
    register_widget('WPTTests_Dynamic_Widget');
}
add_action('widgets_init', 'wptests_register_dynamic_widget');
?>

Шаг 2. Создание JavaScript для AJAX-запроса

Создайте файл wptests-ajax.js в той же папке с таким содержанием:

jQuery(document).ready(function($) {
    function wptests_load_widget_content() {
        $.ajax({
            url: wptests_ajax_obj.ajax_url,
            method: 'POST',
            data: {
                action: 'wptests_load_content',
                nonce: wptests_ajax_obj.nonce
            },
            success: function(response) {
                if(response.success) {
                    $('#wptests-dynamic-content').html(response.data);
                } else {
                    $('#wptests-dynamic-content').html('Ошибка при загрузке данных.');
                }
            },
            error: function() {
                $('#wptests-dynamic-content').html('Ошибка AJAX запроса.');
            }
        });
    }

    wptests_load_widget_content();
});

Разбор кода: как работает динамический виджет с AJAX

В конструкторе виджета мы регистрируем скрипты и AJAX-обработчики. Скрипт wptests-ajax.js загружается на фронтенде и сразу после загрузки страницы отправляет AJAX-запрос на сервер.

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

Ответ отправляется в формате JSON, и JavaScript обновляет содержимое виджета без перезагрузки страницы.

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

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

Для этого расширим класс виджета методами form и update:

public function form($instance) {
    $interval = !empty($instance['interval']) ? intval($instance['interval']) : 10;
    ?>
    <p>
        <label for="<?php echo $this->get_field_id('interval'); ?>">Интервал обновления (сек):</label>
        <input class="widefat" id="<?php echo $this->get_field_id('interval'); ?>" name="<?php echo $this->get_field_name('interval'); ?>" type="number" value="<?php echo esc_attr($interval); ?>" min="1" />
    </p>
    <?php
}

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

И передаем параметр в JavaScript с помощью wp_localize_script, чтобы обновлять данные с нужным интервалом:

wp_localize_script('wptests-ajax-script', 'wptests_ajax_obj', array(
    'ajax_url' => admin_url('admin-ajax.php'),
    'nonce' => wp_create_nonce('wptests_nonce'),
    'interval' => $instance['interval'] ?? 10
));

Изменим JS, чтобы повторять запрос с заданным интервалом:

jQuery(document).ready(function($) {
    function wptests_load_widget_content() {
        $.ajax({
            url: wptests_ajax_obj.ajax_url,
            method: 'POST',
            data: {
                action: 'wptests_load_content',
                nonce: wptests_ajax_obj.nonce
            },
            success: function(response) {
                if(response.success) {
                    $('#wptests-dynamic-content').html(response.data);
                } else {
                    $('#wptests-dynamic-content').html('Ошибка при загрузке данных.');
                }
            },
            error: function() {
                $('#wptests-dynamic-content').html('Ошибка AJAX запроса.');
            }
        });
    }

    wptests_load_widget_content();
    setInterval(wptests_load_widget_content, wptests_ajax_obj.interval * 1000);
});

Преимущества и возможные применения динамических виджетов

Динамические виджеты с AJAX полезны для отображения:

Свежих новостей и постов;
Статистики и счетчиков в реальном времени;
Данных из внешних API;
Результатов голосований и опросов;
Персонализированного контента для пользователя.

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

В итоге, описанный подход дает простую и расширяемую основу для создания интерактивных виджетов, которые легко адаптируются под конкретные задачи.