Как использовать метод wpnews_detect_user_agent для определения User Agent в WordPress

Определение User Agent посетителя сайта — частая задача для разработчиков на WordPress. Это позволяет адаптировать контент под различные устройства, браузеры и платформы, а также собирать статистику или блокировать нежелательные запросы. В этой статье мы рассмотрим, как создать собственную функцию wpnews_detect_user_agent, которая будет корректно определять User Agent и возвращать полезную информацию.

Что такое User Agent и почему важно его определять

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

Mozilla/5.0 (Windows NT 10.0; Win64; x64) AppleWebKit/537.36 (KHTML, like Gecko) Chrome/114.0.0.0 Safari/537.36

Для WordPress разработчиков это важно, чтобы:

• Настраивать вывод контента в зависимости от устройства (мобильный, десктоп, планшет).
• Оптимизировать загрузку скриптов и стилей.
• Блокировать запросы от ботов или старых браузеров.
• Интегрировать собственные механизмы логирования и аналитики.

Создаем функцию wpnews_detect_user_agent для WordPress

Простейший способ получить User Agent в WordPress — обратиться к суперглобальному массиву $_SERVER. Однако мы сделаем функцию, которая:

• Возвращает чистую строку User Agent.
• Определяет тип устройства (мобильное, планшет, десктоп).
• Имеет возможность расширения под нужды проекта.

Добавьте следующий код в файл functions.php вашей темы или в отдельный плагин:

function wpnews_detect_user_agent() {
    $user_agent = isset($_SERVER['HTTP_USER_AGENT']) ? sanitize_text_field($_SERVER['HTTP_USER_AGENT']) : '';
    
    $device_type = 'desktop';
    if (preg_match('/mobile|android|iphone|ipad|phone/i', $user_agent)) {
        $device_type = 'mobile';
    }
    if (preg_match('/tablet|ipad/i', $user_agent)) {
        $device_type = 'tablet';
    }

    return array(
        'user_agent' => $user_agent,
        'device_type' => $device_type,
    );
}

Функция возвращает ассоциативный массив с ключами user_agent и device_type. Благодаря этому можно легко проверять тип устройства и применять условия в шаблонах.

Пример использования wpnews_detect_user_agent

Вставьте следующий код в нужное место шаблона, например, в header.php для вывода информации о посетителе:

$info = wpnews_detect_user_agent();
echo '<p>Ваш браузер: ' . esc_html($info['user_agent']) . '</p>';
echo '<p>Тип устройства: ' . esc_html($info['device_type']) . '</p>';

Это позволит отобразить посетителю подробности о его устройстве и браузере.

Расширение функции: определение браузера и версии

Для более точной настройки можно добавить парсинг User Agent и выделение браузера с версией. Для этого воспользуемся регулярными выражениями:

function wpnews_detect_user_agent_extended() {
    $data = wpnews_detect_user_agent();
    $ua = $data['user_agent'];

    $browser = 'unknown';
    $version = '';

    if (preg_match('/MSIE (\d+\.\d+)/i', $ua, $matches)) {
        $browser = 'Internet Explorer';
        $version = $matches[1];
    } elseif (preg_match('/Firefox\/(\d+\.\d+)/i', $ua, $matches)) {
        $browser = 'Firefox';
        $version = $matches[1];
    } elseif (preg_match('/Chrome\/(\d+\.\d+)/i', $ua, $matches)) {
        $browser = 'Chrome';
        $version = $matches[1];
    } elseif (preg_match('/Safari\/(\d+\.\d+)/i', $ua, $matches)) {
        $browser = 'Safari';
        $version = $matches[1];
    } elseif (preg_match('/Opera\/(\d+\.\d+)/i', $ua, $matches)) {
        $browser = 'Opera';
        $version = $matches[1];
    }

    $data['browser'] = $browser;
    $data['version'] = $version;
    return $data;
}

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

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

Допустим, вы хотите подключить отдельный CSS для мобильных устройств. Используйте следующий код в functions.php:

function wpnews_enqueue_conditional_styles() {
    $info = wpnews_detect_user_agent();

    if ($info['device_type'] === 'mobile') {
        wp_enqueue_style('wpnews-mobile-style', get_template_directory_uri() . '/css/mobile.css', array(), '1.0');
    } else {
        wp_enqueue_style('wpnews-desktop-style', get_template_directory_uri() . '/css/desktop.css', array(), '1.0');
    }
}
add_action('wp_enqueue_scripts', 'wpnews_enqueue_conditional_styles');

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

Использование плагина Clearfy Pro для оптимизации User Agent

Если вы не хотите писать собственный код, обратите внимание на плагин Clearfy Pro. Он включает расширенные возможности по управлению заголовками, в том числе User Agent, а также позволяет оптимизировать работу сайта и безопасность.

Советы по безопасности при работе с User Agent

Не забывайте, что User Agent — это легко подделываемый заголовок. Никогда не полагайтесь на него для критически важных решений. Используйте данные User Agent для улучшения UX и дизайна, но не для аутентификации или доступа к важным функциям.

Обязательно применяйте функцию sanitize_text_field() или аналогичные методы очистки данных перед использованием или выводом User Agent, чтобы избежать XSS-уязвимостей.

Заключение

В этой статье мы подробно разобрали, как создать функцию wpnews_detect_user_agent для определения User Agent в WordPress, расширили ее для определения браузера и версии, а также рассмотрели практические примеры использования для адаптивного дизайна. Используйте эти знания, чтобы улучшить взаимодействие пользователей с вашим сайтом и повысить его функциональность.