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

Автор: Артем Сорокин | Опубликовано: 05.01.2026

Автоматические поп-ап окна — эффективный способ привлечь внимание посетителей сайта, повысить конверсию и собрать контактные данные. В этой статье мы подробно рассмотрим, как создать автоматические поп-ап окна в WordPress, используя как готовые плагины, так и собственные решения на PHP и JavaScript. Вы узнаете, как настроить показ поп-апов по времени, по прокрутке страницы и по взаимодействию с пользователем.

Зачем нужны автоматические поп-ап окна в WordPress

Поп-апы позволяют:

Собрать email посетителей для рассылок.
Предложить скидки и акции.
Увеличить вовлеченность и время на сайте.
Показать важную информацию или уведомления.

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

Выбор плагина для автоматических поп-ап окон

Для большинства пользователей оптимальным вариантом будет использование плагинов. Рассмотрим несколько популярных решений:

1. My Popup

Плагин My Popup от WPShop позволяет легко создавать красивые и адаптивные поп-ап окна с множеством настроек. Среди ключевых функций:

Выбор триггеров: по времени, по прокрутке, при попытке ухода.
Гибкий дизайн с использованием визуального редактора.
Интеграция с популярными сервисами email-маркетинга.

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

2. Popup Maker

Бесплатный и мощный плагин с широкими возможностями. Позволяет создавать условия показа, таргетинг по страницам и пользовательским ролям. Поддерживает создание форм и мультимедийного контента внутри поп-апа.

Как создать простой автоматический поп-ап без плагинов

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

Пример кода для показа поп-апа через 10 секунд после загрузки страницы

<script>
document.addEventListener('DOMContentLoaded', function() {
    setTimeout(function() {
        var popup = document.createElement('div');
        popup.id = 'wpnotes-popup';
        popup.style.position = 'fixed';
        popup.style.top = '50%';
        popup.style.left = '50%';
        popup.style.transform = 'translate(-50%, -50%)';
        popup.style.background = '#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="wpnotes-popup-close">Закрыть</button>';
        document.body.appendChild(popup);

        document.getElementById('wpnotes-popup-close').onclick = function() {
            popup.style.display = 'none';
        };
    }, 10000); // 10000 мс = 10 секунд
});
</script>

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

Добавление условий показа и управления показом поп-апа

Чтобы не раздражать пользователей, рекомендуется показывать поп-ап не каждый раз. Для этого можно использовать localStorage или cookies.

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

<script>
document.addEventListener('DOMContentLoaded', function() {
    if (!localStorage.getItem('wpnotesPopupShown')) {
        setTimeout(function() {
            var popup = document.createElement('div');
            popup.id = 'wpnotes-popup';
            popup.style.position = 'fixed';
            popup.style.top = '50%';
            popup.style.left = '50%';
            popup.style.transform = 'translate(-50%, -50%)';
            popup.style.background = '#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="wpnotes-popup-close">Закрыть</button>';
            document.body.appendChild(popup);

            document.getElementById('wpnotes-popup-close').onclick = function() {
                popup.style.display = 'none';
                localStorage.setItem('wpnotesPopupShown', 'true');
            };
        }, 10000);
    }
});
</script>

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

Расширенные варианты: показ поп-ап по прокрутке или по попытке ухода

Часто поп-апы показывают не просто по таймеру, а по определенным событиям:

По прокрутке страницы: например, показать окно, когда пользователь пролистал 50% контента.
По намерению покинуть сайт (exit intent): когда пользователь двигает курсор к верхней части окна, что может означать закрытие вкладки.

Пример показа поп-апа при прокрутке 50% страницы

