WordPressでPC・タブレット・スマホを振り分ける条件分岐の正解

Web制作
WordPress（ワードプレス）

「スマホのときだけこのバナーを出したい」「タブレットではPCと同じ表示にしたい」――WordPressサイトを触っていると、こんな端末ごとの出し分けで手が止まることがありますよね。検索するとwp_is_mobile()という関数が必ず出てくるので、とりあえずコピペしてみたものの、なぜか思った通りに動かない。私もWeb制作を長年やってきて、この相談は何度も受けてきました。

結論から言うと、端末の出し分けには順番があります。まずはCSSのレスポンシブ（メディアクエリ）で対応し、どうしてもPCとモバイルで「中身そのものが別物」になる場合だけ、サーバー側のwp_is_mobile()で条件分岐する――これが2026年現在の現実的な正解です。

多くの解説記事は、いきなりwp_is_mobile()や自作のユーザーエージェント判定から入ってしまいます。でもそれは順番が逆で、本来はもっと手前で解決できることがほとんどなんです。順番を間違えると、キャッシュとぶつかって表示が崩れたり、新しい端末が出るたびにコードを直す羽目になったりします。

この記事では、なぜCSSが基本なのか、wp_is_mobile()でできること・できないこと（タブレット判定の曖昧さ、キャッシュとの相性）、JavaScriptで判定するときの注意点までを、初心者の方でも判断できるように整理しました。読み終えるころには、自分のケースでどの方法を選べばいいかが、迷わず決められるはずです。

大前提：端末の出し分けは「CSSのレスポンシブ」が基本

本題のPHP条件分岐に入る前に、どうしても先に伝えておきたいことがあります。端末ごとの見た目の調整は、その大半がCSSのメディアクエリだけで解決できます。これが今の主流であり、最初に検討すべき方法です。

メディアクエリでレイアウトを切り替える

メディアクエリは、画面の幅などの条件に応じてスタイルを切り替える仕組みです。たとえば画面幅が768px以下のときだけ要素を消したり、レイアウトを縦並びにしたりできます。

/* 画面幅が768px以下のとき適用 */
@media (max-width: 768px) {
  .pc-only { display: none; }   /* PC向け要素を隠す */
}

/* 画面幅が769px以上のとき適用 */
@media (min-width: 769px) {
  .sp-only { display: none; }   /* スマホ向け要素を隠す */
}

MDN（Mozillaの公式ドキュメント）でも、レスポンシブデザインはこのメディアクエリで実現するのが基本とされています。ポイントは、ユーザーエージェント（ブラウザが名乗る端末情報）に頼らず、実際の画面サイズや機能を見て切り替えられること。だから新しい端末が出ても、幅さえ合っていれば自動的に正しく表示されます。「端末名」ではなく「画面の条件」で出し分けるのが、メンテナンスの楽な作り方です。

なぜCSSが先なのか

理由はシンプルで、CSSなら端末を特定しなくても済むからです。スマホもタブレットも年々新しい機種が出ますが、画面幅という物差しで判断すれば、いちいち機種名のリストを更新する必要がありません。サーバー側で「この端末はスマホ、これはタブレット」と判定する方式は、リストの保守がついて回ります。

さらに、WordPressはキャッシュ（生成済みのページを使い回す高速化の仕組み）と組み合わせて使うことがほとんどです。CSSでの出し分けはこのキャッシュと相性がよく、同じHTMLを配っても表示側で勝手に切り替わります。一方、サーバー側でHTMLそのものを変える方式は、キャッシュとぶつかると事故のもとになります（これは後ほど詳しく説明します）。

出典：メディアクエリの使用 – MDN Web Docs

関連記事：Googleモバイルファーストインデックスの影響と対応策

本当に別物を出したい時だけ：wp_is_mobile()の出番

