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

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

Зачем нужен popup с отключением по времени

Часто popup используется для привлечения внимания к акции, подписке или важному сообщению. Однако если окно постоянно висит на экране, это может надоедать посетителям и снижать конверсию. Автоматическое закрытие через несколько секунд — оптимальный вариант, позволяющий донести важную информацию и не мешать просмотру контента.

Кроме того, отключение popup по времени помогает избежать проблем с SEO и снижает вероятность того, что посетитель сразу покинет сайт из-за агрессивного попапа.

Использование плагинов для popup с таймером отключения

Существует несколько популярных плагинов, которые поддерживают автоматическое закрытие popup через заданное время. Рассмотрим пару из них.

1. My Popup

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

Преимущества My Popup:

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

2. Popup Maker

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

Для автоматического закрытия через 10 секунд можно добавить следующий JavaScript в настройки popup:

setTimeout(function() {
    PUM.close(123); // 123 — ID вашего popup
}, 10000);

Где PUM.close() — метод плагина для программного закрытия окна.

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

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

HTML + CSS

<div id="wppopupru-popup" style="display:none; position:fixed; top:20%; left:50%; transform:translateX(-50%); background:#fff; border:1px solid #ccc; padding:20px; z-index:9999; box-shadow:0 0 10px rgba(0,0,0,0.3);">
  <h3>Важное сообщение</h3>
  <p>Это всплывающее окно автоматически закроется через 5 секунд.</p>
</div>

JavaScript

document.addEventListener('DOMContentLoaded', function wppopupruShowPopup() {
    var popup = document.getElementById('wppopupru-popup');
    if (!popup) return;
    popup.style.display = 'block';

    setTimeout(function wppopupruClosePopup() {
        popup.style.display = 'none';
    }, 5000); // 5000 мс = 5 секунд
});

Этот код можно добавить в файл темы или через плагин для вставки пользовательского кода. Такой popup появится при загрузке страницы и автоматически скроется через 5 секунд.

Как добавить cookie для запоминания закрытия popup

Чтобы не показывать popup повторно пользователю, который уже видел окно, нужно использовать cookie. Это улучшит UX и не будет раздражать постоянных посетителей.

Вот пример функции, которая показывает popup только если cookie отсутствует, и устанавливает cookie при закрытии:

function wppopupruSetCookie(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 wppopupruGetCookie(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;
}

document.addEventListener('DOMContentLoaded', function() {
    var popup = document.getElementById('wppopupru-popup');
    if (!popup) return;

    if (!wppopupruGetCookie('wppopupru_seen')) {
        popup.style.display = 'block';

        setTimeout(function() {
            popup.style.display = 'none';
            wppopupruSetCookie('wppopupru_seen', 'yes', 7); // cookie на 7 дней
        }, 5000);
    }
});

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

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

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

Кроме того, в My Popup есть возможность добавить пользовательский JavaScript, что позволяет внедрять приведённые выше скрипты для cookie и таймера отключения прямо в окно.

Советы по UX и SEO для popup с автоматическим отключением

1. Не ставьте слишком короткий таймер — 3–5 секунд обычно оптимальны, чтобы пользователь успел прочитать сообщение.

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

3. Используйте cookie или локальное хранилище, чтобы не показывать popup повторно слишком часто.

4. Не блокируйте контент сайта — popup должен быть ненавязчивым и легко закрываться.

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

Заключение

Создание popup с автоматическим отключением по времени в WordPress — задача вполне решаемая как с помощью плагинов, так и с помощью кастомного кода. Используйте cookie для контроля повторного показа и не забывайте про удобство пользователей.

Для лёгкого старта рекомендую попробовать плагин My Popup, а при необходимости — реализовать собственные сценарии через JavaScript, как показано в примерах выше.