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

最新の更新日
May 2, 2022 1:16 PM
Target Keywords
vol.

クライアント様から、「WordPressテーマをカスタマイズしフッターを表示させているのですが、スマートフォンからの閲覧時にフッターエリアが表示されません。」とご相談を受けました。

見てみると、フッターエリア部分はget_footer()でfooter.phpを呼び出しているようなのですが、このfooter.php内の記述でwp_is_mobile()によってユーザーエージェントを判別。 スマートフォン版の場合にsp版フッターエリアを表示させる、という構成をとっているようでした。

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

image

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

メディアクエリCSSについては下記の記事。

Javacriptについて、Google Tag Managerを利用する場合は下記の記事。

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

wp_is_mobile()の代わりの機能としては上記となります。では、キャッシュ機能をOFFにして対応したい場合は具体的にどうすれば良いのでしょうか。

冒頭でご紹介を受けたクライアント様サイトでは、WordPressにおいてはキャッシュプラグインを導入しておりませんでした。

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

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

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

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

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

Webサーバー、というよりレンタルサーバー設定の例になりますが、エックスサーバーにおいてキャッシュ関連の設定は下記のとおりです。

エックスサーバーにおけるキャッシュ設定(高速化):

  • Xアクセラレータ
    • Xアクセラレータver.2においては、phpファイルもキャッシュ対象となる
  • サーバーキャッシュ設定
  • ブラウザキャッシュ設定

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

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

ただ、CDNの場合はキャッシュ云々の問題以前に、CDNの仕様によっては(利用プランによりますが)CDNからオリジンサーバにUser Agentが送信されることがないようです。

User Agentのデータがオリジンサーバーに送信されないため、判別できずにwp_is_mobile()が機能しなくなるという訳ですね。

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

CloudFront からオリジンサーバに対して、User-Agent は送信されません。そのため、モバイルブラウザの判定に使用する wp_is_mobile() 関数を使うことができず、モバイル用のテーマの振り分けができません
Cloudflare や Cloud Front といったCDNや、キャッシュ系プラグインを使ってHTMLキャッシュをおこなう時は、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タグマネージャー を利用してスクリプトの読み込みトリガーを設定するとよいでしょう。 その他にもいい方法があればコメントをいただけると嬉しいです。

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

以上です。

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