Создание динамических popup в WordPress с помощью AJAX

В современном веб-разработке всплывающие окна (popup) часто используются для привлечения внимания пользователя к важной информации, предложениям или формам обратной связи. Но статические popup, которые грузятся вместе с основной страницей, могут замедлять сайт и создавать неудобства. В этой статье я расскажу, как создать динамические popup в WordPress с помощью AJAX, чтобы загружать содержимое только при необходимости, без перезагрузки страницы.

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

Статические popup загружаются вместе с остальным контентом страницы, что увеличивает время загрузки и может негативно сказаться на показателях скорости сайта. Использование AJAX позволяет загружать содержимое popup только в момент вызова, экономя ресурсы и улучшая UX.

Кроме того, с помощью AJAX можно подгружать контент из базы данных или API, делать персонализированные предложения и создавать интерактивные формы без перезагрузки страницы.

В качестве примера мы создадим простой плагин для WordPress, который будет реализовывать динамический popup с помощью AJAX.

Обзор плагинов для создания popup с поддержкой AJAX

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

• Popup Maker — мощный плагин с поддержкой AJAX-загрузки содержимого через шорткоды и PHP-функции.
• Elementor Pro — конструктор страниц с возможностью создания popup, включая динамическое содержимое.
• WP Popups — легкий плагин с возможностью подключения AJAX для различных целей.

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

Создаем простой плагин для динамического popup с AJAX

1. Регистрация скриптов и локализация данных

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

<?php
function wppopup_enqueue_scripts() {
    wp_enqueue_script('wppopup-ajax', plugin_dir_url(__FILE__) . 'js/wppopup.js', array('jquery'), '1.0', true);
    wp_localize_script('wppopup-ajax', 'wppopup_ajax_obj', array(
        'ajax_url' => admin_url('admin-ajax.php'),
        'nonce' => wp_create_nonce('wppopup_nonce')
    ));
}
add_action('wp_enqueue_scripts', 'wppopup_enqueue_scripts');
?>

Этот код подключает скрипт wppopup.js и передает в него URL для AJAX-запросов и nonce для безопасности.

2. JavaScript для открытия popup и отправки AJAX-запроса

Создадим файл js/wppopup.js с таким содержанием:

jQuery(document).ready(function($) {
    $('.wppopup-open').on('click', function(e) {
        e.preventDefault();
        var popupId = $(this).data('popup-id');
        $.ajax({
            url: wppopup_ajax_obj.ajax_url,
            type: 'POST',
            data: {
                action: 'wppopup_load_content',
                popup_id: popupId,
                nonce: wppopup_ajax_obj.nonce
            },
            success: function(response) {
                if(response.success) {
                    $('body').append('<div class="wppopup-overlay">' +
                        '<div class="wppopup-content">' + response.data.content +
                        '<button class="wppopup-close">Закрыть</button>' +
                        '</div></div>');
                } else {
                    alert('Ошибка загрузки popup.');
                }
            }
        });
    });

    $(document).on('click', '.wppopup-close, .wppopup-overlay', function() {
        $('.wppopup-overlay').remove();
    });

    $(document).on('click', '.wppopup-content', function(e) {
        e.stopPropagation();
    });
});

Этот скрипт слушает клики по элементам с классом wppopup-open, отправляет AJAX-запрос с ID popup, получает содержимое и отображает его поверх страницы. Также реализована возможность закрытия popup по клику вне содержимого или кнопке.

3. Обработка AJAX-запроса на сервере

Теперь создадим обработчик AJAX-запроса в PHP:

function wppopup_ajax_load_content() {
    check_ajax_referer('wppopup_nonce', 'nonce');

    $popup_id = intval($_POST['popup_id']);
    if(!$popup_id) {
        wp_send_json_error('Неверный ID popup');
    }

    // Здесь можно получить содержимое из базы данных или другого источника
    // Для примера вернем простой HTML
    $content = '<h2>Popup с ID ' . $popup_id . '</h2><p>Динамически загруженное содержимое для popup.</p>';

    wp_send_json_success(array('content' => $content));
}
add_action('wp_ajax_wppopup_load_content', 'wppopup_ajax_load_content');
add_action('wp_ajax_nopriv_wppopup_load_content', 'wppopup_ajax_load_content');

Обработчик проверяет nonce, принимает ID popup, формирует содержимое и возвращает его в формате JSON.

Добавление кнопок вызова popup на страницу

Чтобы вызвать popup, достаточно добавить на страницу кнопку или ссылку с классом wppopup-open и атрибутом data-popup-id с нужным ID.

Пример:

<a href="#" class="wppopup-open" data-popup-id="1">Открыть popup 1</a>
<a href="#" class="wppopup-open" data-popup-id="2">Открыть popup 2</a>

Можно добавлять такие ссылки в любом месте темы, виджетах или контенте.

Настройка стилей для popup

Для корректного отображения popup добавим CSS:

.wppopup-overlay {
    position: fixed;
    top: 0; left: 0;
    width: 100vw; height: 100vh;
    background: rgba(0,0,0,0.5);
    display: flex;
    align-items: center;
    justify-content: center;
    z-index: 9999;
}
.wppopup-content {
    background: #fff;
    padding: 20px;
    border-radius: 8px;
    max-width: 500px;
    max-height: 80vh;
    overflow-y: auto;
    position: relative;
}
.wppopup-close {
    position: absolute;
    top: 10px;
    right: 10px;
    background: #f44336;
    border: none;
    color: #fff;
    padding: 5px 10px;
    cursor: pointer;
    border-radius: 3px;
}

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

Расширение функционала: загрузка контента из кастомных полей

Если вы используете Advanced Custom Fields (ACF) или свои метаполя для хранения содержимого popup, то можно динамически подгружать именно их.

Пример PHP-кода для загрузки содержимого из кастомного поля 'wppopup_content':

$content = get_post_meta($popup_id, 'wppopup_content', true);
if(!$content) {
    $content = '<p>Содержимое отсутствует.</p>';
}

Это позволит создавать уникальные popup для разных записей или страниц.

Заключение по созданию динамических popup

Использование AJAX для загрузки popup в WordPress значительно улучшает производительность и пользовательский опыт. Вы можете расширять пример, интегрируя формы, видео, или сложный HTML, а также добавлять различные триггеры для открытия popup — по времени, прокрутке или клику.

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