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

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

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でのレスポンシブ制御とは異なります。そのため、ブラウザのリサイズによる表示切り替えには対応していません。ユーザーエージェントによって判定されるため、意図しない判定結果が出ることもある点に注意が必要です。

まとめ

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