Как удалить всплывающее окно после закрытия в WordPress

Всплывающие окна (popups) — отличный инструмент для привлечения внимания и повышения конверсии на сайте WordPress. Но иногда возникает задача: как полностью удалить всплывающее окно после того, как пользователь его закрыл, чтобы оно не появлялось повторно? В этой статье мы подробно разберём, как реализовать это на практике, рассмотрим популярные плагины и приведём примеры кода для самостоятельной реализации.

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

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

Реализовать удаление можно несколькими способами, например, с помощью cookie, localStorage или сессий, чтобы запомнить выбор пользователя. Важно сделать это корректно, чтобы popup не появлялся повторно, пока это не нужно.

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

1. Popup Maker

Popup Maker — один из самых популярных плагинов для создания и управления popup в WordPress. Он имеет встроенную поддержку cookie для контроля повторного отображения окна.

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

• Перейти в раздел "Targeting" и включить опцию установки cookie при закрытии popup.
• Настроить время действия cookie, чтобы popup не показывался повторно в течение выбранного периода.

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

2. OptinMonster

OptinMonster — платный плагин с продвинутыми настройками поведения popup. Позволяет легко настроить удаление popup после закрытия с помощью cookie и localStorage. Поддерживает условия показа на основе действий пользователя.

После закрытия окна OptinMonster автоматически ставит cookie, предотвращающую повторное отображение.

Реализация удаления popup через код в WordPress

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

Шаг 1. Отображение popup

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

function wppopup_show_popup() {
    if (!isset($_COOKIE['wppopup_closed'])) {
        echo '<div id="wppopup" style="position:fixed;top:20%;left:50%;transform:translateX(-50%);background:#fff;padding:20px;box-shadow:0 0 10px rgba(0,0,0,0.5);z-index:9999;">'
            . '<p>Подпишитесь на нашу рассылку!</p>'
            . '<button id="wppopup_close">Закрыть</button>'
            . '</div>';
    }
}
add_action('wp_footer', 'wppopup_show_popup');

Шаг 2. Скрытие и установка cookie через JavaScript

Добавим скрипт, который при клике на кнопку «Закрыть» скроет popup и установит cookie на 7 дней, чтобы окно не появлялось повторно:

function wppopup_scripts() {
    ?>
    <script>
    document.addEventListener('DOMContentLoaded', function() {
        var closeBtn = document.getElementById('wppopup_close');
        if (closeBtn) {
            closeBtn.addEventListener('click', function() {
                var popup = document.getElementById('wppopup');
                if (popup) {
                    popup.style.display = 'none';
                }
                var expires = new Date();
                expires.setTime(expires.getTime() + 7 * 24 * 60 * 60 * 1000); // 7 дней
                document.cookie = 'wppopup_closed=true;expires=' + expires.toUTCString() + ';path=/';
            });
        }
    });
    </script>
    <?php
}
add_action('wp_footer', 'wppopup_scripts');

Шаг 3. Объяснение работы кода

PHP проверяет, есть ли cookie wppopup_closed. Если нет — выводит HTML popup. JavaScript навешивает обработчик на кнопку закрытия, который скрывает окно и устанавливает cookie на 7 дней. При следующих загрузках страницы popup уже не показывается.

Дополнительные советы по работе с popup в WordPress

Учет кеширования

Если на сайте включено кеширование, cookie могут не сразу учитываться. Рекомендуется использовать AJAX для динамической проверки состояния cookie и показа popup.

Использование localStorage

Можно вместо cookie применять localStorage для хранения состояния закрытия popup. Однако cookie более универсальны для серверной стороны.

Оптимизация UX

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

Выводы

Удаление всплывающего окна после закрытия — важный элемент качественного UX. Используйте плагины с поддержкой cookie или реализуйте собственное решение с помощью PHP и JavaScript, как показано в примерах. Это позволит повысить лояльность посетителей и эффективность popup на вашем сайте WordPress.