Как сделать промежуточную страницу перехода на внешний сайт в WordPress через JavaScript

В этой статье рассматривается задача безопасной и удобной организации перехода по внешним ссылкам на сайте WordPress, при которой пользователи сначала попадают на промежуточную страницу с предупреждением и только после подтверждения переходят на внешний ресурс. Для решения используется JavaScript и sessionStorage — ссылка передаётся между страницами без отображения ее в URL, что предотвращает создание множества параметрических URL и улучшает SEO сайта. Приведен полный пример такого решения с инструкциями по интеграции. — Dmytro Yakovenko 2025/09/19 13:21

Полный пример кода для сайта на Wordpress с использованием sessionStorage, чтобы при клике на ссылку происходил переход на страницу redirect без параметров, а на странице redirect динамически выводились предупреждение и кликабельная ссылка в блоке blockquote.

• При клике на нужную ссылку срабатывает JS, в sessionStorage сохраняется целевой URL, и происходит переход на /redirect/.
• Страница /redirect/ после загрузки получает URL из sessionStorage, выводит текст предупреждения и кликабельную ссылку в блоке <blockquote>.
• При обновлении страницы /redirect/ ссылка сохраняется в sessionStorage, так что блок не останется пустым.
• В адресной строке браузера будет чистый URL /redirect/ без параметров.
• Если sessionStorage пуст, показывается сообщение, что ссылка не найдена.

JavaScript для вставки перед </body>, через плагин Clearfy Pro или аналогичный.

<script>
document.addEventListener('click', function(event) {
  const link = event.target.closest('a');
  if (!link) return;
 
  if (link.closest('div.jet-listing.jet-listing-dynamic-link')) {
    const href = link.href;
    if (href.includes('/goto/')) {
      return; // исключаем ссылки с /goto/
    }
    if (href && href.startsWith('http')) {
      event.preventDefault();
      sessionStorage.setItem('redirect_url', href);
      window.location.href = '/redirect/';
    }
  }
});
</script>

Создаем в Wordpress страницу redirect. JavaScript для страницы /redirect/ лучше вставить в шаблон страницы redirect или через плагин Шорткодер (Shortcoder), чтобы этот код загружался только для страницы redirect.

<p>Сейчас вы переходите на внешний ресурс, который не контролируется нами.</p>
<blockquote></blockquote>
<script>
document.addEventListener('DOMContentLoaded', function() {
  const url = sessionStorage.getItem('redirect_url');
  const blockquote = document.querySelector('blockquote');
 
  if (url && blockquote) {
    blockquote.innerHTML = `Для перехода нажмите здесь <a href="${url}" target="_blank" rel="noopener noreferrer nofollow">${url}</a>`;
  } else if (blockquote) {
    blockquote.textContent = 'Ссылка для перехода не найдена.';
  }
});
</script>

В шаблоне страницы /redirect/ в HTML должен быть блок:

<blockquote></blockquote>

Или любой другой элемент, где хотите показывать предупреждение с ссылкой. Как видно выше я этот бок добавил в шорткод пункта 2.

Реализация перехода на внешние ресурсы через промежуточную страницу с использованием sessionStorage позволяет избежать создания большого количества параметризированных URL, улучшить SEO и повысить удобство и безопасность для пользователей. Предупреждающий текст и кликабельная ссылка на промежуточной странице создают прозрачный и дружественный опыт перехода. Такой подход легко интегрируется в WordPress через простые скрипты и плагины, что делает его практичным решением для многих сайтов.