Cloudflare でページキャッシュを利用した時のデバイス判定(wp_is_mobile)

Cloudflare や Cloud Front といったCDNや、キャッシュ系プラグインを使ってHTMLキャッシュをおこなう時は、wp_is_mobile関数などのデバイス判定が効かなくなります。

Cloud Front であれば CloudFront 配下での User-Agent の判定 | Amimoto Help Center で記載されているとおり、Nginx Mobile Theme プラグイン を導入し User-Agent を判定することで対応できるようです。

あわせて読みたい
CloudFront 配下での User-Agent の判定wp_is_mobileの代替する関数またはフィルターフックを用いたモバイルブラウザの判定方法をご紹介します

Cloudflare でも上記のように対応することは可能かもれしれませんが Understand Cache by Device Type (Enterprise plans only) – Cloudflare Help Center に書かれているとおり、公式の機能でデバイスタイプを切り分けてキャッシュするにはエンタープライズプランにアップグレードしなければいけません。(費用は見積もり)

Cloudflare Help Center
Understand Cache by Device Type (Enterprise plans only)
Understand Cache by Device Type (Enterprise plans only)Learn how to control cache for specific device types. Overview The Cloudflare Page Rules app allows Enterprise domains to cache content by device type.  This a...

解決方法としては WordPressの wp_is_mobile 関数でモバイル判定 | work.log で記載されているように要素であればメディアクエリーを用いたCSSでの表示・非表示切り替え、JavaScript であれば Googleタグマネージャー を利用してスクリプトの読み込みトリガーを設定するとよいでしょう。

マーケティングオートメーションツール SATORI | 上戸彩さんTVCM公開中
【GTM活用】設定しておきたい5つのトリガー - マーケティングオートメーションツール SATORI | 上戸彩さんT...
【GTM活用】設定しておきたい5つのトリガー - マーケティングオートメーションツール SATORI | 上戸彩さんT...GTM(Googleタグマネージャー)は基本的に「ページのHTMLの編集無しでタグの追加ができる」便利なツールですが、いかんせん、ツールを導入しても使い方がわからなければ設...

その他にもいい方法があればコメントをいただけると嬉しいです。

よかったらシェアしてね!

この記事を書いた人

Susumu Seinoのアバター Susumu Seino Lead Member

9歳から独学でプログラミングをはじめ、2014年にフリーランスのWebプログラマーとして独立。2019年にデジタルマーケティング事業をおこなう「aniuma OÜ」をエストニアで設立。特定の住居を持たないデジタルノマドとして、リモートワークで世界中を働きながら旅をする。

コメント

コメントする

目次
閉じる