ではwp_is_mobile()はいつ使うのか。答えは、PCとモバイルで「表示するHTMLの中身そのもの」を変えたいときだけです。見た目を隠すのではなく、出力する内容を丸ごと差し替えたい場面ですね。

wp_is_mobile()とは

wp_is_mobile()は、アクセスしてきた端末がモバイルかどうかをtrue／falseで返すWordPress標準の関数です。WordPress公式リファレンスによると、この関数はバージョン3.4.0で追加され、6.4.0からはSec-CH-UA-MobileというHTTPヘッダーも判定に使うよう改良されています。基本的にはブラウザが送ってくるユーザーエージェント文字列を見て判断する仕組みです。

使い方はテンプレートファイル（single.phpなど）に直接書きます。たとえば、モバイルとそれ以外で表示内容を分けるならこうです。

<?php if ( wp_is_mobile() ) : ?>
  <p>モバイル端末向けのコンテンツです。</p>
<?php else : ?>
  <p>PC向けのコンテンツです。</p>
<?php endif; ?>

見た目を消すだけのCSSと違い、こちらはfalse側のHTMLそのものが出力されません。重い処理や大きな画像を端末によって完全に外したいときは、この「中身を出さない」挙動が効いてきます。

使いどころの具体例

たとえば、PC版では大きな比較表やインタラクティブな図を出すけれど、モバイルでは軽量なテキスト版に差し替える。あるいは、モバイル専用の問い合わせフォームに切り替える。こうした「CSSで隠すだけでは無駄な読み込みが残ってしまう」「そもそも出力する要素が違う」ケースが、サーバー側分岐の出番です。逆に、ただ表示位置を変える・余白を詰める程度なら、わざわざPHPを持ち出す必要はありません。

出典：wp_is_mobile() – WordPress Developer Resources

wp_is_mobile()の限界を正しく知っておく

便利な関数ですが、過信は禁物です。公式ドキュメントにもはっきり書かれている弱点が2つあります。ここを知らずに使うと、かえってトラブルを抱え込みます。

タブレットはモバイル扱いになる

1つ目は、タブレットも「モバイル」と判定される点です。公式リファレンスには「この関数はタブレットでもtrueを返す。タブレットもモバイル機器とみなされるため」と明記されています。つまり、iPadやAndroidタブレットは、スマホと同じ扱いになります。

そのため「スマホには出すけどタブレットには出さない」「タブレットはPCと同じ表示にしたい」といった三段階の振り分けは、wp_is_mobile()単体ではできません。これは関数の作りがそうなっているので、設定では変えられない仕様です。冒頭で触れたタイトルの「タブレット」を厳密に分けたい場合、ここが最初の壁になります。

昔の解説では、ユーザーエージェントから機種名（iPhone、Androidなど）を正規表現で拾う自作関数で分ける手法がよく紹介されていました。私も過去のこの記事で書いていました。ですが今は、その手のリストは新機種のたびに古くなり、判定漏れや誤判定の原因になります。タブレットだけを厳密に分けたいなら、まずCSSのメディアクエリで画面幅を基準に分けられないかを先に検討するのが安全です。機種名の追いかけっこは、よほどの理由がない限り避けたほうがいいというのが、長年やってきた私の実感です。

キャッシュとの相性に要注意

2つ目は、キャッシュとの相性です。公式ドキュメントは「ページキャッシュを使う場合、モバイル用と非モバイル用でキャッシュを別々に保持しなければならない」と警告しています。

どういうことかというと、キャッシュは一度作ったHTMLを次の人にもそのまま配ります。もし最初にPCの人がアクセスしてPC版HTMLがキャッシュされると、次に来たスマホの人にもPC版が配られてしまう、という事故が起きます。サーバー側で出し分けるなら、キャッシュプラグインやサーバー側キャッシュを「モバイル別キャッシュ」に対応させる設定が必須です。この一手間を忘れると、出し分けたつもりが全員に同じものが出てしまいます。

