Как создать popup в WordPress с автоматическим отключением на мобильных устройствах

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

Почему важно отключать popup на мобильных устройствах

Мобильный трафик сегодня составляет более 50% от общего числа посетителей сайтов. Popup, которые занимают большую часть экрана на смартфонах, могут:

• Затруднять навигацию и просмотр контента;
• Увеличивать показатель отказов;
• Негативно влиять на SEO из-за ухудшенного пользовательского опыта.

Поэтому важно реализовать логику, при которой popup показывается только на устройствах с достаточным экраном — чаще всего на десктопах и планшетах с большим экраном.

Создание popup с отключением на мобильных: выбор плагина и настройка

Для создания popup можно использовать популярный плагин My Popup. Он предлагает гибкие настройки отображения, в том числе по устройствам.

В My Popup в разделе «Условия показа» вы можете выбрать опцию «Показывать только на устройствах» и указать тип устройств: «Только десктопы» или «Только мобильные». Это самый простой способ, но иногда нужны более тонкие настройки.

Пример отключения popup на мобильных с помощью условного JavaScript

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

function wppopupru_isMobile() {
    return /Android|webOS|iPhone|iPad|iPod|BlackBerry|IEMobile|Opera Mini/i.test(navigator.userAgent);
}

document.addEventListener('DOMContentLoaded', function() {
    if (wppopupru_isMobile()) {
        // Отключаем popup
        var popup = document.getElementById('my-popup');
        if (popup) {
            popup.style.display = 'none';
        }
    } else {
        // Показываем popup на десктопе
        var popup = document.getElementById('my-popup');
        if (popup) {
            popup.style.display = 'block';
        }
    }
});

Этот код проверяет userAgent и скрывает элемент с id my-popup на мобильных. Для работы замените my-popup на id вашего popup или класс.

Использование CSS медиа-запросов для управления показом popup

Еще один способ — управлять отображением popup через CSS медиа-запросы. Это особенно удобно, если popup реализован через HTML и CSS без сложных скриптов.

@media (max-width: 767px) {
    #my-popup {
        display: none !important;
    }
}

Данный код скроет popup на экранах с шириной 767 пикселей и меньше, что соответствует большинству мобильных устройств.

Минус этого метода в том, что popup всё равно может грузиться и влиять на производительность, но визуально он будет скрыт.

Пример создания кастомного popup с отключением на мобильных в WordPress

Рассмотрим пример кода для добавления в functions.php вашей темы или в кастомный плагин. Он добавит popup с условием показа только на десктопах.

function wppopupru_enqueue_scripts() {
    wp_enqueue_script('wppopupru-popup-script', get_template_directory_uri() . '/js/wppopupru-popup.js', array('jquery'), '1.0', true);
}
add_action('wp_enqueue_scripts', 'wppopupru_enqueue_scripts');

function wppopupru_add_popup_html() {
    ?>
    <div id="wppopupru-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;">
        <p>Подпишитесь на нашу рассылку и получите скидку!</p>
        <button id="wppopupru-close">Закрыть</button>
    </div>
    <?php
}
add_action('wp_footer', 'wppopupru_add_popup_html');

Создайте файл wppopupru-popup.js в папке js вашей темы и добавьте туда:

jQuery(document).ready(function($) {
    function wppopupru_isMobile() {
        return /Android|webOS|iPhone|iPad|iPod|BlackBerry|IEMobile|Opera Mini/i.test(navigator.userAgent);
    }

    if (!wppopupru_isMobile()) {
        $('#wppopupru-popup').fadeIn();
    }

    $('#wppopupru-close').on('click', function() {
        $('#wppopupru-popup').fadeOut();
    });
});

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

Дополнительные советы по улучшению UX popup на мобильных

Даже если вы показываете popup на мобильных, важно соблюдать правила удобства:

• Используйте маленькие и ненавязчивые popup, например, баннеры внизу экрана.
• Добавьте кнопку закрытия, легко доступную для пальца.
• Не показывайте popup сразу при загрузке — лучше с задержкой или при прокрутке.
• Ограничьте частоту показа, чтобы не раздражать пользователей.

Если вы используете плагин My Popup, там есть все эти настройки, и можно гибко управлять показом по устройствам и времени.

Выводы и лучшие практики

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

Для удобного и быстрого решения рекомендую обратить внимание на плагин My Popup — он уже содержит все необходимые инструменты для контроля показа popup на мобильных и десктопах.