Всплывающие окна (pop-up) — эффективный инструмент для взаимодействия с посетителями сайта: сбор email, уведомления, акционные предложения и многое другое. Однако стандартные решения часто бывают громоздкими или слишком ограниченными. В этой статье разберем, как создавать и настраивать кастомные всплывающие окна в WordPress с помощью кода и плагинов, оптимизируя их под конкретные задачи и улучшая UX без потери производительности.
Почему стоит создавать кастомные всплывающие окна?
Большинство популярных плагинов для поп-апов, таких как Popup Maker или OptinMonster, предлагают множество функций, но иногда они избыточны и замедляют сайт. Кастомные решения позволяют:
- Легко интегрировать поп-апы под конкретный дизайн сайта.
- Минимизировать нагрузку на сервер и скорость загрузки.
- Контролировать логику показа без лишних функций.
- Подстраивать поведение под любые условия и события.
Это особенно актуально для проектов на WordPress, где важно балансировать между функционалом и производительностью.
Использование плагинов для всплывающих окон с примерами
Если хочется сэкономить время, можно использовать легкие и популярные плагины. Вот несколько примеров с акцентом на оптимизацию и расширение:
1. My Popup — простой и легкий плагин
My Popup позволяет быстро создавать простые поп-апы с настройками отображения по времени, страницам и событиям. Поддерживает кастомный HTML и CSS, что удобно для разработчиков.
Пример создания поп-апа с задержкой 5 секунд после загрузки страницы:
function wpbe_show_my_popup() {
if ( !is_admin() ) {
wp_enqueue_script('my-popup-script', plugin_dir_url(__FILE__) . 'js/my-popup.js', array('jquery'), '1.0', true);
}
}
add_action('wp_enqueue_scripts', 'wpbe_show_my_popup');В файле my-popup.js можно реализовать показ окна:
jQuery(document).ready(function($) {
setTimeout(function() {
$('#my-popup').fadeIn();
}, 5000);
$('#my-popup .close').click(function() {
$('#my-popup').fadeOut();
});
});2. Popup Maker — расширенные настройки и интеграции
Этот плагин позволяет создавать сложные триггеры: по прокрутке, по клику, по выходу с сайта и др. Для более глубоких кастомизаций можно использовать API плагина.
Например, чтобы автоматически закрывать окно через 10 секунд после открытия, можно добавить следующий код в functions.php темы:
function wpbe_auto_close_popup() {
?>
<script>
jQuery(document).on('pumAfterOpen', function(e, popup) {
setTimeout(function() {
popup.close();
}, 10000);
});
</script>
<?php
}
add_action('wp_footer', 'wpbe_auto_close_popup');Создание кастомного всплывающего окна на чистом PHP и JS
Иногда хочется обойтись без плагинов и написать собственное решение под свои задачи. Рассмотрим пример создания простого поп-апа, который появляется один раз за сессию.
Шаг 1: Добавляем HTML и CSS для окна
В файле header.php или через хук wp_footer добавим следующий код:
function wpbe_custom_popup_html() {
?>
<div id="wpbe-popup" style="display:none; position:fixed; top:20%; left:50%; transform:translateX(-50%); background:#fff; padding:20px; box-shadow:0 0 10px rgba(0,0,0,0.3); z-index:9999;">
<button id="wpbe-popup-close" style="position:absolute; top:5px; right:10px; cursor:pointer;">×</button>
<h2>Подпишитесь на нашу рассылку</h2>
<form id="wpbe-popup-form">
<input type="email" placeholder="Ваш email" required>
<button type="submit">Подписаться</button>
</form>
</div>
<?php
}
add_action('wp_footer', 'wpbe_custom_popup_html');Шаг 2: Добавляем JavaScript для логики показа и закрытия
function wpbe_custom_popup_script() {
?>
<script>
document.addEventListener('DOMContentLoaded', function() {
if (!sessionStorage.getItem('wpbePopupShown')) {
setTimeout(function() {
document.getElementById('wpbe-popup').style.display = 'block';
}, 3000);
}
document.getElementById('wpbe-popup-close').addEventListener('click', function() {
document.getElementById('wpbe-popup').style.display = 'none';
sessionStorage.setItem('wpbePopupShown', 'true');
});
document.getElementById('wpbe-popup-form').addEventListener('submit', function(e) {
e.preventDefault();
alert('Спасибо за подписку!');
document.getElementById('wpbe-popup').style.display = 'none';
sessionStorage.setItem('wpbePopupShown', 'true');
});
});
</script>
<?php
}
add_action('wp_footer', 'wpbe_custom_popup_script');Оптимизация и дополнительные советы по работе с поп-апами
Чтобы всплывающие окна не мешали пользователям и не ухудшали SEO, рекомендуется:
- Не показывать поп-апы сразу при загрузке страницы — лучше через 3-5 секунд или при прокрутке.
- Использовать cookie или sessionStorage для контроля частоты показа, чтобы не раздражать посетителей.
- Минимизировать CSS и JS для поп-апов, загружать их асинхронно.
- Учитывать мобильные устройства — адаптировать размеры и способ закрытия.
- Добавлять возможность легко закрыть окно, чтобы повысить комфорт.
Для расширенной оптимизации можно использовать плагин Clearfy Pro, который помогает отключать лишние скрипты и улучшать загрузку сайта.
Интеграция всплывающих окон с формами и CRM
Часто поп-апы используют для сбора контактных данных. Можно интегрировать такие формы с популярными сервисами через API или плагины, например, Contact Form 7, Gravity Forms или WPForms.
Пример отправки данных из кастомного поп-апа на AJAX в WordPress:
function wpbe_popup_form_ajax() {
check_ajax_referer('wpbe_popup_nonce', 'nonce');
$email = sanitize_email($_POST['email']);
if (is_email($email)) {
// Здесь можно добавить код для сохранения или отправки email
wp_send_json_success('Спасибо за подписку!');
} else {
wp_send_json_error('Неверный email');
}
}
add_action('wp_ajax_wpbe_popup_form', 'wpbe_popup_form_ajax');
add_action('wp_ajax_nopriv_wpbe_popup_form', 'wpbe_popup_form_ajax');JS для отправки формы:
document.getElementById('wpbe-popup-form').addEventListener('submit', function(e) {
e.preventDefault();
var email = this.querySelector('input[type="email"]').value;
var data = new FormData();
data.append('action', 'wpbe_popup_form');
data.append('email', email);
data.append('nonce', '<?php echo wp_create_nonce('wpbe_popup_nonce'); ?>');
fetch('<?php echo admin_url('admin-ajax.php'); ?>', {
method: 'POST',
body: data
}).then(response => response.json()).then(result => {
alert(result.data);
if(result.success) {
document.getElementById('wpbe-popup').style.display = 'none';
sessionStorage.setItem('wpbePopupShown', 'true');
}
});
});