WordPress: разделение кода для разных устройств с примерами и плагинами

Автор: Диана Мельникова | Опубликовано: 30.12.2025

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

Почему важно разделять код для разных устройств в WordPress

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

Разделение кода позволяет:

Уменьшить время загрузки страниц на мобильных устройствах;
Повысить конверсию за счёт более адаптированного интерфейса;
Снизить нагрузку на сервер и трафик;
Обеспечить гибкую кастомизацию под разные типы экранов.

Рассмотрим, как это реализовать в WordPress с технической точки зрения.

Определение устройства пользователя в WordPress: базовые методы

Для разделения кода сначала необходимо корректно определить, с какого устройства пользователь зашёл на сайт. Есть несколько способов:

1. Использование PHP-библиотеки Mobile Detect

Mobile Detect — популярная PHP-библиотека для определения мобильных устройств, планшетов и десктопов по user-agent. Её можно использовать в плагинах и темах WordPress.

Пример подключения и использования:

require_once get_template_directory() . '/inc/Mobile_Detect.php';
$detect = new Mobile_Detect();
if ($detect->isMobile() && !$detect->isTablet()) {
    // код для мобильных телефонов
} elseif ($detect->isTablet()) {
    // код для планшетов
} else {
    // код для десктопов
}

Библиотеку Mobile Detect можно скачать и положить в папку inc вашей темы или плагина.

2. Использование JavaScript и передачи данных в PHP

Иногда нужно определить устройство на клиенте с помощью JavaScript и передать результат серверу через AJAX или куки для дальнейшего использования в PHP.

Пример простого JS для установки куки с типом устройства:

document.cookie = 'device_type=' + (window.innerWidth < 768 ? 'mobile' : 'desktop') + '; path=/';

Далее в PHP можно прочитать куки и на основе этого условно подключать скрипты или стили.

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

Самый частый кейс — это подключать разные CSS и JS файлы для мобильных и десктопных пользователей.

Пример функции для подключения ресурсов с разделением по устройствам

function wpengine_enqueue_device_scripts() {
    require_once get_template_directory() . '/inc/Mobile_Detect.php';
    $detect = new Mobile_Detect();
    if ($detect->isMobile() && !$detect->isTablet()) {
        wp_enqueue_style('wpengine-mobile-style', get_template_directory_uri() . '/css/mobile.css', array(), '1.0');
        wp_enqueue_script('wpengine-mobile-script', get_template_directory_uri() . '/js/mobile.js', array('jquery'), '1.0', true);
    } elseif ($detect->isTablet()) {
        wp_enqueue_style('wpengine-tablet-style', get_template_directory_uri() . '/css/tablet.css', array(), '1.0');
        wp_enqueue_script('wpengine-tablet-script', get_template_directory_uri() . '/js/tablet.js', array('jquery'), '1.0', true);
    } else {
        wp_enqueue_style('wpengine-desktop-style', get_template_directory_uri() . '/css/desktop.css', array(), '1.0');
        wp_enqueue_script('wpengine-desktop-script', get_template_directory_uri() . '/js/desktop.js', array('jquery'), '1.0', true);
    }
}
add_action('wp_enqueue_scripts', 'wpengine_enqueue_device_scripts');

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

Использование плагинов для адаптивного разделения кода

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

1. Plugin Organizer

Этот плагин позволяет включать и отключать плагины на разных страницах и для разных условий, включая тип устройства. Например, вы можете отключить тяжёлые плагины на мобильных.

Подробнее на https://wpshop.ru/plugin-organizer

2. Asset CleanUp: Page Speed Booster

Позволяет отключать ненужные CSS и JS на страницах и для устройств, что снижает нагрузку. Можно настраивать через UI.

Подробнее на https://wpshop.ru/asset-cleanup

Оптимизация на уровне шаблонов и шорткодов

Иногда нужно выводить разные блоки HTML по устройствам. Это можно сделать через условные теги в шаблонах или шорткодах.

Пример шорткода с разделением вывода

function wpengine_device_specific_shortcode() {
    require_once get_template_directory() . '/inc/Mobile_Detect.php';
    $detect = new Mobile_Detect();
    if ($detect->isMobile() && !$detect->isTablet()) {
        return '<div>Это контент для мобильных пользователей</div>';
    } elseif ($detect->isTablet()) {
        return '<div>Это контент для планшетов</div>';
    } else {
        return '<div>Это контент для десктопов</div>';
    }
}
add_shortcode('device_content', 'wpengine_device_specific_shortcode');

Добавьте шорткод [device_content] в любую страницу или запись — и пользователи увидят разный HTML в зависимости от устройства.

Практические советы по разделению кода на WordPress

Используйте Mobile Detect, если хотите точное определение на сервере без JS;
Не перегружайте мобильные устройства тяжёлыми скриптами и анимациями;
Тестируйте сайт на разных устройствах и эмуляторах браузера;
Используйте кеширование, чтобы снизить нагрузку от условных проверок;
Рассмотрите использование плагина Clearfy Pro для оптимизации и отключения ненужных скриптов на мобильных;
Для сложных проектов можно создать отдельные шаблоны страниц для разных устройств и переключать их через фильтры.

Заключение

Разделение кода в WordPress для разных устройств — это мощный способ улучшить производительность и UX сайта. С помощью библиотек, условных функций и специальных плагинов вы сможете гибко управлять загрузкой ресурсов и выводом контента. Если хотите ускорить процесс, обратите внимание на готовые решения в каталоге WPShop, которые помогут автоматизировать и упростить задачи адаптации под мобильные и десктопные устройства.

WordPress: разделение кода для разных устройств — практические решения