Как создать автоматический popup в WordPress при входе на сайт

Зачем нужен автоматический popup при входе на сайт

Автоматические popup окна, которые появляются сразу после захода пользователя на сайт, — отличный способ привлечь внимание, показать важные предложения, собрать email или просто приветствовать посетителя. Однако важно сделать такой popup ненавязчивым, чтобы не отпугнуть пользователя, а наоборот повысить конверсию и вовлечённость.

В этой статье мы рассмотрим, как создать такой popup в WordPress с помощью популярных плагинов и как написать собственный код для максимальной кастомизации и контроля.

Популярные плагины для автоматических popup в WordPress при загрузке страницы

Popup Maker

Popup Maker — один из самых популярных и мощных плагинов для создания popup-окон в WordPress. Он позволяет легко настроить автоматический показ popup при загрузке страницы, задать задержку, условия показа и даже сегментацию аудитории.

Чтобы создать автоматический popup:

1. Установите и активируйте плагин Popup Maker.
2. В админке перейдите в «Popup Maker» → «Добавить новый».
3. Создайте содержимое popup, используя визуальный редактор.
4. В настройках popup выберите триггер «Автоматический открытый» (Auto Open).
5. Настройте задержку появления (например, 3 секунды).
6. Опубликуйте popup и проверьте на сайте.

Hustle

Плагин Hustle отлично подходит для маркетинговых popup, включая автоматические всплывающие окна. Он интегрируется с почтовыми сервисами и позволяет гибко настраивать запуск popup по времени, при скролле или по клику.

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

Создание кастомного автоматического popup на чистом JavaScript для WordPress

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

Пример простого автоматического popup, который появляется через 3 секунды после загрузки страницы:

function wppopup_showPopup() {
  var popup = document.createElement('div');
  popup.id = 'wppopup-auto-popup';
  popup.style.position = 'fixed';
  popup.style.top = '50%';
  popup.style.left = '50%';
  popup.style.transform = 'translate(-50%, -50%)';
  popup.style.backgroundColor = '#fff';
  popup.style.padding = '20px';
  popup.style.boxShadow = '0 0 10px rgba(0,0,0,0.3)';
  popup.style.zIndex = '9999';
  popup.innerHTML = '<h2>Добро пожаловать!</h2><p>Подпишитесь на нашу рассылку, чтобы не пропускать новости.</p><button id="wppopup-close">Закрыть</button>';
  document.body.appendChild(popup);
  document.getElementById('wppopup-close').onclick = function() {
    document.body.removeChild(popup);
  };
}

window.addEventListener('load', function() {
  setTimeout(wppopup_showPopup, 3000);
});

Этот код создаёт всплывающее окно с простым приветствием и кнопкой закрытия. Через 3 секунды после загрузки страницы функция wppopup_showPopup добавляет popup в DOM.

Для подключения этого скрипта в WordPress можно добавить его в файл functions.php вашей темы или дочерней темы следующим образом:

function wppopup_enqueue_scripts() {
  wp_enqueue_script('wppopup-auto-popup', get_stylesheet_directory_uri() . '/js/wppopup-auto-popup.js', array(), '1.0', true);
}
add_action('wp_enqueue_scripts', 'wppopup_enqueue_scripts');

Где wppopup-auto-popup.js — файл с приведённым выше кодом.

Как улучшить кастомный popup: cookie и повторное появление

Одна из важных задач — не показывать popup пользователю постоянно при каждом заходе. Для этого используют cookie или localStorage.

Добавим в наш пример проверку cookie, чтобы popup показывался только один раз:

function wppopup_setCookie(name, value, days) {
  var expires = '';
  if (days) {
    var date = new Date();
    date.setTime(date.getTime() + days * 24 * 60 * 60 * 1000);
    expires = '; expires=' + date.toUTCString();
  }
  document.cookie = name + '=' + (value || '') + expires + '; path=/';
}

function wppopup_getCookie(name) {
  var nameEQ = name + '=';
  var ca = document.cookie.split(';');
  for(var i=0; i < ca.length; i++) {
    var c = ca[i];
    while (c.charAt(0)==' ') c = c.substring(1,c.length);
    if (c.indexOf(nameEQ) == 0) return c.substring(nameEQ.length,c.length);
  }
  return null;
}

function wppopup_showPopup() {
  if (wppopup_getCookie('wppopup_seen')) return;

  var popup = document.createElement('div');
  popup.id = 'wppopup-auto-popup';
  popup.style.position = 'fixed';
  popup.style.top = '50%';
  popup.style.left = '50%';
  popup.style.transform = 'translate(-50%, -50%)';
  popup.style.backgroundColor = '#fff';
  popup.style.padding = '20px';
  popup.style.boxShadow = '0 0 10px rgba(0,0,0,0.3)';
  popup.style.zIndex = '9999';
  popup.innerHTML = '<h2>Добро пожаловать!</h2><p>Подпишитесь на нашу рассылку, чтобы не пропускать новости.</p><button id="wppopup-close">Закрыть</button>';
  document.body.appendChild(popup);

  document.getElementById('wppopup-close').onclick = function() {
    document.body.removeChild(popup);
    wppopup_setCookie('wppopup_seen', 'yes', 7); // не показывать 7 дней
  };
}

window.addEventListener('load', function() {
  setTimeout(wppopup_showPopup, 3000);
});

Теперь popup появится только один раз за 7 дней для каждого пользователя, что улучшит UX и снизит раздражение.

Рекомендации по дизайну и UX для автоматических popup

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

• Задержка появления: не показывайте popup сразу при загрузке, лучше через 2–3 секунды.
• Возможность закрыть: обязательно должна быть кнопка закрытия и возможность закрыть popup по нажатию вне окна.
• Размер и оформление: popup не должен закрывать весь экран, должен быть адаптивным и не мешать основному контенту.
• Частота показа: используйте cookie или localStorage, чтобы не надоедать пользователям частым появлением popup.
• Контент: делайте popup полезным и релевантным — предложения, акции, подписка, приветствие.

Соблюдение этих правил повысит эффективность popup и не ухудшит пользовательский опыт.