Как сделать мобильный popup в WordPress с AJAX

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

Почему стоит использовать AJAX для мобильных popup в WordPress

AJAX позволяет загружать содержимое popup без перезагрузки страницы, что особенно важно для мобильных пользователей — экономится трафик и время загрузки. Кроме того, AJAX даёт возможность динамически подгружать данные, например, формы обратной связи или специальные предложения, которые могут меняться в зависимости от условий.

Использование AJAX также улучшает пользовательский опыт: popup появляется быстро и плавно, не прерывая процесс просмотра страницы. Всё это повышает конверсию и вовлечённость.

Создание мобильного popup с AJAX: подготовка и структура

Начнём с подготовки базовой структуры. В нашем примере popup будет выводить форму подписки, а данные будут отправляться через AJAX без перезагрузки страницы.

Для начала зарегистрируем и подключим необходимые скрипты и стили в functions.php темы:

function wpmobile_enqueue_scripts() {
    wp_enqueue_style('wpmobile-popup-style', get_template_directory_uri() . '/css/wpmobile-popup.css');
    wp_enqueue_script('wpmobile-popup-ajax', get_template_directory_uri() . '/js/wpmobile-popup.js', array('jquery'), null, true);
    wp_localize_script('wpmobile-popup-ajax', 'wpmobile_ajax_obj', array(
        'ajax_url' => admin_url('admin-ajax.php')
    ));
}
add_action('wp_enqueue_scripts', 'wpmobile_enqueue_scripts');

В этом коде мы подключаем CSS для оформления popup, JavaScript с AJAX-логикой и передаём URL для AJAX-запросов.

HTML-разметка popup

Добавим в footer.php или в нужном шаблоне HTML-код popup окна. Он будет скрыт по умолчанию:

<div id="wpmobile-popup" class="wpmobile-popup-hidden">
    <div class="wpmobile-popup-content">
        <button id="wpmobile-popup-close">×</button>
        <h2>Подпишитесь на рассылку</h2>
        <form id="wpmobile-popup-form">
            <input type="email" name="email" placeholder="Ваш email" required />
            <button type="submit">Подписаться</button>
        </form>
        <div id="wpmobile-popup-message"></div>
    </div>
</div>

Обратите внимание, что у popup есть кнопка закрытия и форма с одним полем email.

JavaScript: логика открытия, закрытия и AJAX отправки

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

jQuery(document).ready(function($) {
    // Функция открытия popup
    function wpmobileOpenPopup() {
        $('#wpmobile-popup').removeClass('wpmobile-popup-hidden');
    }

    // Функция закрытия popup
    $('#wpmobile-popup-close').on('click', function() {
        $('#wpmobile-popup').addClass('wpmobile-popup-hidden');
    });

    // Открываем popup через 5 секунд после загрузки страницы
    setTimeout(wpmobileOpenPopup, 5000);

    // Отправка формы через AJAX
    $('#wpmobile-popup-form').on('submit', function(e) {
        e.preventDefault();
        var email = $(this).find('input[name="email"]').val();
        $('#wpmobile-popup-message').text('Отправка...');

        $.ajax({
            url: wpmobile_ajax_obj.ajax_url,
            type: 'POST',
            data: {
                action: 'wpmobile_subscribe_email',
                email: email
            },
            success: function(response) {
                $('#wpmobile-popup-message').text(response.data.message);
                if(response.success) {
                    $('#wpmobile-popup-form').hide();
                }
            },
            error: function() {
                $('#wpmobile-popup-message').text('Ошибка отправки, попробуйте позже.');
            }
        });
    });
});

Здесь мы показываем popup через 5 секунд, обрабатываем закрытие, а также отправляем email на сервер через AJAX. Сообщения об успехе или ошибке выводятся внутри popup.

Обработка AJAX-запроса в WordPress

Теперь добавим обработчик на стороне PHP в functions.php:

function wpmobile_ajax_subscribe_email() {
    if ( ! isset($_POST['email']) || ! is_email( sanitize_email($_POST['email']) ) ) {
        wp_send_json_error(array('message' => 'Некорректный email'));
    }

    $email = sanitize_email($_POST['email']);

    // Пример сохранения email в опцию (можно заменить на запись в базу или интеграцию с сервисом)
    $subscribers = get_option('wpmobile_subscribers', array());
    if (in_array($email, $subscribers)) {
        wp_send_json_error(array('message' => 'Вы уже подписаны'));
    }
    $subscribers[] = $email;
    update_option('wpmobile_subscribers', $subscribers);

    wp_send_json_success(array('message' => 'Спасибо за подписку!'));
}
add_action('wp_ajax_wpmobile_subscribe_email', 'wpmobile_ajax_subscribe_email');
add_action('wp_ajax_nopriv_wpmobile_subscribe_email', 'wpmobile_ajax_subscribe_email');

Этот код проверяет email, сохраняет его в опцию WordPress и возвращает ответ с результатом операции.

Стилизация popup для мобильных устройств

В файле wpmobile-popup.css добавим минимальные стили для корректного отображения на мобильных устройствах:

#wpmobile-popup {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background: rgba(0,0,0,0.6);
    display: flex;
    justify-content: center;
    align-items: center;
    z-index: 9999;
}
.wpmobile-popup-hidden {
    display: none;
}
.wpmobile-popup-content {
    background: #fff;
    padding: 20px;
    width: 90%;
    max-width: 400px;
    border-radius: 8px;
    position: relative;
}
#wpmobile-popup-close {
    position: absolute;
    top: 10px;
    right: 10px;
    background: transparent;
    border: none;
    font-size: 24px;
    cursor: pointer;
}
#wpmobile-popup-form input[type="email"] {
    width: 100%;
    padding: 10px;
    margin-bottom: 10px;
    border: 1px solid #ccc;
    border-radius: 4px;
}
#wpmobile-popup-form button {
    width: 100%;
    padding: 10px;
    background-color: #0073aa;
    border: none;
    color: #fff;
    font-size: 16px;
    border-radius: 4px;
    cursor: pointer;
}
#wpmobile-popup-message {
    margin-top: 10px;
    font-size: 14px;
    color: green;
}

Эти стили сделают popup удобным для пользователей смартфонов и планшетов.

Дополнительные советы и расширения

Вы можете расширить функциональность данного popup, добавив:

• Валидацию email на клиенте с помощью JavaScript для быстрого отклика.
• Куки или localStorage, чтобы показывать popup только один раз для каждого пользователя.
• Интеграцию с почтовыми сервисами (Mailchimp, UniSender и др.) через их API.
• Использование плагина My Popup из WPShop для более продвинутых настроек и дизайна popup без кода.

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

Итог

Создание мобильного popup с AJAX в WordPress — задача, которая требует понимания работы с AJAX, JavaScript и PHP. В этой статье мы разобрали простой, но полный пример, который можно адаптировать под свои нужды и расширять. Такой подход повысит вовлечённость пользователей и сделает мобильный сайт более интерактивным.