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

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

Что такое обновляемый шорткод и зачем он нужен

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

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

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

Создание базового шорткода WordPress

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

function wpqa_random_number_shortcode() {
    $number = rand(1, 100);
    return '<div id="wpqa-random-number">' . $number . '</div><button id="wpqa-refresh-btn">Обновить</button>';
}
add_shortcode('wpqa_random_number', 'wpqa_random_number_shortcode');

Этот шорткод выводит случайное число и кнопку. Но пока кнопка не работает — она не обновляет число.

Добавление поддержки AJAX для обновления шорткода

Чтобы шорткод мог обновляться без перезагрузки, нам нужно подключить JavaScript и настроить AJAX-запросы на стороне сервера.

Регистрация скрипта и локализация AJAX URL

Добавим следующий код для подключения скрипта и передачи URL AJAX:

function wpqa_enqueue_scripts() {
    wp_enqueue_script('wpqa-ajax-script', get_template_directory_uri() . '/js/wpqa-ajax.js', array('jquery'), null, true);
    wp_localize_script('wpqa-ajax-script', 'wpqa_ajax_obj', array(
        'ajax_url' => admin_url('admin-ajax.php'),
        'nonce'    => wp_create_nonce('wpqa_ajax_nonce')
    ));
}
add_action('wp_enqueue_scripts', 'wpqa_enqueue_scripts');

Важно: создайте файл wpqa-ajax.js в папке js вашей темы.

JavaScript для обработки клика и AJAX-запроса

В файле wpqa-ajax.js добавим следующий код:

jQuery(document).ready(function($) {
    $('#wpqa-refresh-btn').on('click', function(e) {
        e.preventDefault();
        $.ajax({
            url: wpqa_ajax_obj.ajax_url,
            type: 'POST',
            data: {
                action: 'wpqa_update_random_number',
                nonce: wpqa_ajax_obj.nonce
            },
            success: function(response) {
                if(response.success) {
                    $('#wpqa-random-number').text(response.data.number);
                } else {
                    alert('Ошибка обновления числа');
                }
            }
        });
    });
});

Обработка AJAX-запроса на PHP

Теперь добавим обработчик AJAX-запроса на стороне сервера:

function wpqa_ajax_update_random_number() {
    check_ajax_referer('wpqa_ajax_nonce', 'nonce');
    $number = rand(1, 100);
    wp_send_json_success(array('number' => $number));
}
add_action('wp_ajax_wpqa_update_random_number', 'wpqa_ajax_update_random_number');
add_action('wp_ajax_nopriv_wpqa_update_random_number', 'wpqa_ajax_update_random_number');

Здесь мы проверяем nonce для безопасности и возвращаем новое случайное число в формате JSON.

Дополнительные рекомендации и применение

Поддержка нескольких шорткодов на странице

Если на странице будет несколько таких шорткодов, то текущий код с фиксированными id не сработает корректно. Чтобы решить эту проблему, можно генерировать уникальные id для каждого экземпляра шорткода и передавать их в JavaScript через data-атрибуты.

Это позволит обновлять конкретный блок без конфликтов.

Обработка ошибок и UX

Для улучшения пользовательского опыта добавьте индикатор загрузки при отправке AJAX-запроса, обработку ошибок сети и понятные сообщения пользователю.

Применение для других задач

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

Итоговый код функции шорткода с уникальными id

Для примера, вот как можно модифицировать функцию шорткода, чтобы генерировать уникальный идентификатор:

function wpqa_random_number_shortcode() {
    static $instance = 0;
    $instance++;
    $number = rand(1, 100);
    $html = '<div id="wpqa-random-number-'. $instance .'">' . $number . '</div>';
    $html .= '<button class="wpqa-refresh-btn" data-target="wpqa-random-number-'. $instance .'">Обновить</button>';
    return $html;
}

И в JavaScript нужно будет изменить селекторы и обработку, чтобы работать с data-target кнопки.

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