【WordPress】wp_is_mobileで簡単にPCとスマホの表示を切り替える方法｜ページキャッシュとの相性に注意

【WordPress】wp_is_mobileで簡単にPCとスマホの表示を切り替える方法 WordPress
2024.08.16

WordPressでは、スマートフォンやタブレットなどのモバイル端末とPCで表示を切り替えたい場面があります。そんなときに便利なのが、WordPressが標準で提供している関数 wp_is_mobile() です。ただしページキャッシュを使っている場合の注意点もあわせて解説します。

この記事でわかること

  • wp_is_mobile() の基本的な使い方
  • ページキャッシュ環境で意図しない表示になる重要な注意点
  • 実用的な応用例
スポンサーリンク

wp_is_mobileとは

wp_is_mobile() は、ユーザーが使用している端末がモバイルかどうかを判定する関数です。スマートフォンやタブレットからのアクセスであれば true を、PCなどそれ以外の端末からのアクセスであれば false を返します。

基本的な使い方

wp_is_mobile() はテンプレートファイルやウィジェット、ショートコードの中など、さまざまな場所で使用できます。

基本的な条件分岐
if ( wp_is_mobile() ) {
    echo '<p>スマートフォン用のコンテンツです。</p>';
} else {
    echo '<p>PC用のコンテンツです。</p>';
}

このコードをテンプレートファイル（例：header.phpやpage.php）に記述することで、端末に応じた表示の切り替えが可能です。

実用的な応用例

例えば、スマートフォンでは電話リンクを表示し、PCでは問い合わせフォームへのリンクを表示したい場合、以下のように記述できます。

端末に応じてリンク先を切り替える
if ( wp_is_mobile() ) {
    echo '<a href="tel:0123456789">電話する</a>';
} else {
    echo '<a href="/contact/">お問い合わせフォームへ</a>';
}

ページキャッシュとの相性に注意（重要）

ページキャッシュ環境では意図した端末に表示されないことがある
wp_is_mobile() は、リクエストごとにUser-Agent等を判定するだけで、キャッシュを考慮する仕組みは一切ありません。WP Super Cache・Cocoonの高速化設定などのページキャッシュ（静的HTML配信）を使っている場合、あるページが最初にキャッシュされた時点の判定結果がそのまま固定されます。例えば最初にPCユーザーがアクセスしてキャッシュが生成されると、それ以降にアクセスするスマートフォン利用者にもPC向けの内容が配信され続けてしまいます（逆にモバイル利用者が先にキャッシュを生成した場合はその逆）。

対策としては、次のいずれかを検討してください。

  • 可能ならCSSによるレスポンシブデザインに切り替える（サーバー側の判定に依存しないため、キャッシュの影響を受けない）
  • キャッシュプラグインにモバイル/PC別にキャッシュファイルを分ける設定がある場合は有効にする（例：WP Super Cacheの「モバイルデバイスのサポート」オプション）
  • wp_is_mobile()で分岐している該当ページだけキャッシュ対象から除外する

また、wp_is_mobile() はサーバーサイドでの判定であり、ブラウザのリサイズによる表示切り替え（レスポンシブ対応）には対応していません。ユーザーエージェントによって判定されるため、意図しない判定結果が出ることもある点にも注意が必要です。

関連するモバイル/PC表示の切り替え

表示の出し分けではなく、モバイルとPCで別々のURLへ振り分けたい場合はモバイルとPCで別々のページにリダイレクトする方法で解説しています。

よくある質問（FAQ）

Qwp_is_mobileを使ったキャッシュとの相性はどうですか？
Aページキャッシュを使用している場合、wp_is_mobile()の分岐がキャッシュに影響します。Varnish等のキャッシュシステムはUser-Agentで別々にキャッシュする設定が必要です。Cocoonの高速化設定を使っている場合も設定を確認してください。
Qwp_is_mobile()はどのような条件でtrueを返しますか？
AUser-Agentがモバイルデバイス（スマートフォン・タブレット含む）を示す場合にtrueを返します。iPadなどタブレットもtrueになることに注意が必要です。精度を上げたい場合は追加のUser-Agentチェックが推奨です。
QPCとスマホで異なるテンプレートファイルを読み込むには？
Afunctions.phpのtemplate_includeフィルターまたはget_template_part()の引数をwp_is_mobile()で分岐させる方法があります。レスポンシブデザインで対応できる場合はCSS対応が推奨です。

まとめ

  • 基本：wp_is_mobile()で端末に応じた条件分岐ができる
  • 重要な注意：ページキャッシュ環境では判定結果が固定されてしまう場合がある
  • 対策：レスポンシブデザイン優先、またはキャッシュのモバイル/PC別設定・対象除外

wp_is_mobile()は手軽ですが、キャッシュ環境での挙動を理解したうえで活用してください。