WordPressでパソコン・タブレット・スマートフォンを振り分ける条件分岐

Webサイトをスマートフォンやタブレットで快適に表示させる「レスポンシブデザイン」は、現代のWeb制作において欠かせない要素です。特にWordPressサイトでは、テーマやプラグインがモバイル対応をある程度担ってくれるため、一見すると「メディアクエリだけで十分」と感じるかもしれません。

しかし、いざ実際にスマートフォン限定で特定のコンテンツを表示・非表示にしたい、あるいは広告やCTAボタンの配置を切り替えたい――そんな細やかな対応を求められる場面になると、CSSだけでは限界があることに気づきます。

そこで活躍するのが、WordPressの「条件分岐タグ」です。たとえば wp_is_mobile() を使えば、モバイル端末かどうかを判定して表示内容を切り替えることが可能です。

とはいえ、この関数にも弱点があります。なぜなら wp_is_mobile() は、スマートフォンとタブレットを区別しないからです。

「iPhoneには表示したいけど、iPadには見せたくない」「タブレットではPCと同じ体験を提供したい」そんなニーズに応えるには、ひと工夫が必要です。

この記事では「wp_is_mobile()の仕組みと制約」「タブレットを除外してスマートフォンだけを判別する自作関数の作り方」「実際のテンプレートへの組み込み方」まで、初心者でも実装できるように丁寧に解説します。

メディアクエリの限界とPHPによる条件分岐の意義

レスポンシブデザインは完璧か？

たしかに、CSSのメディアクエリを使えば以下のように画面サイズごとにスタイルを変えられます。

@media screen and (max-width: 768px) { .ad-banner { display: none; } }

しかしこの方法では、HTMLの出力自体は全デバイスで同じです。つまり「非表示」になっているだけで、読み込まれるデータ量は変わらないのです。

「広告をスマホだけに表示したい」「重い画像をタブレットには表示させたくない」こういった場合には、PHPの条件分岐で出力そのものを制御した方が、パフォーマンスの最適化にもつながります。

wp_is_mobile()とは？その限界を理解しよう

関数の概要

wp_is_mobile() は、WordPress 3.4以降で利用できる組み込み関数です。アクセスしてきたユーザーエージェント（UA）をもとに、モバイル端末であるかを判定します。

使用方法はとても簡単です。

<?php if (wp_is_mobile()) : ?>
  <p>これはモバイル用のコンテンツです。</p>
<?php else : ?>
  <p>PCやタブレット用のコンテンツです。</p>
<?php endif; ?>

スマホだけを対象にできない理由

この関数の落とし穴は、iPhoneやAndroidスマホだけでなく、iPadやAndroidタブレットも「モバイル端末」として扱う点にあります。UA判定の内部処理が単純なため、スマホだけを分離することができません。

タブレットを除外した独自関数を作る

スマホだけ判定したい！

iPhoneやAndroidスマホのみをターゲットにしたい場合は、functions.phpに独自関数を追加しましょう。以下は、そのサンプルコードです。

<?php
function is_mobile() {
  $useragents = array(
    'iPhone',            // iPhone
    'iPod',              // iPod touch
    'Android',           // Android スマートフォン
    'dream',             // 古い Android 端末
    'CUPCAKE',           // Android 1.5
    'blackberry9500',    // BlackBerry Storm
    'blackberry9530',
    'blackberry9520',
    'blackberry9550',
    'blackberry9800',    // BlackBerry Torch
    'webOS',             // Palm Pre
    'incognito',         // その他 iPhone ブラウザ
    'webmate'            // その他 iPhone ブラウザ
  );
  $pattern = '/' . implode('|', $useragents) . '/i';
  return preg_match($pattern, $_SERVER['HTTP_USER_AGENT']);
}
?>

テンプレートでの使い方

実際のテンプレートでは以下のように使用します。

<?php if (is_mobile()) : ?>
  <div class="mobile-ad">
    スマホ専用広告
  </div>
<?php else : ?>
  <div class="desktop-ad">
    PC・タブレット用広告
  </div>
<?php endif; ?>

これで、スマホとタブレットを明確に分けた表示制御が実現できます。

まとめ

WordPressサイトをスマートフォンに最適化するには、見た目の調整だけでなく、出力するコンテンツの中身まで最適化することが重要です。

そのためには、CSSのメディアクエリに加えて、PHPの条件分岐でデバイスごとの表示内容をコントロールするのが効果的です。特に wp_is_mobile() だけに頼らず、スマートフォンだけを対象とした独自関数を使うことで、より柔軟で洗練されたUX（ユーザー体験）を提供できます。

本記事のポイントをおさらいすると…

1. メディアクエリは見た目だけ、PHPなら出力制御も可能
2. wp_is_mobile()は便利だが、タブレットも含まれる
3. スマホのみを判別したい場合は独自関数を作成
4. UAの更新には注意し、必要に応じて見直す

スマートフォンからのアクセスが全体の70〜80％を占める現代、モバイルファーストの思想を支える技術的工夫はますます重要になっています。「表示されるかどうか」ではなく「どう表示するか」まで設計できるとベストですね。