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

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

Почему важно отключать popup по устройствам

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

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

В WordPress вы можете реализовать это несколькими способами — через плагины, кастомный JavaScript и PHP.

Реализация отключения popup на мобильных устройствах с помощью PHP и JavaScript

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

Определение устройства на стороне сервера с PHP

Можно использовать библиотеку Mobile Detect, которая эффективно определяет мобильные устройства и планшеты. Установите её через Composer или вручную добавьте в тему.

require_once get_template_directory() . '/Mobile_Detect.php';
$wppopup_detect = new Mobile_Detect;

function wppopup_should_show_popup() {
    global $wppopup_detect;
    // Показывать только на десктопах
    if ( $wppopup_detect->isMobile() && !$wppopup_detect->isTablet() ) {
        return false;
    }
    return true;
}

В шаблоне или плагине, где выводится popup, оберните вызов окна условием:

if ( wppopup_should_show_popup() ) {
    // Код показа popup
}

Отключение popup на мобильных через JavaScript

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

Например, добавьте такой скрипт в футер сайта:

document.addEventListener('DOMContentLoaded', function() {
    var isMobile = /iPhone|iPad|iPod|Android/i.test(navigator.userAgent);
    if (isMobile) {
        var popup = document.querySelector('.wppopup-class'); // класс popup
        if (popup) {
            popup.style.display = 'none';
        }
    }
});

Этот код скроет popup на всех мобильных устройствах, если у popup есть CSS-класс wppopup-class. Замените селектор на актуальный для вашего popup.

Использование плагина My Popup для отключения показа по устройствам

Плагин My Popup из магазина WPShop поддерживает встроенные настройки условий показа, включая фильтрацию по устройствам.

Чтобы настроить отключение popup на мобильных или планшетах:

• Откройте настройки вашего popup в My Popup.
• Перейдите в раздел Условия показа.
• В блоке Устройства выберите, на каких устройствах показывать popup (например, только на десктопах).
• Сохраните изменения.

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

Продвинутый пример: отключение popup на планшетах и мобильных с учётом определения устройства на сервере

Если хочется более тонко настроить логику, можно расширить функцию PHP:

function wppopup_should_show_popup_advanced() {
    global $wppopup_detect;
    if ( $wppopup_detect->isTablet() || $wppopup_detect->isMobile() ) {
        // Не показывать на планшетах и мобильных
        return false;
    }
    return true;
}

Или наоборот, показывать popup только на мобильных:

function wppopup_should_show_popup_mobile_only() {
    global $wppopup_detect;
    return $wppopup_detect->isMobile();
}

Такую логику удобно использовать в шаблоне:

if ( wppopup_should_show_popup_advanced() ) {
    echo do_shortcode('[my_popup id="123"]');
}

Советы по оптимизации и UX при работе с popup на разных устройствах

1. Минимизируйте использование popup на мобильных. Часто лучше отказаться от них либо использовать менее навязчивые варианты, например, баннеры.

2. Используйте cookie или localStorage для предотвращения повторного показа popup при частом посещении.

3. Тестируйте popup на разных устройствах, чтобы убедиться, что они корректно отображаются и не мешают основному контенту.

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

Выводы и ресурсы

Отключение показа popup на определённых устройствах — важная задача для улучшения UX и повышения эффективности маркетинга. В WordPress это можно решить как программно, так и через популярные плагины, например My Popup.

Используйте библиотеку Mobile Detect для тонкого контроля на сервере и JavaScript — для клиентских условий.

Такой подход позволит показывать popup именно там, где он нужен, и не раздражать пользователей на мобильных устройствах.