Pengembangan WordPress: Mengaktifkan fitur CDN Vary saat menggunakan wp_is_mobile()

Menggunakan wp_is_mobile() dalam pengembangan WordPress? Jangan lupa untuk mengaktifkan fitur Vary untuk CDN.

Asisten Strategi

Sekitar 1 menit.

Jiangsu

2025-11-14

4,409

Saya mendapatkan komisi ketika Anda berbelanja melalui tautan di bawah ini, tanpa biaya tambahan untuk Anda.

\nPenentuan Media CSS

Jika itu adalah halaman responsif, misalnya:

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

Saat CDN mengaktifkan caching untuk seluruh situs, halaman akan menampilkan konten yang berbeda tergantung pada perangkat yang digunakan.

`wp_is_mobile()`Kelemahan dari...

Jika mengembangkan tema WordPress menggunakanwp_is_mobile() Untuk menentukan antara versi seluler dan versi komputer, maka situasi seperti ini akan terjadi saat CDN mengaktifkan caching:

Saat perangkat seluler mengakses halaman untuk pertama kalinya: Baik perangkat desktop maupun seluler akan menampilkan halaman versi seluler.wp_is_mobile() Ini akan gagal, karena halaman tersebut sudah di-cache.
Saat komputer mengakses halaman untuk pertama kalinya: Baik komputer maupun perangkat seluler akan menampilkan halaman dari komputer.wp_is_mobile() Ini akan gagal, karena halaman tersebut sudah di-cache.

resep

Untuk mengatasi masalah di atas, kita perlu menggunakan fitur Vary.

Apa itu fitur Vary?

Vary adalah header HTTP baru yang ditambahkan setelah HTTP/1.1. Ketika klien menggunakan URL yang sama untuk mengirimkan permintaan ke server sumber, jika server sumber memiliki konten file dalam versi berbeda, mungkin di-cache oleh sistem caching perantara (misalnya: caching browser, CDN) dan tidak dapat membedakan file respons dalam berbagai skenario. Oleh karena itu, server sumber dapat menambahkan header Vary dalam respons HTTP untuk memberi tahu sistem caching perantara menggunakan header permintaan mana untuk membedakan konten versi yang di-cache.

Contohnya: ketika semua permintaan klien adalahhttps://www.example.com/test.pdfSaat itu, untuk membedakan antara versi file yang berbeda dalam respons bahasa klien, stasiun sumber menambahkan informasi tersebut ke header HTTP. Vary: Accept-LanguageEdgeOne akan, saat membuat cache, melakukannya berdasarkan permintaan klien. Accept-Language Konten membuat berbagai versi dari cache.

Saat pengguna A mengirimkan permintaan dengan URL When user A initiates a request with a URL ofhttps://www.example.com/test.pdf, header permintaan yang dibawaAccept-Language:zh-cnMaka, EdgeOne akan merespons file A.

Saat pengguna B mengirimkan permintaan dengan URL:https://www.example.com/test.pdf, header permintaan yang dibawaAccept-Language:en-USMaka, EdgeOne akan merespons file B.

Menggunakan wp_is_mobile() dalam pengembangan WordPress? Jangan lupa untuk mengaktifkan fitur Vary untuk CDN - LikaCloud.

\nLihat dokumentasi resmi Vary.

Metode operasi.

Cara pengoperasiannya adalah sebagai berikut:

Aktifkan di CDN.Vary 特性

Dan kemudian di file fungsi tema WordPress.functions.php Tambahkan ini ke dalam daftar:

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

Dengan demikian, ketika CDN mengaktifkan caching untuk seluruh situs, halaman yang sesuai akan ditampilkan baik di perangkat seluler maupun di komputer.