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

Автор: Евгения Ширяева | Опубликовано: 31.12.2025

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

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

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

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

Использование плагинов для отложенного показа popup

Плагин My Popup от WPSHOP

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

Для настройки отложенного показа через My Popup:

Установите и активируйте плагин.
Создайте новый popup в админке WPShop.
В настройках показа укажите задержку в секундах перед показом popup.
Можно настроить дополнительные условия — показывать только на определённых страницах, для новых пользователей и т. д.

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

Другие популярные плагины

Аналогично можно использовать плагины Popup Maker, OptinMonster, но они часто требуют платных тарифов для расширенных условий показа. My Popup из WPShop отлично подходит для русскоязычной аудитории и имеет понятный интерфейс.

Самостоятельная реализация отложенного показа popup в WordPress

Если вам нужен полный контроль и минимальный вес, можно реализовать отложенный показ с помощью JavaScript и PHP.

Пример простого popup с задержкой на 5 секунд

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

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

Создайте файл js/wppopup-delay-popup.js в папке темы с таким содержимым:

jQuery(document).ready(function($) {
    setTimeout(function() {
        if (!$('#wppopup-delay').length) {
            $('body').append('<div id="wppopup-delay" style="position:fixed;top:20%;left:50%;transform:translateX(-50%);background:#fff;padding:20px;box-shadow:0 0 15px rgba(0,0,0,0.3);z-index:9999;">' +
                '<h2>Подпишитесь на новости!</h2>' +
                '<p>Получайте свежие обновления прямо на почту.</p>' +
                '<button id="wppopup-close">Закрыть</button>' +
                '</div>');

            $('#wppopup-close').on('click', function() {
                $('#wppopup-delay').remove();
            });
        }
    }, 5000); // Задержка в 5000 мс (5 секунд)
});

Этот код через 5 секунд после загрузки страницы вставит в DOM простое всплывающее окно с кнопкой закрытия. Вы можете стилизовать окно по своему вкусу через CSS.

Расширение функционала: показ popup только один раз за сессию

Чтобы не беспокоить пользователей повторным показом popup при переходах, добавим cookie:

jQuery(document).ready(function($) {
    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;
    }

    if (!wppopup_getCookie('wppopup_seen')) {
        setTimeout(function() {
            if (!$('#wppopup-delay').length) {
                $('body').append('<div id="wppopup-delay" style="position:fixed;top:20%;left:50%;transform:translateX(-50%);background:#fff;padding:20px;box-shadow:0 0 15px rgba(0,0,0,0.3);z-index:9999;">' +
                    '<h2>Подпишитесь на новости!</h2>' +
                    '<p>Получайте свежие обновления прямо на почту.</p>' +
                    '<button id="wppopup-close">Закрыть</button>' +
                    '</div>');

                $('#wppopup-close').on('click', function() {
                    $('#wppopup-delay').remove();
                    wppopup_setCookie('wppopup_seen', 'yes', 1); // cookie на 1 день
                });
            }
        }, 5000);
    }
});

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

Интеграция с формами подписки и внешними сервисами

Popup — отличный инструмент для сбора email. Его можно связать с популярными сервисами email-маркетинга (Mailchimp, SendPulse, UniSender). Для этого достаточно вставить форму подписки с нужным action URL внутрь popup.

Пример вставки простой формы в popup:

var popupHTML = '
<div id="wppopup-delay" style="position:fixed;top:20%;left:50%;transform:translateX(-50%);background:#fff;padding:20px;box-shadow:0 0 15px rgba(0,0,0,0.3);z-index:9999;">
  <h2>Подпишитесь на новости!</h2>
  <form action="https://example.us1.list-manage.com/subscribe/post" method="POST" target="_blank">
    <input type="email" name="EMAIL" placeholder="Ваш email" required style="width:200px;padding:5px;" />
    <input type="submit" value="Подписаться" style="padding:5px 10px;" />
  </form>
  <button id="wppopup-close">Закрыть</button>
</div>';
$('body').append(popupHTML);

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

Советы по оптимизации и UX при использовании popup

Чтобы popup приносил пользу, а не раздражал пользователей, учитывайте следующие моменты:

Не показывайте popup сразу — используйте задержку от 5 до 15 секунд.
Не показывайте popup повторно слишком часто — применяйте cookie или localStorage для запоминания.
Адаптируйте popup под мобильные устройства — делайте окна удобными для чтения и закрытия.
Используйте персонализацию — показывайте разные popup для новых и постоянных посетителей.
Добавляйте качественный и релевантный контент — предложение должно быть интересно пользователю.

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