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

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

Зачем удалять параметры из URL без перезагрузки

Параметры URL, такие как ?filter=color&page=2, часто используются для передачи данных на клиент или сервер. Однако после применения фильтров или отправки формы они могут остаться в адресной строке и:

• выглядеть неопрятно и сбивать пользователя;
• создавать проблемы с SEO из-за дублирующегося контента;
• затруднять копирование и распространение ссылок.

Удаление параметров без перезагрузки улучшает UX и помогает контролировать URL для аналитики и SEO.

Используем History API для удаления параметров

Современные браузеры поддерживают JavaScript-интерфейс History API, позволяющий менять URL в адресной строке без обновления страницы. Метод history.replaceState() идеально подходит для этой задачи.

Пример функции, которая удаляет все параметры из текущего URL:

function journalxRemoveUrlParameters() {
  const url = new URL(window.location);
  url.search = '';
  history.replaceState(null, document.title, url);
}

Вызов journalxRemoveUrlParameters() очистит строку запроса в адресе, оставив только путь и хост.

Удаление конкретных параметров

Если нужно удалить не все параметры, а только некоторые, например utm_source или ref, используйте следующий подход:

function journalxRemoveSpecificParams(params) {
  const url = new URL(window.location);
  params.forEach(param => url.searchParams.delete(param));
  history.replaceState(null, document.title, url);
}

// Пример вызова:
journalxRemoveSpecificParams(['utm_source', 'ref']);

Автоматическое удаление параметров после отправки формы

Частая ситуация — пользователь отправляет форму GET-запросом, в URL появляются параметры, которые хочется убрать после обработки без перезагрузки.

Можно привязать функцию удаления к событию submit формы или к завершению AJAX-запроса.

document.querySelector('form').addEventListener('submit', function(e) {
  setTimeout(() => {
    journalxRemoveUrlParameters();
  }, 1000); // Ждём отправку и обработку
});

Для AJAX это делается в колбэке успешного ответа.

Обработка URL на стороне сервера в WordPress

Иногда полезно очищать URL и на сервере, например, чтобы избежать избыточных параметров в ссылках и пагинации.

Для этого можно использовать фильтр redirect_canonical, который отвечает за канонические редиректы:

add_filter('redirect_canonical', 'journalx_filter_redirect_canonical', 10, 2);
function journalx_filter_redirect_canonical($redirect_url, $requested_url) {
  $url = parse_url($requested_url);
  if (!empty($url['query'])) {
    parse_str($url['query'], $params);
    // Удаляем ненужные параметры
    unset($params['utm_source'], $params['ref']);
    $clean_query = http_build_query($params);
    $clean_url = $url['scheme'] . '://' . $url['host'] . $url['path'];
    if ($clean_query) {
      $clean_url .= '?' . $clean_query;
    }
    if ($redirect_url !== $clean_url) {
      return $clean_url;
    }
  }
  return $redirect_url;
}

Этот код удалит указанные параметры из URL и сделает редирект на чистый адрес.

Плагины для управления URL-параметрами

Если предпочитаете готовые решения, обратите внимание на плагины:

• Clearfy Pro — содержит функции для очистки URL, ускорения сайта и SEO-оптимизации.
• WPRemark — помогает управлять пользовательскими параметрами и перезаписать URL.

Особенности SEO при работе с параметрами

Управляя параметрами, важно не создавать канонические ошибки и не потерять трафик.

Рекомендуется:

• Использовать rel="canonical" на страницах с параметрами, указывая на чистый URL.
• Применять редиректы с параметризированных URL на чистые, если это уместно.
• Не удалять параметры, которые изменяют содержимое страницы критически (например, пагинация или сортировка), без соответствующей обработки.

В WordPress это можно сделать с помощью SEO-плагинов или вручную в теме.

Советы по реализации и отладке

При внедрении удаления параметров:

• Проверяйте кроссбраузерность — History API поддерживают все современные браузеры, но не старые версии IE.
• При работе с AJAX учитывайте, что URL меняется без перезагрузки — это важно для навигации и истории.
• Тестируйте поведение на мобильных устройствах.

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

Вывод

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