Всплывающие окна (popup) часто используются для привлечения внимания посетителей сайта, сбора контактов или показа специальных предложений. Однако слишком навязчивое поведение popup, особенно повторное открытие на одной и той же странице, может раздражать пользователей и ухудшать пользовательский опыт. В этой статье подробно разберём, как запретить повторное открытие popup в WordPress на одной странице с помощью JavaScript и PHP, а также приведём примеры плагинов и собственного кода.
Почему важно запрещать повторное открытие popup
Если всплывающее окно появляется при каждом обновлении страницы или при повторном взаимодействии, это может привести к:
- Потере лояльности пользователей;
- Увеличению показателя отказов;
- Нарушению требований UX;
- Негативному влиянию на SEO (если пользователи быстро уходят с сайта).
Поэтому задача — показать popup один раз за сессию или при первом посещении страницы, а при повторных попытках — не показывать его вновь.
Как реализовать запрет повторного открытия popup на одной странице с помощью cookie и sessionStorage
Один из простых и надёжных способов — использовать JavaScript для сохранения состояния показа popup в sessionStorage или cookie. Разница в том, что sessionStorage работает в рамках одной вкладки браузера и удаляется при её закрытии, а cookie могут сохраняться дольше и доступны между вкладками.
Пример с sessionStorage
Рассмотрим простой скрипт, который проверяет, был ли уже показан popup в текущей сессии:
function wppopupShowOnce() {
if (!sessionStorage.getItem('wppopup_shown')) {
// Ваш код показа popup, например, открытие модального окна
alert('Это ваш первый показ popup на этой странице');
sessionStorage.setItem('wppopup_shown', 'true');
} else {
console.log('Popup уже был показан в этой сессии');
}
}
wppopupShowOnce();
В реальном проекте вместо alert нужно вызвать метод показа вашего popup, например, от плагина или кастомного решения.
Пример с cookie
Чтобы контролировать показ popup дольше одной сессии, можно использовать cookie. Вот простой пример установки и проверки cookie:
function wppopupSetCookie(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 wppopupGetCookie(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 wppopupShowOnceCookie() {
if (!wppopupGetCookie('wppopup_shown')) {
// Показываем popup
alert('Первый показ popup с использованием cookie');
wppopupSetCookie('wppopup_shown', 'true', 1); // cookie на 1 день
} else {
console.log('Popup уже показывался за последние 24 часа');
}
}
wppopupShowOnceCookie();
Как интегрировать запрет повторного открытия popup в WordPress через PHP и JavaScript
Чтобы сделать решение более устойчивым и интегрированным с WordPress, можно установить cookie на стороне сервера при первом показе popup. Для этого понадобится AJAX-запрос и обработчик в functions.php.
Пример AJAX-обработчика в WordPress
add_action('wp_ajax_wppopup_set_cookie', 'wppopup_set_cookie_callback');
add_action('wp_ajax_nopriv_wppopup_set_cookie', 'wppopup_set_cookie_callback');
function wppopup_set_cookie_callback() {
if (!isset($_COOKIE['wppopup_shown'])) {
setcookie('wppopup_shown', 'true', time() + DAY_IN_SECONDS, COOKIEPATH, COOKIE_DOMAIN);
wp_send_json_success('Cookie установлена');
} else {
wp_send_json_error('Cookie уже установлена');
}
wp_die();
}
JavaScript для вызова AJAX и контроля показа popup
function wppopupShowOnceWithAjax() {
if (!document.cookie.includes('wppopup_shown=true')) {
// Показываем popup
alert('Показ popup через AJAX');
// Отправляем AJAX-запрос на установку cookie
fetch(wppopup_ajax_object.ajax_url + '?action=wppopup_set_cookie', {
method: 'GET',
credentials: 'same-origin'
})
.then(response => response.json())
.then(data => {
if (data.success) {
console.log('Cookie установлена через AJAX');
}
});
} else {
console.log('Popup не показываем, cookie установлена');
}
}
wppopupShowOnceWithAjax();
Для корректной работы этого кода нужно локализовать скрипт и передать URL AJAX следующим образом в functions.php:
function wppopup_enqueue_scripts() {
wp_enqueue_script('wppopup-script', get_template_directory_uri() . '/js/wppopup.js', array(), null, true);
wp_localize_script('wppopup-script', 'wppopup_ajax_object', array(
'ajax_url' => admin_url('admin-ajax.php'),
));
}
add_action('wp_enqueue_scripts', 'wppopup_enqueue_scripts');
Примеры популярных плагинов с функцией ограничения показа popup
Если вы предпочитаете использовать готовые решения, обратите внимание на следующие плагины, поддерживающие настройку частоты показа popup:
- Popup Maker — позволяет настроить показ popup один раз за сессию, день или любое другое время;
- My Popup от WPSHOP — имеет встроенные опции по ограничению повторного показа, легко настраивается через админку;
- OptinMonster — мощный маркетинговый инструмент с гибкой настройкой показа и триггеров.
В каждом из этих плагинов можно настроить условия показа, чтобы избежать раздражения пользователей повторными окнами.
Дополнительные советы по улучшению UX при использовании popup
Чтобы popup не отпугивал посетителей, придерживайтесь следующих рекомендаций:
- Не показывайте popup сразу на входе на сайт, дайте пользователю ознакомиться с контентом;
- Используйте отложенный запуск popup (через несколько секунд или при прокрутке);
- Добавьте возможность легко закрыть окно и не показывать его повторно (например, "Не показывать снова");
- Оптимизируйте popup для мобильных устройств и отключайте его, если это необходимо;
- Используйте cookie или sessionStorage для контроля частоты показа popup.
Эти методы помогут сохранить внимание и лояльность посетителей сайта.