<script>
document.addEventListener('DOMContentLoaded', function() {
    function wpnotesShowPopup() {
        if (localStorage.getItem('wpnotesPopupShown')) return;

        var popup = document.createElement('div');
        popup.id = 'wpnotes-popup';
        popup.style.position = 'fixed';
        popup.style.top = '50%';
        popup.style.left = '50%';
        popup.style.transform = 'translate(-50%, -50%)';
        popup.style.background = '#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="wpnotes-popup-close">Закрыть</button>';
        document.body.appendChild(popup);

        document.getElementById('wpnotes-popup-close').onclick = function() {
            popup.style.display = 'none';
            localStorage.setItem('wpnotesPopupShown', 'true');
            window.removeEventListener('scroll', wpnotesCheckScroll);
        };
    }

    function wpnotesCheckScroll() {
        var scrollPosition = window.scrollY + window.innerHeight;
        var pageHeight = document.documentElement.scrollHeight;
        if (scrollPosition > pageHeight / 2) {
            wpnotesShowPopup();
        }
    }

    window.addEventListener('scroll', wpnotesCheckScroll);
});
</script>

Показ поп-апа при попытке ухода с сайта (exit intent)

Для реализации exit intent можно отслеживать движение мыши и показывать окно, если курсор покидает видимую область сверху:

<script>
document.addEventListener('DOMContentLoaded', function() {
    function wpnotesShowExitPopup() {
        if (localStorage.getItem('wpnotesExitPopupShown')) return;

        var popup = document.createElement('div');
        popup.id = 'wpnotes-exit-popup';
        popup.style.position = 'fixed';
        popup.style.top = '50%';
        popup.style.left = '50%';
        popup.style.transform = 'translate(-50%, -50%)';
        popup.style.background = '#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="wpnotes-exit-popup-close">Закрыть</button>';
        document.body.appendChild(popup);

        document.getElementById('wpnotes-exit-popup-close').onclick = function() {
            popup.style.display = 'none';
            localStorage.setItem('wpnotesExitPopupShown', 'true');
            document.removeEventListener('mouseout', wpnotesDetectExitIntent);
        };
    }

    function wpnotesDetectExitIntent(e) {
        if (e.clientY < 10 && !localStorage.getItem('wpnotesExitPopupShown')) {
            wpnotesShowExitPopup();
            document.removeEventListener('mouseout', wpnotesDetectExitIntent);
        }
    }

    document.addEventListener('mouseout', wpnotesDetectExitIntent);
});
</script>

Интеграция поп-ап с формами и email-сервисами

Чтобы поп-апы приносили реальную пользу, их часто интегрируют с формами подписки, которые отправляют данные в сервисы email-маркетинга. Плагин My Popup поддерживает интеграцию с Mailchimp, GetResponse и другими.

Если вы создаете форму вручную, можно использовать AJAX для отправки данных на сервер и сохранения их в базе или передачи в API. Пример AJAX-обработчика в functions.php темы:

add_action('wp_ajax_wpnotes_subscribe', 'wpnotes_subscribe_ajax_handler');
add_action('wp_ajax_nopriv_wpnotes_subscribe', 'wpnotes_subscribe_ajax_handler');

function wpnotes_subscribe_ajax_handler() {
    $email = sanitize_email($_POST['email']);
    if (!is_email($email)) {
        wp_send_json_error('Неверный email');
    }

    // Здесь можно добавить логику сохранения email или отправки в сервис

    wp_send_json_success('Спасибо за подписку!');
}

И пример JavaScript для отправки формы из поп-апа:

document.getElementById('wpnotes-subscribe-form').addEventListener('submit', function(e) {
    e.preventDefault();
    var email = this.elements['email'].value;

    fetch('<?php echo admin_url('admin-ajax.php'); ?>', {
        method: 'POST',
        headers: {'Content-Type': 'application/x-www-form-urlencoded'},
        body: 'action=wpnotes_subscribe&email=' + encodeURIComponent(email)
    })
    .then(response => response.json())
    .then(data => {
        alert(data.data);
        if (data.success) {
            document.getElementById('wpnotes-popup').style.display = 'none';
        }
    });
});

Заключение по созданию автоматических поп-ап окон в WordPress

Автоматические поп-ап окна — мощный инструмент для взаимодействия с посетителями сайта. Для быстрого запуска лучше использовать проверенные плагины, например, My Popup. Для более гибких и уникальных решений можно написать собственные скрипты с условием показа по таймеру, прокрутке или exit intent.

Обязательно учитывайте удобство пользователей и показывайте поп-апы умеренно, с возможностью легко закрыть окно. Также интегрируйте формы подписки с сервисами email-маркетинга для максимальной эффективности.