CSSのレスポンシブを基本に勧めるのは、まさにこの落とし穴を避けられるからでもあります。CSSなら全員に同じHTMLを配って問題ないので、キャッシュ設定で悩む必要がありません。

出典：wp_is_mobile() – WordPress Developer Resources

JavaScriptで判定する場合の注意点

「PHPは触りたくないから、JavaScriptで端末を見分けたい」という方もいます。たしかにブラウザ側でも端末情報は取れますが、こちらにも注意点があります。

画面幅で判定するなら matchMedia

JavaScriptで画面幅をもとに分岐したいなら、CSSのメディアクエリと同じ条件をそのまま扱えるwindow.matchMedia()が定番です。

if ( window.matchMedia('(max-width: 768px)').matches ) {
  // 画面幅768px以下のときの処理
  console.log('スマホ・小さめ画面向け');
} else {
  // それ以外
  console.log('PC・大きめ画面向け');
}

これならCSSと同じ「画面の条件」で判断できるので、機種名のリストを持つ必要がありません。JavaScriptで分岐するときも、できるだけ画面幅や機能を基準にし、ユーザーエージェントでの機種判定は最後の手段にするのが鉄則です。

ユーザーエージェント判定の弱点

JavaScriptでも、navigator.userAgentから機種名を拾う方法は使えます。ただしPHPの自作判定と同じで、ユーザーエージェントは偽装もできますし、新しい端末が出るたびに判定がずれます。さらにJavaScriptの場合、HTMLが表示されたあとに切り替わるため、一瞬だけ違う表示が見えてしまう（チラつく）こともあります。SEOの観点でも、コンテンツの中身そのものをJSで大きく入れ替えるのは慎重に。JavaScriptは「ちょっとした補助」にとどめ、表示の根幹はCSSかサーバー側で組むのが安全です。

出典：Window: matchMedia() メソッド – MDN Web Docs

関連記事：スマートフォン端末で電話発信するa要素「tel」をPC版で無効にする方法

まとめ：迷ったら「CSSが先、サーバー側は最後」

WordPressで端末ごとに表示を振り分ける方法を、2026年の視点で整理してきました。大事なのは手段そのものより、選ぶ順番です。

まず検討するのはCSSのレスポンシブ（メディアクエリ）。見た目の調整やレイアウトの切り替えは、その大半がこれで解決します。画面幅で判断するので機種名のリストもいらず、キャッシュとの相性もよく、新しい端末が出ても自動で対応できます。

CSSで隠すだけでは足りず、PCとモバイルで出力するHTMLの中身そのものを変えたいとき――そのときだけwp_is_mobile()でサーバー側の条件分岐を使います。ただしこの関数はタブレットもモバイル扱いにする点と、キャッシュをモバイル別に分ける設定が必須な点を必ず押さえてください。ここを忘れると、出し分けたつもりが全員に同じ表示になる事故が起きます。

JavaScriptで判定するならwindow.matchMedia()で画面幅を見るのが基本。navigator.userAgentでの機種判定は偽装やチラつきの問題があるので、あくまで補助にとどめましょう。

本記事のポイントをおさらいします。

  1. 見た目の出し分けは、まずCSSのメディアクエリで対応する
  2. HTMLの中身を別物にしたい時だけwp_is_mobile()でサーバー側分岐
  3. wp_is_mobile()はタブレットもモバイル扱い。三段階の厳密な振り分けは苦手
  4. サーバー側分岐はキャッシュをモバイル別に分ける設定が必須
  5. JSはmatchMedia()で画面幅判定が基本。UA判定は最後の手段

機種名を追いかける時代は、もう終わりました。「どの端末か」ではなく「画面がどんな条件か」で考えると、出し分けはぐっとシンプルになります。まずはCSSで足りないか試して、それでも届かないところだけサーバー側に頼る。この順番を守れば、保守のラクな、長く使えるサイトになりますよ！

PHP Web制作 WordPress

関連する記事