워드프레스 개발: wp_is_mobile()을 사용할 때 CDN 다양한 기능 활성화하기

워드프레스 개발에서 wp_is_mobile()을 사용하시나요? CDN에 Vary 기능을 활성화하는 것을 잊지 마세요.

팁 도우미

약 1분.

Jiangsu

2025-11-14

4,293

아래 링크를 통해 쇼핑하면 추가 비용 없이 수수료를 받을 수 있습니다.

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()`단점

워드프레스 테마를 개발할 때wp_is_mobile() 를 사용하여 모바일과 컴퓨터를 확인하는데, 이는 CDN이 캐싱을 사용하도록 설정되어 있을 때 발생합니다:

모바일에서 페이지를 처음 방문하는 경우: 컴퓨터와 모바일 모두 모바일 페이지가 표시됩니다.wp_is_mobile() 은 페이지가 이미 캐시되어 있으므로 실패합니다.
컴퓨터에서 페이지를 처음 방문하는 경우: 컴퓨터와 모바일 모두에 해당 페이지가 컴퓨터에서 표시됩니다.wp_is_mobile() 은 페이지가 이미 캐시되어 있으므로 실패합니다.

처방전

위의 문제를 해결하려면 Vary 기능을 사용해야 합니다.

Vary 기능이란 무엇인가요?

Vary는 HTTP/1.1 이후에 추가된 새로운 HTTP 응답 헤더입니다. 클라이언트가 동일한 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로 응답하고, 문서 B로 응답하면 EdgeOne은 문서 C로 응답합니다.

사용자 B가 다음 URL에 대한 요청을 시작하면https://www.example.com/test.pdf요청 헤더는Accept-Language:en-USEdgeOne이 문서 B로 응답하지 않으면 EdgeOne은 문서 B로 응답하지 않습니다.

워드프레스 개발에서 wp_is_mobile()을 사용하시나요? CDN에 Vary 기능을 활성화하는 것을 잊지 마세요 - LikaCloud

Vary 공식 문서 보기

작동 방법

작동 방법은 다음과 같습니다:

CDN에서 활성화Vary 特性

그런 다음 워드프레스 테마의 함수 파일에서functions.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이 전체 사이트 캐싱을 켜면 해당 페이지가 모바일과 컴퓨터에 표시됩니다.