Как создать popup в WordPress с отложенным запуском и уникальным контентом

В этой статье подробно разберём, как реализовать всплывающее окно (popup) в WordPress с отложенным запуском и возможностью отображать уникальный контент для разных пользователей. Такой подход помогает повысить вовлечённость посетителей и улучшить конверсию сайта, показывая релевантные сообщения в нужный момент.

Почему важно использовать отложенный запуск popup и уникальный контент

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

Уникальный контент в popup — это возможность адаптировать сообщение под конкретного пользователя. Например, показывать разные предложения для новых и постоянных клиентов или персонализированные скидки.

Реализация таких функций вручную требует знания JavaScript и PHP, поэтому мы рассмотрим пример с использованием кастомного кода и плагина My Popup от WPShop, который отлично подходит для таких задач.

Создаем popup с отложенным запуском на чистом JavaScript и PHP

Начнем с простого примера, где popup появится через 10 секунд после загрузки страницы, а контент будет зависеть от статуса пользователя (гость или авторизованный).

HTML и JavaScript для отложенного показа popup

Добавьте следующий код в шаблон вашей темы, например, в footer.php перед закрывающим тегом </body>:

<div id="wppopup-delayed" style="display:none; position:fixed; top:20%; left:50%; transform:translateX(-50%); background:#fff; padding:20px; box-shadow:0 2px 10px rgba(0,0,0,0.3); z-index:9999; max-width:300px;"><span id="wppopup-close" style="cursor:pointer; float:right; font-weight:bold;">&times;</span><div id="wppopup-content"></div></div>

<script>
document.addEventListener('DOMContentLoaded', function() {
  setTimeout(function() {
    var popup = document.getElementById('wppopup-delayed');
    popup.style.display = 'block';
  }, 10000); // 10 секунд

  document.getElementById('wppopup-close').addEventListener('click', function() {
    document.getElementById('wppopup-delayed').style.display = 'none';
  });
});
</script>

PHP для передачи уникального контента в popup

Чтобы динамически показать контент, например, имя пользователя или призыв к регистрации, добавьте в functions.php следующее:

function wppopup_get_dynamic_content() {
  if ( is_user_logged_in() ) {
    $current_user = wp_get_current_user();
    return 'Привет, ' . esc_html($current_user->display_name) . '! Спасибо, что вернулись. Узнайте о наших новых предложениях.';
  } else {
    return 'Добро пожаловать! Зарегистрируйтесь, чтобы получить скидку 10% на первый заказ.';
  }
}

function wppopup_insert_content_script() {
  $content = wppopup_get_dynamic_content();
  ?>
  <script>
    document.addEventListener('DOMContentLoaded', function() {
      var contentDiv = document.getElementById('wppopup-content');
      if (contentDiv) {
        contentDiv.innerHTML = '<?php echo esc_js($content); ?>';
      }
    });
  </script>
  <?php
}
add_action('wp_footer', 'wppopup_insert_content_script');

Этот код проверяет, авторизован ли пользователь, и выводит соответствующее сообщение в popup.

Использование плагина My Popup для расширенных возможностей

Плагин My Popup от WPShop позволяет создавать красивые popup без программирования с поддержкой отложенного показа, условий отображения и динамического контента.

Настройка отложенного показа

В настройках popup можно указать задержку показа в секундах или задать событие, при котором откроется окно (например, прокрутка страницы или попытка ухода пользователя).

Динамический контент через шорткоды

My Popup поддерживает шорткоды, что позволяет вставлять динамический контент. Например, вы можете использовать шорткод для отображения имени пользователя или специальных предложений.

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

[wp_user_name] <!-- выводит имя текущего пользователя -->

Условия отображения popup

Плагин позволяет показывать popup только на определённых страницах, для определённых ролей пользователей или в зависимости от источника трафика — это удобно для персонализации.

Реальные кейсы использования popup с отложенным запуском и уникальным контентом

1. Подписка на рассылку для новых посетителей

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

2. Приветственное предложение для зарегистрированных пользователей

Если пользователь авторизован, показываем ему эксклюзивное предложение или внутреннюю акцию, стимулируя повторные покупки и лояльность.

3. Напоминание о брошенной корзине

Для интернет-магазинов popup с напоминанием появляется через определённое время или при попытке ухода с сайта, что помогает вернуть клиента и повысить продажи.

Советы по оптимизации popup для лучшего UX и SEO

Обязательно учитывайте следующие моменты:

• Не показывайте popup сразу при загрузке страницы — используйте отложенный запуск.
• Позволяйте легко закрыть окно и не показывайте его повторно слишком часто.
• Оптимизируйте вес скриптов и стилей popup, чтобы не замедлять сайт.
• Используйте условия отображения, чтобы не раздражать постоянных пользователей.

Проверяйте, что popup не блокирует важный контент и корректно работает на мобильных устройствах.