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

WordPressでは、スマートフォンやタブレットなどのモバイル端末とPCで表示を切り替えたい場面がよくあります。そんなときに便利なのが、WordPressが標準で提供している関数 wp_is_mobile() です。この関数を使えば、簡単に端末に応じた表示を切り替えることができます。

wp_is_mobileとは

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

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

if ( wp_is_mobile() ) {
  // スマホ表示用の処理
  echo '<p>スマートフォン用のコンテンツです。</p>';
} else {
  // PC表示用の処理
  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() はサーバーサイドでの判定であり、JavaScriptやCSSでのレスポンシブ制御とは異なります。そのため、ブラウザのリサイズによる表示切り替えには対応していません。ユーザーエージェントによって判定されるため、意図しない判定結果が出ることもある点に注意が必要です。

Q. wp_is_mobile()はどのような条件でtrueを返しますか？

A. User-Agentがモバイルデバイス（スマートフォン・タブレット含む）を示す場合にtrueを返します。iPadなどタブレットもtrueになることに注意が必要です。精度を上げたい場合は追加のUser-Agentチェックが推奨です。

Q. PCとスマホで異なるテンプレートファイルを読み込むには？

A. functions.phpのtemplate_includeフィルターまたはget_template_part()の引数をwp_is_mobile()で分岐させる方法があります。レスポンシブデザインで対応できる場合はCSS対応が推奨です。

Q. wp_is_mobileを使ったキャッシュとの相性はどうですか？

A. ページキャッシュを使用している場合、wp_is_mobile()の分岐がキャッシュに影響します。Varnish等のキャッシュシステムはUser-Agentで別々にキャッシュする設定が必要です。Cocoonのキャッシュも設定確認が必要です。

wp_is_mobile() を活用すれば、WordPressのテンプレート内で簡単にスマートフォンとPCで表示内容を切り替えることができます。電話番号の表示、画像のサイズ変更、ナビゲーションの出し分けなど、さまざまな場面で活用できるため、ぜひサイトに応じて取り入れてみてください。