Как использовать AJAX для обновления контента в WordPress без перезагрузки страницы

Автор: Степан Борисов | Опубликовано: 26.02.2026

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

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

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

Главное преимущество — улучшение пользовательского опыта, так как страницы не перезагружаются полностью, а обновляется только часть контента. Это сокращает время загрузки и снижает нагрузку на сервер.

Однако для правильной работы AJAX в WordPress нужно учитывать особенности платформы, такие как использование административного файла admin-ajax.php и безопасность запросов.

Организация AJAX-запроса в WordPress: базовый пример

Рассмотрим пошагово, как реализовать AJAX для динамического обновления части контента, например, списка последних постов.

1. Добавляем JavaScript с AJAX-запросом

В файле темы или плагина подключаем JS, в котором отправляем AJAX-запрос:

jQuery(document).ready(function($) {
  $('#load-posts').on('click', function() {
    $.ajax({
      url: wordpresses_ajax_object.ajax_url,
      type: 'POST',
      data: {
        action: 'wordpresses_load_posts',
        nonce: wordpresses_ajax_object.nonce
      },
      success: function(response) {
        $('#posts-container').html(response);
      },
      error: function() {
        alert('Ошибка загрузки постов');
      }
    });
  });
});

Здесь мы слушаем клик по кнопке с id load-posts, отправляем POST-запрос с параметрами action и nonce для безопасности. В ответ получаем HTML с постами и вставляем его в контейнер posts-container.

2. Локализация скрипта и передача данных из PHP

Чтобы в JavaScript получить URL для AJAX и nonce, нужно локализовать скрипт:

function wordpresses_enqueue_scripts() {
  wp_enqueue_script('wordpresses-ajax-script', get_template_directory_uri() . '/js/ajax-script.js', ['jquery'], null, true);
  wp_localize_script('wordpresses-ajax-script', 'wordpresses_ajax_object', [
    'ajax_url' => admin_url('admin-ajax.php'),
    'nonce' => wp_create_nonce('wordpresses_nonce')
  ]);
}
add_action('wp_enqueue_scripts', 'wordpresses_enqueue_scripts');

Это позволяет JS безопасно обращаться к нужному URL и передавать nonce.

3. Обработка AJAX-запроса на стороне сервера

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

function wordpresses_load_posts_callback() {
  check_ajax_referer('wordpresses_nonce', 'nonce');

  $args = [
    'posts_per_page' => 5,
    'post_status' => 'publish'
  ];
  $query = new WP_Query($args);

  if ($query->have_posts()) {
    while ($query->have_posts()) {
      $query->the_post();
      echo '<h3>' . get_the_title() . '</h3>';
      echo '<div>' . get_the_excerpt() . '</div>';
    }
  } else {
    echo '<p>Посты не найдены</p>';
  }
  wp_die();
}
add_action('wp_ajax_wordpresses_load_posts', 'wordpresses_load_posts_callback');
add_action('wp_ajax_nopriv_wordpresses_load_posts', 'wordpresses_load_posts_callback');

Обработчик проверяет nonce, выполняет запрос последних 5 постов и выводит их заголовки и отрывки.

Особенности и советы по работе с AJAX в WordPress

Безопасность и nonce

Обязательно используйте check_ajax_referer для проверки nonce, чтобы предотвратить CSRF-атаки. Безопасность — ключевой момент при работе с AJAX-запросами.

Использование правильных хуков

Для обработки AJAX-запросов используйте хуки wp_ajax_ и wp_ajax_nopriv_ с названием действия. Первый — для авторизованных пользователей, второй — для гостей.

Оптимизация и кеширование

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

Пример расширения: загрузка постов с параметрами фильтрации

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

В JS добавим передачу параметра:

data: {
  action: 'wordpresses_load_posts',
  nonce: wordpresses_ajax_object.nonce,
  category: $('#category-select').val()
}

В PHP обработчике получим параметр и используем в запросе:

$category = sanitize_text_field($_POST['category'] ?? '');
$args = [
  'posts_per_page' => 5,
  'post_status' => 'publish'
];
if ($category) {
  $args['category_name'] = $category;
}
$query = new WP_Query($args);

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

Заключение по теме AJAX в WordPress

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

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