Phát triển WordPress: Kích hoạt tính năng Vary CDN khi sử dụng wp_is_mobile()

Sử dụng wp_is_mobile() trong phát triển WordPress? Đừng quên bật tính năng Vary cho CDN

Trợ lý Hướng dẫn

Khoảng 1 phút

Giang Tây

2025-11-14

4,371

Tôi kiếm được hoa hồng khi bạn mua sắm thông qua các liên kết dưới đây, mà không phát sinh thêm chi phí nào cho bạn.

CSS Media Queries

Nếu là trang web responsive, ví dụ:

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

Khi CDN bật bộ nhớ đệm toàn trang, nội dung sẽ hiển thị khác nhau tùy theo thiết bị.

`wp_is_mobile()`Điểm đau

Khi phát triển theme WordPress sử dụngwp_is_mobile() để phân biệt thiết bị di động và máy tính, thì khi CDN bật bộ nhớ đệm sẽ xảy ra tình huống như sau:

Khi thiết bị di động truy cập trang lần đầu tiên: Cả máy tính và thiết bị di động đều hiển thị trang di động,wp_is_mobile() sẽ mất tác dụng vì trang đã được lưu trong bộ nhớ đệm.
Khi truy cập trang lần đầu tiên từ máy tính: cả máy tính và thiết bị di động sẽ hiển thị trang phiên bản máy tính.wp_is_mobile() sẽ mất tác dụng vì trang đã được lưu trong bộ nhớ đệm.

Giải pháp

Để giải quyết vấn đề trên cần sử dụng tính năng Vary.

Tính năng Vary là gì?

Vary là một tiêu đề phản hồi HTTP được bổ sung sau HTTP/1.1, khi máy khách sử dụng cùng một URL để gửi yêu cầu đến máy chủ nguồn, nếu máy chủ nguồn có nhiều phiên bản nội dung tệp khác nhau, có thể bị hệ thống cache trung gian (ví dụ: cache trình duyệt, mạng phân phối nội dung CDN) lưu trữ mà không phân biệt được ngữ cảnh phản hồi tệp. Do đó, máy chủ nguồn có thể thêm tiêu đề Vary vào phản hồi HTTP để thông báo cho hệ thống cache trung gian sử dụng tiêu đề yêu cầu nào để phân biệt nội dung phiên bản cache.

Ví dụ: Khi tất cả các yêu cầu từ phía client đều làhttps://www.example.com/test.pdftrên nguồn gốc, để phân biệt phiên bản tệp phản hồi theo ngôn ngữ của client, đã thêm Vary: Accept-Languagevào tiêu đề phản hồi HTTP, EdgeOne sẽ khi thiết lập bộ nhớ cache, dựa trên nội dung Accept-Language mà client yêu cầu để thiết lập các phiên bản bộ nhớ cache khác nhau.

Khi người dùng A gửi yêu cầu với URL làhttps://www.example.com/test.pdf, tiêu đề yêu cầu mang theoAccept-Language:zh-cn, thì EdgeOne sẽ phản hồi với tệp A.

Khi người dùng B gửi yêu cầu với URL làhttps://www.example.com/test.pdf, tiêu đề yêu cầu mang theoAccept-Language:en-USKhi đó, EdgeOne sẽ phản hồi với tệp B.

Sử dụng wp_is_mobile() trong phát triển WordPress? Đừng quên bật tính năng Vary cho CDN - LikaCloud

Xem tài liệu chính thức về Vary

Phương pháp thao tác

Phương pháp thao tác như sau:

Bật tại CDNVary 特性

Sau đó trong tệp hàm của chủ đề WordPressfunctions.php thêm vào:

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

Như vậy khi CDN bật bộ nhớ đệm toàn trang, thiết bị di động và máy tính sẽ hiển thị trang tương ứng.