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

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

Почему важно менять URL без перезагрузки

Стандартный AJAX-запрос обновляет данные на странице, но URL при этом не меняется. Это приводит к следующим проблемам:

• Пользователь не может поделиться ссылкой на текущее состояние сайта.
• При обновлении страницы теряется текущее состояние (фильтры, пагинация и т.п.).
• Поисковые системы не индексируют динамически загружаемый контент.

Использование History API позволяет решить эти проблемы, сохраняя динамичность интерфейса и корректность URL.

Основы History API для динамического изменения URL

В JavaScript есть несколько методов для работы с историей браузера и URL без полной перезагрузки:

• history.pushState(state, title, url) – добавляет новое состояние в историю и меняет URL в адресной строке.
• history.replaceState(state, title, url) – заменяет текущее состояние без добавления новой записи в историю.
• Событие popstate – срабатывает при навигации назад или вперёд по истории.

Эти методы позволяют обновлять URL динамически, сохраняя при этом состояние страницы.

Пример: изменение URL при AJAX-запросе в WordPress

Рассмотрим пример, где мы делаем AJAX-запрос для фильтрации записей, и при этом меняем URL в браузере.

jQuery(document).ready(function($) {
  $('#filter-form').on('submit', function(e) {
    e.preventDefault();
    var filterVal = $('#filter-input').val();
    $.ajax({
      url: ajaxurl, // стандартный глобальный объект в WordPress
      method: 'POST',
      data: {
        action: 'wptem_filter_posts',
        filter: filterVal
      },
      success: function(response) {
        $('#posts-container').html(response);
        // Меняем URL без перезагрузки
        var newUrl = window.location.protocol + '//' + window.location.host + window.location.pathname + '?filter=' + encodeURIComponent(filterVal);
        history.pushState({filter: filterVal}, '', newUrl);
      }
    });
  });
  // Обработка навигации назад/вперёд
  window.onpopstate = function(event) {
    if(event.state && event.state.filter) {
      $('#filter-input').val(event.state.filter);
      // Здесь можно повторно сделать AJAX-запрос с нужным фильтром
    }
  };
});

В этом коде мы отправляем AJAX-запрос на сервер, получаем отфильтрованные записи и меняем URL с помощью history.pushState. Также обрабатываем событие навигации в истории, чтобы корректно восстанавливать состояние фильтра.

Создание обработчика AJAX в WordPress для фильтрации

Для указанного выше клиента нужен серверный обработчик, который вернёт отфильтрованные записи.

add_action('wp_ajax_wptem_filter_posts', 'wptem_ajax_filter_posts');
add_action('wp_ajax_nopriv_wptem_filter_posts', 'wptem_ajax_filter_posts');

function wptem_ajax_filter_posts() {
  $filter = isset($_POST['filter']) ? sanitize_text_field($_POST['filter']) : '';

  $args = [
    'post_type' => 'post',
    's' => $filter,
    'posts_per_page' => 10
  ];

  $query = new WP_Query($args);

  if($query->have_posts()) {
    while($query->have_posts()) {
      $query->the_post();
      echo '<h2>' . get_the_title() . '</h2>';
      echo '<div>' . get_the_excerpt() . '</div>';
    }
  } else {
    echo '<p>Публикаций не найдено.</p>';
  }
  wp_die();
}

Этот PHP-код принимает параметр фильтрации, формирует запрос WordPress и выводит заголовки и краткое описание записей.

Обработка состояния при загрузке страницы

Чтобы при переходе по URL с параметром ?filter=значение сразу применить фильтр, добавим код, который при загрузке страницы проверяет параметр и выполняет AJAX-запрос:

jQuery(document).ready(function($) {
  var urlParams = new URLSearchParams(window.location.search);
  var filterParam = urlParams.get('filter');
  if(filterParam) {
    $('#filter-input').val(filterParam);
    // Запускаем AJAX-запрос с фильтром
    $('#filter-form').submit();
  }
});

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

Советы по совместимости и SEO

При использовании динамического изменения URL важно:

• Убедиться, что серверный код корректно обрабатывает URL с параметрами, чтобы поисковые роботы видели соответствующий контент.
• Использовать history.replaceState в случаях, когда не нужно создавать новую запись в истории, например при загрузке страницы с параметрами.
• Обеспечить корректную работу кнопок назад и вперёд браузера, обрабатывая событие popstate.

Использование плагинов для упрощения работы с AJAX и URL

Если вы предпочитаете готовые решения, обратите внимание на плагины, которые упрощают работу с AJAX и History API:

• ABC Pagination – удобный плагин для AJAX пагинации с поддержкой изменения URL.
• WPRemark – плагин для создания отзывов с AJAX и динамическим обновлением.

Использование таких плагинов позволяет быстрее внедрить функционал без глубокого погружения в код.

Заключение

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