Pembangunan WordPress: Aktifkan ciri CDN Vary apabila menggunakan wp_is_mobile()

Menggunakan wp_is_mobile() dalam pembangunan WordPress? Jangan lupa untuk mengaktifkan ciri Vary untuk CDN.

Pembantu Strategi

Kira-kira 1 minit.

Jiangsu

2025-11-14

4,247

Saya mendapat komisen apabila anda membeli-belah melalui pautan di bawah, tanpa sebarang kos tambahan kepada anda.

Penentuan media CSS

Jika ia adalah halaman responsif untuk ujian, seperti:

/* 移动端设备 (通常小于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端样式 */
}

Apabila CDN mengaktifkan caching untuk seluruh laman web, halaman tersebut akan memaparkan kandungan yang berbeza berdasarkan peranti yang digunakan.

`wp_is_mobile()`Kesukaran atau masalah utama dalam sesuatu situasi atau bidang.

Jika anda menggunakan untuk membangunkan tema WordPress,wp_is_mobile() Untuk menentukan antara versi mudah alih dan versi komputer, apabila CDN mengaktifkan cache, situasi seperti ini akan berlaku:

Apabila peranti mudah alih mengakses halaman untuk kali pertama: Kedua-dua peranti komputer dan mudah alih akan memaparkan halaman untuk peranti mudah alih.wp_is_mobile() Ia akan gagal, kerana halaman tersebut telah di-cache.
Apabila peranti komputer mengakses halaman untuk kali pertama: Kedua-dua peranti komputer dan mudah alih akan memaparkan halaman dari peranti komputer.wp_is_mobile() Ia akan gagal, kerana halaman tersebut telah di-cache.

Solusinya

Untuk menyelesaikan masalah di atas, kita perlu menggunakan ciri Vary.

Apa itu ciri Vary?

Vary ialah kepala respons HTTP yang baru ditambahkan selepas HTTP/1.1. Apabila pelanggan menggunakan URL yang sama untuk membuat permintaan ke pelayan sumber, jika pelayan sumber mempunyai versi berbeza dari kandungan fail, mereka mungkin disimpan dalam sistem cache perantaraan (seperti cache pelayar, CDN) dan tidak dapat membezakan antara respons untuk skenario berbeza. Oleh itu, pelayan sumber boleh menambahkan kepala Vary dalam respons HTTP untuk memberitahu sistem cache perantaraan menggunakan mana kepala permintaan untuk membezakan antara versi kandungan yang disimpan dalam cache.

Contohnya: Apabila semua permintaan pelanggan adalah untukhttps://www.example.com/test.pdfApabila itu berlaku, stesen sumber menambahkan maklumat ke dalam header HTTP untuk membezakan antara versi berbeza dari fail tersebut berdasarkan bahasa klien. Vary: Accept-LanguageEdgeOne akan, semasa mengaturkan cache, melakukannya berdasarkan permintaan pelanggan. Accept-Language Mengaturkan pelbagai versi cache untuk kandungan.

Apabila pengguna A memulakan permintaan dengan URLhttps://www.example.com/test.pdf, permintaan header yang dibawaAccept-Language:zh-cnOleh itu, EdgeOne akan memberi respons kepada fail A.

Apabila pengguna B memulakan permintaan dengan URL When user B initiates a request with a URL ofhttps://www.example.com/test.pdf, permintaan header yang dibawaAccept-Language:en-USOleh itu, EdgeOne akan memberi respons kepada fail B.

Menggunakan wp_is_mobile() dalam pembangunan WordPress? Jangan lupa untuk mengaktifkan ciri Vary untuk CDN - LikaCloud

\nLihat dokumen rasmi Vary.

Metod operasi

Cara operasinya adalah seperti berikut:

Aktifkan di CDNVary 特性

Kemudian, dalam fail fungsi tema WordPress.functions.php Tambahkan ini ke dalam kotak teks:

/**
 * 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');
        }
    }
});

Oleh itu, apabila CDN mengaktifkan pengoptimuman cache untuk seluruh laman web, halaman yang sepadan akan dipaparkan pada peranti mudah alih dan komputer.