Как использовать AJAX в WordPress для форм и отзывов

Автор: Наталья Волкова | Опубликовано: 17.02.2026

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

Что такое AJAX и зачем он нужен в WordPress

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

Использование AJAX позволяет:

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

Основные шаги для реализации AJAX в WordPress

Для работы с AJAX в WordPress нужно:

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

Пример: AJAX-форма обратной связи с защитой от спама

1. HTML и JavaScript

Добавим форму в шаблон или через шорткод:

<form id="wpstudy-feedback-form">
  <input type="text" name="name" placeholder="Ваше имя" required />
  <input type="email" name="email" placeholder="Email" required />
  <textarea name="message" placeholder="Сообщение" required></textarea>
  <input type="hidden" name="security" value="<?php echo wp_create_nonce('wpstudy_feedback_nonce'); ?>" />
  <button type="submit">Отправить</button>
</form>
<div id="wpstudy-feedback-response"></div>

<script>
  jQuery(document).ready(function($){
    $('#wpstudy-feedback-form').on('submit', function(e){
      e.preventDefault();
      var data = $(this).serialize();
      $.post(wpstudy_ajax_object.ajax_url, data, function(response) {
        $('#wpstudy-feedback-response').html(response.data.message);
        if(response.success){
          $('#wpstudy-feedback-form')[0].reset();
        }
      });
    });
  });
</script>

Обратите внимание, что URL AJAX передается через локализацию скрипта в PHP.

2. PHP: регистрация AJAX-хуков и обработчика

add_action('wp_enqueue_scripts', 'wpstudy_enqueue_scripts');
function wpstudy_enqueue_scripts() {
    wp_enqueue_script('wpstudy-ajax', get_template_directory_uri() . '/js/wpstudy-ajax.js', array('jquery'), null, true);
    wp_localize_script('wpstudy-ajax', 'wpstudy_ajax_object', array(
        'ajax_url' => admin_url('admin-ajax.php')
    ));
}

add_action('wp_ajax_nopriv_wpstudy_send_feedback', 'wpstudy_send_feedback');
add_action('wp_ajax_wpstudy_send_feedback', 'wpstudy_send_feedback');

function wpstudy_send_feedback() {
    check_ajax_referer('wpstudy_feedback_nonce', 'security');

    $name = sanitize_text_field($_POST['name']);
    $email = sanitize_email($_POST['email']);
    $message = sanitize_textarea_field($_POST['message']);

    if (empty($name) || empty($email) || empty($message)) {
        wp_send_json_error(array('message' => 'Пожалуйста, заполните все поля.'));
    }

    if (!is_email($email)) {
        wp_send_json_error(array('message' => 'Введите корректный email.'));
    }

    $to = get_option('admin_email');
    $subject = 'Новое сообщение с сайта';
    $body = "Имя: $name\nEmail: $email\nСообщение: $message";
    $headers = array('Content-Type: text/plain; charset=UTF-8');

    $sent = wp_mail($to, $subject, $body, $headers);

    if ($sent) {
        wp_send_json_success(array('message' => 'Спасибо за ваше сообщение! Мы свяжемся с вами.'));
    } else {
        wp_send_json_error(array('message' => 'Ошибка при отправке письма. Попробуйте позже.'));
    }

    wp_die();
}

Обработка отзывов с помощью AJAX и пользовательских типов записей

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

Регистрация типа записи "Отзыв"

function wpstudy_register_review_cpt() {
    $labels = array(
        'name' => 'Отзывы',
        'singular_name' => 'Отзыв',
        'add_new' => 'Добавить отзыв',
        'add_new_item' => 'Добавить новый отзыв',
        'edit_item' => 'Редактировать отзыв',
        'new_item' => 'Новый отзыв',
        'view_item' => 'Просмотреть отзыв',
        'search_items' => 'Поиск отзывов',
        'not_found' => 'Отзывы не найдены',
        'menu_name' => 'Отзывы'
    );

    $args = array(
        'labels' => $labels,
        'public' => true,
        'has_archive' => true,
        'supports' => array('title', 'editor', 'author'),
        'show_in_rest' => true,
    );

    register_post_type('review', $args);
}
add_action('init', 'wpstudy_register_review_cpt');

AJAX-отправка отзыва

В форме собираем данные, например, имя и текст отзыва, и отправляем через AJAX на сервер, где создаем новый пост типа review с черновиком или на модерацию.

add_action('wp_ajax_nopriv_wpstudy_submit_review', 'wpstudy_submit_review');
add_action('wp_ajax_wpstudy_submit_review', 'wpstudy_submit_review');

function wpstudy_submit_review() {
    check_ajax_referer('wpstudy_review_nonce', 'security');

    $name = sanitize_text_field($_POST['name']);
    $content = sanitize_textarea_field($_POST['content']);

    if (empty($name) || empty($content)) {
        wp_send_json_error(array('message' => 'Заполните все поля.'));
    }

    $post_id = wp_insert_post(array(
        'post_title' => $name,
        'post_content' => $content,
        'post_type' => 'review',
        'post_status' => 'pending', // на модерацию
    ));

    if ($post_id) {
        wp_send_json_success(array('message' => 'Спасибо за отзыв! Он появится после проверки.'));
    } else {
        wp_send_json_error(array('message' => 'Ошибка при сохранении отзыва.'));
    }

    wp_die();
}

Советы по безопасности и оптимизации AJAX-запросов в WordPress

При использовании AJAX важно помнить:

Всегда проверяйте nonce через check_ajax_referer для защиты от CSRF.
Используйте функции очистки данных, такие как sanitize_text_field, sanitize_email и др., чтобы защитить от XSS и SQL-инъекций.
Минимизируйте объем данных, передаваемых через AJAX, чтобы ускорить ответ сервера.
Кэшируйте результаты при возможности, чтобы снизить нагрузку.
Используйте хуки wp_ajax_ и wp_ajax_nopriv_ для обработки запросов авторизованных и неавторизованных пользователей.

Использование плагинов для упрощения AJAX в WordPress

Если хочется ускорить разработку, можно обратить внимание на плагины, которые облегчают работу с AJAX:

Clearfy Pro — оптимизация и улучшение работы сайта с готовыми AJAX-решениями.
My Popup — плагин, который позволяет создавать интерактивные всплывающие формы с AJAX-поддержкой.

Использование готовых решений особенно полезно, если нужно быстро внедрить AJAX-функционал без глубоких знаний JavaScript и PHP.