WordPress開発：wp_is_mobile()使用時にCDN Vary機能を有効にする

WordPress開発でwp_is_mobile()を使用する場合、CDNでVaryヘッダーを有効化することを忘れないでください。

攻略アシスタント

約1分

江蘇省

2025-11-14

4,312

以下のリンクからお買い物をしていただくと、コミッションを差し上げます。.

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はHTTP/1.1以降に追加された新しいHTTPレスポンスヘッダです。クライアントが同じURLを使ってオリジンサーバにリクエストを開始したとき、オリジンサーバに異なるバージョンのファイルコンテンツが存在すると、中間キャッシュシステム（ブラウザキャッシュ、コンテンツデリバリネットワークCDNなど）によってキャッシュされ、シナリオレスポンスファイルを区別できないことがあります。そのため、オリジンサーバーはHTTPレスポンスにVaryヘッダーを追加して、中間キャッシュシステムにどのリクエストヘッダを使用してコンテンツのキャッシュバージョンを区別するかを伝えることができます。

例えば、クライアントのリクエストがすべてhttps://www.example.com/test.pdfクライアントの言語で異なるバージョンのファイルを区別するために、ソース・サイトはHTTPレスポンス・ヘッダーに以下を追加する。 Vary: Accept-LanguageEdgeOneは、クライアントのリクエストに基づいてキャッシュを構築します。 Accept-Language コンテンツは異なるバージョンのキャッシュを作成する。

ユーザーAがhttps://www.example.com/test.pdfによって運ばれるリクエストヘッダはAccept-Language:zh-cnその場合、EdgeOneは文書Aで、文書Bで、文書Cで応答する。

ユーザーBがhttps://www.example.com/test.pdfによって運ばれるリクエストヘッダはAccept-Language:en-USEdgeOne は文書 B で応答する。EdgeOne が文書 B で応答しない場合、EdgeOne は応答しない。

WordPress開発でwp_is_mobile()を使う？CDNのVary機能を有効にすることを忘れないでください - LikaCloud

Varyの公式ドキュメントを見る

操作方法

操作方法は以下の通り：

CDNで有効にするVary 特性

次に、WordPressテーマの関数ファイルで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がフルサイト・キャッシングをオンにすると、対応するページがモバイルとパソコンで表示される。