WordPressでレスポンシブ対応やモバイル特有の表示を制御したいときに便利なのが wp_is_mobile()
関数です。
この記事では wp_is_mobile()
の基本的な使い方から、用途別のコード例、注意点まで丁寧に解説します。
目次
wp_is_mobile() とは?
wp_is_mobile()
は、現在アクセスしているユーザーの端末がスマートフォンやタブレットなどのモバイルデバイスかどうかを判定するための WordPress 組み込み関数です。
戻り値は以下のとおり:
- モバイル端末の場合:
true
- モバイル端末以外(主にPC)の場合:
false
基本的な使い方
最もシンプルな使い方は条件分岐として利用するケースです。
if ( wp_is_mobile() ) {
echo 'モバイル表示です';
} else {
echo 'PC表示です';
}
このようにして、端末によって出力内容を切り替えることができます。
よくある使用例
1. モバイル用のヘッダーに切り替える
if ( wp_is_mobile() ) {
get_header('mobile');
} else {
get_header();
}
このようにすることで、header-mobile.php
という別のテンプレートファイルをモバイル用に読み込むことができます。
2. モバイル用の広告を表示する
if ( wp_is_mobile() ) {
// モバイル用広告コード
echo '<div class="ad-mobile">Mobile Ad</div>';
}
広告コードを端末に応じて出し分けたいときに便利です。
3. モバイルとPCで別のCSSを読み込む
if ( wp_is_mobile() ) {
wp_enqueue_style( 'mobile-style', get_template_directory_uri() . '/css/mobile.css' );
} else {
wp_enqueue_style( 'desktop-style', get_template_directory_uri() . '/css/desktop.css' );
}
これは functions.php
の wp_enqueue_scripts
フック内で使います。
内部的な判定ロジック
wp_is_mobile()
は $_SERVER['HTTP_USER_AGENT']
をもとに、以下のような文字列が含まれているかを判定しています:
- iPhone
- Android
- Mobile
- Opera Mini
- BlackBerry
- Palm など
つまり、「ユーザーエージェントに依存している」ため、完全な精度は保証されません。
注意点と限界
- タブレットもモバイルとして判定される
→PCとスマホだけを区別したい場合には追加の工夫が必要です。 - ユーザーエージェントの偽装に弱い
→開発者ツールなどで簡単にPCからモバイル判定ができます。 - 画面サイズに応じた制御ではない
→CSSメディアクエリのようにビューポートサイズで制御したい場合には不向きです。
wp_is_mobile() は「補助的」に使うのがコツ
この関数は便利ですが、完全にデバイスを見分けるには不十分な場面もあります。
デザインはCSS(メディアクエリ)で、表示制御はPHPでという使い分けをすると、より柔軟で確実な設計が可能になります。
まとめ
ポイント | 内容 |
---|---|
何をする関数? | ユーザーがモバイル端末かどうかを判定する |
戻り値 | モバイルなら true 、PCなら false |
利用場面 | ヘッダーの切り替え、広告、CSS読み分けなど |
注意点 | タブレットもモバイル扱い/ユーザーエージェント依存 |