Разработка WordPress: включение функции CDN Vary при использовании wp_is_mobile()

Используете wp_is_mobile() при разработке WordPress? Не забудьте включить функцию Vary для CDN

Руководство

Около 1 минуты.

Цзянсу

2025-11-14

4,359

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

Суждение CSS о медиа

Например, если это страница, отвечающая на судебное разбирательство:

/* 移动端设备 (通常小于768px) */
@media only screen and (max-width: 767px) {
  /* 移动端样式 */
}

/* 平板设备 (768px到991px之间) */
@media only screen and (min-width: 768px) and (max-width: 991px) {
  /* 平板样式 */
}

/* PC端设备 (大于992px) */
@media only screen and (min-width: 992px) {
  /* PC端样式 */
}

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

`wp_is_mobile()`недостатки

Если тема WordPress разработана с помощьюwp_is_mobile() для определения мобильного и компьютерного, это происходит, когда у CDN включено кэширование:

Когда страница впервые посещается на мобильном телефоне: и на компьютере, и на мобильном телефоне будет показана мобильная страница, аwp_is_mobile() не удастся, поскольку страница была кэширована.
При первом посещении страницы на компьютере: и на компьютере, и на мобильном телефоне страница будет отображаться на компьютере, наwp_is_mobile() не удастся, поскольку страница была кэширована.

Решение

Для решения этой проблемы необходимо использовать функцию Vary

Каковы особенности Vary?

Vary - это новый заголовок HTTP-ответа, добавленный после HTTP/1.1. Когда клиент инициирует запрос к исходному серверу по одному и тому же URL, если на исходном сервере существуют разные версии содержимого файла, они могут быть кэшированы промежуточными системами кэширования (например, кэшами браузеров, сетями доставки контента CDN) и могут не различать сценарий ответа. Поэтому оригинальный сервер может добавить в HTTP-ответ заголовок Vary, чтобы указать промежуточной системе кэширования, какой заголовок запроса использовать для различения кэшированной версии содержимого.

Например, когда все запросы клиентовhttps://www.example.com/test.pdfЧтобы различать разные версии файла на языке клиента, сайт-источник добавляет в заголовок ответа HTTP следующее Vary: Accept-LanguageEdgeOne создаст кэш на основе запроса клиента на Accept-Language Контент создает разные версии кэша.

Когда пользователь A запрашивает URL-адресhttps://www.example.com/test.pdfЗаголовок запроса, передаваемыйAccept-Language:zh-cnEdgeOne ответит документом A. Если это так, EdgeOne ответит документом B. Если это так, EdgeOne ответит документом C.

Когда пользователь B инициирует запрос URL-адресаhttps://www.example.com/test.pdfЗаголовок запроса, передаваемыйAccept-Language:en-USEdgeOne ответит документом B. Если документа нет в файле, EdgeOne ответит документом B.

Как использовать wp_is_mobile() при разработке WordPress? Не забудьте включить функцию Vary для CDN - LikaCloud

Ознакомьтесь с официальной документацией по Vary

метод работы

Метод работы заключается в следующем:

Включить на CDNVary 特性

Затем в файле функций темы WordPressfunctions.php Добавить в:

/**
 * CDN必须开启 Vary 特性
 * 结合 wp_is_mobile()添加Vary: User-Agent响应头
 */
add_action('send_headers', function() {
    if (function_exists('wp_is_mobile')) {
        header('Vary: User-Agent');
        
        // 可选：添加额外的缓存控制头
        if (wp_is_mobile()) {
            header('X-Device-Type: Mobile');
        } else {
            header('X-Device-Type: Desktop');
        }
    }
});

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