wp_is_mobile()が効かない原因はキャッシュ設定。2つの対応方法

以下、解説と対応方法をご共有します。

• WordPressのwp_is_mobile()による条件分岐はキャッシュ設定を有効にしていると動作しない
• スマートフォンでのキャッシュ設定を有効化していると、wp_is_mobile()による条件分岐が効かなくなる
• wp_is_mobile()ではiPhoneをモバイル端末判定できない？
• wp_is_mobile()が効かないときの対応方法2つ。キャッシュをOFFにする or 代わりの機能を利用する
• wp_is_mobile()の代わりにメディアクエリCSS、あるいはGoogle Tag Managerを利用する
• キャッシュ設定についてはレイヤーごとに確認する
• エックスサーバーにおけるキャッシュ設定項目（高速化）
• CDNを利用している場合、そもそもオリジンサーバーにUser Agentが送信されていない可能性

WordPressのwp_is_mobile()による条件分岐はキャッシュ設定を有効にしていると動作しない

スマートフォンでのキャッシュ設定を有効化していると、wp_is_mobile()による条件分岐が効かなくなる

プラグインの設定などでスマホでもキャッシュを有効にしていると、このwp_is_mobile()による条件分岐がうまく動作しないときがあります。

WordPressのwp_is_mobile()で条件分岐をするときは、キャッシュの設定に注意 – Webrandum

WordPressのwp_is_mobile()で条件分岐をするときは、キャッシュの設定に注意

WordPressには wp_is_mobile() という条件分岐タグがあって、これを使うことでデバイスごとに表示の出し分けが可能です。 wp_is_mobile()という条件分岐タグを使うと、スマホからアクセスしているときに true、それ以外の場合は false が返ってきます。 具体的な使い方はPHPのif文で下記のように書くことで、スマホとPCで表示するコードを出し分けられます。 ...

webrandum.net

wp_is_mobile()ではiPhoneをモバイル端末判定できない？

さらにこのwp_is_mobile()ですが、iOS13, iPadOSの登場により、iPhoneの場合にはモバイル端末判定されないという仕様もあるとのこと。

以前はiPhoneのユーザーエージェントに’Mobile’ が含まれていたので正しい判定結果が得られたのでしょうけれど、現在は違います。 どうやら iOS13 ,iPadOS が登場したことで、デスクトップ用Webサイトの表示をONにしたiPhoneでは wp_is_mobile() が False を返すというのが原因のようです。

iPhoneでWordPressのwp_is_mobile()が効かない理由

ただこの点は、WordPressのアップデートが進むことによって解消される可能性があります。

wp_is_mobile()が効かないときの対応方法2つ。キャッシュをOFFにする or 代わりの機能を利用する

さて、wp_is_mobile()が効かない大きな原因としてはスマートフォンからのアクセスにおいてキャッシュ設定を有効にしていること、ということが分かりました。

ここで、解決する方法としては大きく2通りあります。

1. スマートフォンアクセスに対してのキャッシュ機能をOFFにする
2. wp_is_mobile()を利用しない、代わりの機能で対応する

参考: WordPressのページキャッシュのせいでis_mobile()を使った分岐が死んでいた

一時的な対応や、簡単に対応をすませるなら、「 1. スマートフォンアクセスに対してのキャッシュ機能をOFFにする」で良いでしょう。

wp_is_mobile()の代わりにメディアクエリCSS、あるいはGoogle Tag Managerを利用する

しかし、高速化を優先するならキャッシュ機能は上手く使っていきたいところ。

基本的には、下記のようにメディアクエリCSS、またはGTMでの対応が良いと思います。

要素であればメディアクエリーを用いたCSSでの表示・非表示切り替え、JavaScript であれば Googleタグマネージャー を利用してスクリプトの読み込みトリガーを設定するとよいでしょう。

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

キャッシュ設定についてはレイヤーごとに確認する

キャッシュ設定はプラグインのみならず、以下さまざまな階層で確認をしていく必要があります。

• WordPressプラグイン
• Webサーバー
• レンタルサーバーのキャッシュ設定
• またはApache, Nginx等のキャッシュ設定
• CDN（利用している場合）

本件の場合、キャッシュ設定を疑われたのはサーバーであるエックスサーバーのキャッシュ機能と、CDNとして利用しているCloudFlareにおけるキャッシュ設定でした。

以下、エックスサーバーとCDN・CloudFlareでのキャッシュ設定についてそれぞれ解説していきます。

エックスサーバーにおけるキャッシュ設定項目（高速化）

CDNを利用している場合、そもそもオリジンサーバーにUser Agentが送信されていない可能性

CloudFlareなどのCDNを利用している場合には、実際にサーバー側でキャッシュが保存され返されているのはオリジンサーバ側ではなくCDN上のサーバーでしょう。

下記はCloudFrontについての記述です。

CloudFront からオリジンサーバに対して、User-Agent は送信されません。そのため、モバイルブラウザの判定に使用する wp_is_mobile() 関数を使うことができず、モバイル用のテーマの振り分けができません

CloudFront 配下での User-Agent の判定方法

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

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

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

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 を判定することで対応できるようです。 Cloudflare でも上記のように対応することは可能かもれしれませんが Understand Cache by Device Type (Enterprise plans only) - Cloudflare Help Center に書かれているとおり、公式の機能でデバイスタイプを切り分けてキャッシュするにはエンタープライズプランにアップグレードしなければいけません。（費用は見積もり） 解決方法としては WordPressの wp_is_mobile 関数でモバイル判定 | work.log で記載されているように要素であればメディアクエリーを用いたCSSでの表示・非表示切り替え、JavaScript であれば Googleタグマネージャー を利用してスクリプトの読み込みトリガーを設定するとよいでしょう。 その他にもいい方法があればコメントをいただけると嬉しいです。

aniu.ma

以上です。

スマートフォン閲覧時に予想される挙動がみられず、wp_is_mobile()が効いていないと思われる場合には上記の方法を試してみてください。