Как создать динамический shortcode в WordPress с применением AJAX

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

Что такое динамический shortcode и зачем он нужен

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

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

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

Основы создания AJAX в WordPress: что нужно знать

WordPress имеет встроенную систему для работы с AJAX, которая базируется на admin-ajax.php. Для корректной работы нужно зарегистрировать два обработчика — для авторизованных пользователей и для гостей (если требуется). Также важно правильно подключить JavaScript, который будет выполнять AJAX-запросы.

Для удобства и безопасности рекомендуется использовать локализацию скриптов через функцию wp_localize_script, чтобы передавать URL и nonce.

Это стандартный и проверенный способ взаимодействия клиента и сервера в WordPress.

Регистрация AJAX actions

В файле functions.php или в вашем плагине добавим обработчики:

add_action('wp_ajax_wpblock_get_data', 'wpblock_get_data_callback');
add_action('wp_ajax_nopriv_wpblock_get_data', 'wpblock_get_data_callback');

function wpblock_get_data_callback() {
    // Проверяем nonce для безопасности
    check_ajax_referer('wpblock_nonce', 'security');

    $param = isset($_POST['param']) ? sanitize_text_field($_POST['param']) : '';

    // Здесь логика получения данных
    $response = array();
    if ($param === 'example') {
        $response['content'] = 'Вы запросили пример данных через AJAX!';
    } else {
        $response['content'] = 'Параметр не распознан.';
    }

    wp_send_json_success($response);
    wp_die();
}

Создание shortcode с AJAX-запросом

Далее создадим сам shortcode, который выведет начальный HTML и подключит JavaScript для обработки клика и отправки AJAX-запроса.

function wpblock_dynamic_shortcode() {
    // Подключаем JS
    wp_enqueue_script('wpblock-ajax-script', plugin_dir_url(__FILE__) . 'js/wpblock-ajax.js', array('jquery'), '1.0', true);

    // Локализуем данные для JS
    wp_localize_script('wpblock-ajax-script', 'wpblock_ajax_obj', array(
        'ajax_url' => admin_url('admin-ajax.php'),
        'nonce'    => wp_create_nonce('wpblock_nonce'),
    ));

    ob_start();
    ?>
    <div id="wpblock-content">Здесь будет динамический контент.</div>
    <button id="wpblock-load-btn">Загрузить данные</button>
    <?php
    return ob_get_clean();
}
add_shortcode('wpblock_dynamic', 'wpblock_dynamic_shortcode');

Разбор кода shortcode

В функции wpblock_dynamic_shortcode мы подключаем скрипт с помощью wp_enqueue_script, чтобы он был загружен только на страницах, где используется shortcode. Через wp_localize_script передаем URL для AJAX и nonce для безопасности.

HTML содержит пустой контейнер <div id="wpblock-content">, куда мы будем подставлять ответ от сервера, и кнопку, которая запускает AJAX-запрос.

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

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

jQuery(document).ready(function($){
    $('#wpblock-load-btn').on('click', function(){
        $.ajax({
            url: wpblock_ajax_obj.ajax_url,
            method: 'POST',
            data: {
                action: 'wpblock_get_data',
                security: wpblock_ajax_obj.nonce,
                param: 'example'
            },
            success: function(response) {
                if(response.success) {
                    $('#wpblock-content').html(response.data.content);
                } else {
                    $('#wpblock-content').html('Ошибка получения данных');
                }
            },
            error: function(){
                $('#wpblock-content').html('Произошла ошибка при AJAX-запросе');
            }
        });
    });
});

Этот код навешивает событие на кнопку и при клике отправляет POST-запрос на сервер. В ответ получает JSON с данными и обновляет содержимое контейнера.

Примеры практического применения динамического shortcode с AJAX

С помощью такого подхода можно реализовать:

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

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

Расширение: передача параметров из shortcode

Изменим shortcode для приема параметра:

function wpblock_dynamic_shortcode($atts) {
    $atts = shortcode_atts(array('type' => 'default'), $atts, 'wpblock_dynamic');

    wp_enqueue_script('wpblock-ajax-script', plugin_dir_url(__FILE__) . 'js/wpblock-ajax.js', array('jquery'), '1.0', true);
    wp_localize_script('wpblock-ajax-script', 'wpblock_ajax_obj', array(
        'ajax_url' => admin_url('admin-ajax.php'),
        'nonce'    => wp_create_nonce('wpblock_nonce'),
        'type'     => $atts['type'],
    ));

    ob_start();
    ?>
    <div id="wpblock-content">Динамический контент для типа: <?php echo esc_html($atts['type']); ?></div>
    <button id="wpblock-load-btn">Загрузить данные</button>
    <?php
    return ob_get_clean();
}
add_shortcode('wpblock_dynamic', 'wpblock_dynamic_shortcode');

В JS можно заменить параметр param на wpblock_ajax_obj.type, чтобы сервер получал нужный контекст.

Заключение по теме создания динамического shortcode с AJAX

Использование AJAX для динамических shortcode — отличный способ добавить интерактивность и современный UX на сайт WordPress без сложных фреймворков. Благодаря встроенным в WordPress механизмам, таких как admin-ajax.php и локализация скриптов, реализация становится простой и надежной.

Рекомендуется внимательно следить за безопасностью, использовать nonce и санитайзеры при работе с входящими данными.

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