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

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

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

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

Это улучшает UX, снижает нагрузку на сервер и ускоряет работу сайта.

Основные преимущества AJAX для шорткодов

• Обновление контента без перезагрузки страницы
• Повышение интерактивности и отзывчивости интерфейса
• Снижение нагрузки на сервер и клиент

Теперь перейдём к практической части.

Создание простого динамического шорткода с AJAX на WPengine

Для примера создадим шорткод, который будет отображать кнопку «Показать время сервера», а при нажатии – отображать текущее время с сервера без перезагрузки страницы.

Шаг 1. Регистрация шорткода и подключение скриптов

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

function wpengine_register_ajax_scripts() {
    wp_enqueue_script('wpengine-ajax-script', get_template_directory_uri() . '/js/wpengine-ajax.js', array('jquery'), null, true);
    wp_localize_script('wpengine-ajax-script', 'wpengine_ajax_obj', array(
        'ajax_url' => admin_url('admin-ajax.php'),
        'nonce'    => wp_create_nonce('wpengine_ajax_nonce')
    ));
}
add_action('wp_enqueue_scripts', 'wpengine_register_ajax_scripts');

function wpengine_dynamic_time_shortcode() {
    return '<button id="wpengine-time-btn">Показать время сервера</button><div id="wpengine-time-result"></div>';
}
add_shortcode('wpengine_time', 'wpengine_dynamic_time_shortcode');

Объяснение:

• Подключаем JavaScript файл wpengine-ajax.js, который будет обрабатывать AJAX-запросы.
• Используем wp_localize_script для передачи URL AJAX и nonce безопасности в JS.
• Создаём шорткод [wpengine_time], который выводит кнопку и пустой блок для результата.

Шаг 2. Создание AJAX-обработчика на PHP

Добавьте в тот же файл следующий обработчик:

function wpengine_ajax_get_server_time() {
    check_ajax_referer('wpengine_ajax_nonce', 'nonce');

    $time = current_time('H:i:s');
    wp_send_json_success(array('time' => $time));
}
add_action('wp_ajax_wpengine_get_time', 'wpengine_ajax_get_server_time');
add_action('wp_ajax_nopriv_wpengine_get_time', 'wpengine_ajax_get_server_time');

Объяснение:

• Проверяем nonce для безопасности.
• Получаем текущее время сервера в формате ЧЧ:ММ:СС.
• Отправляем ответ в формате JSON с использованием wp_send_json_success.
• Регистрируем обработчик для авторизованных и неавторизованных пользователей.

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

Создайте файл js/wpengine-ajax.js со следующим содержанием:

jQuery(document).ready(function($) {
    $('#wpengine-time-btn').on('click', function() {
        $.ajax({
            url: wpengine_ajax_obj.ajax_url,
            type: 'POST',
            data: {
                action: 'wpengine_get_time',
                nonce: wpengine_ajax_obj.nonce
            },
            success: function(response) {
                if(response.success) {
                    $('#wpengine-time-result').html('Текущее время сервера: ' + response.data.time);
                } else {
                    $('#wpengine-time-result').html('Ошибка при получении времени');
                }
            },
            error: function() {
                $('#wpengine-time-result').html('Ошибка AJAX запроса');
            }
        });
    });
});

Объяснение:

• При клике на кнопку отправляем POST-запрос на сервер с параметрами action и nonce.
• При успешном ответе выводим полученное время в блок #wpengine-time-result.
• Обрабатываем ошибки AJAX и сервера.

Расширение функционала: динамическая загрузка контента с передачей параметров

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

Создание кастомного типа записей

Для примера создадим CPT «Книги»:

function wpengine_register_books_cpt() {
    $args = array(
        'public' => true,
        'label'  => 'Книги',
        'supports' => array('title', 'editor')
    );
    register_post_type('wpengine_book', $args);
}
add_action('init', 'wpengine_register_books_cpt');

Создание шорткода с формой поиска

function wpengine_books_search_shortcode() {
    ob_start();
    ?>
    <form id="wpengine-books-search-form">
        <input type="text" name="search" placeholder="Поиск книг..." />
        <button type="submit">Найти</button>
    </form>
    <div id="wpengine-books-results"></div>
    <?php
    return ob_get_clean();
}
add_shortcode('wpengine_books_search', 'wpengine_books_search_shortcode');

AJAX обработчик поиска

function wpengine_ajax_books_search() {
    check_ajax_referer('wpengine_ajax_nonce', 'nonce');

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

    $args = array(
        'post_type' => 'wpengine_book',
        's' => $search,
        'posts_per_page' => 10
    );

    $query = new WP_Query($args);

    if($query->have_posts()) {
        $results = '<ul>';
        while($query->have_posts()) {
            $query->the_post();
            $results .= '<li><a href="' . get_permalink() . '">' . get_the_title() . '</a></li>';
        }
        $results .= '</ul>';
    } else {
        $results = '<p>Ничего не найдено.</p>';
    }
    wp_reset_postdata();

    wp_send_json_success(array('html' => $results));
}
add_action('wp_ajax_wpengine_books_search', 'wpengine_ajax_books_search');
add_action('wp_ajax_nopriv_wpengine_books_search', 'wpengine_ajax_books_search');

JS для отправки формы и отображения результатов

В файле js/wpengine-ajax.js добавьте:

jQuery(document).ready(function($) {
    $('#wpengine-books-search-form').on('submit', function(e) {
        e.preventDefault();
        var searchVal = $(this).find('input[name="search"]').val();

        $.ajax({
            url: wpengine_ajax_obj.ajax_url,
            method: 'POST',
            data: {
                action: 'wpengine_books_search',
                nonce: wpengine_ajax_obj.nonce,
                search: searchVal
            },
            success: function(response) {
                if(response.success) {
                    $('#wpengine-books-results').html(response.data.html);
                } else {
                    $('#wpengine-books-results').html('<p>Ошибка поиска.</p>');
                }
            },
            error: function() {
                $('#wpengine-books-results').html('<p>Ошибка AJAX запроса.</p>');
            }
        });
    });
});

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

Если вы хотите упростить реализацию AJAX-функционала или добавить динамические шорткоды без программирования, обратите внимание на следующие плагины:

• Clearfy Pro — оптимизация и расширение возможностей, включая удобные инструменты для AJAX и шорткодов.
• WPRemark — автоматизация отзывов с поддержкой AJAX-запросов.
• ABC Pagination — удобная пагинация с AJAX-подгрузкой контента.

Рекомендации по безопасности при работе с AJAX в WordPress

При реализации AJAX важно уделять внимание безопасности:

• Используйте wp_create_nonce и check_ajax_referer для защиты от CSRF-атак.
• Обрабатывайте и фильтруйте все входящие данные с помощью sanitize_text_field, intval и других функций санитизации.
• Ограничивайте права доступа к AJAX-обработчикам, если данные должны быть доступны только определённым ролям.

Следуя этим правилам, вы защитите сайт от большинства уязвимостей.