WordPress スマホ厳密判定 (PHPスニペット)

WordPressで「スマホの時だけ(iPadなどのタブレットは除外して)HTMLを出力したい」という場面で使える、安全なPHPカスタム関数のスニペット集です。

⚠️ なぜ標準の wp_is_mobile() を使ってはいけないのか?

WordPressには標準で wp_is_mobile() という条件分岐関数が用意されていますが、実はこれ、「iPadなどのタブレット」もスマホ扱い(true)にしてしまうという致命的な罠があります。
タブレットをPCビューで表示させているサイトでこれを使うと、タブレット閲覧時にレイアウトが豪快に崩れてしまいます。

💡 解決策:厳密なカスタム関数を作ろう
ユーザーエージェント(UA)から「iPhone」と「AndroidのMobile端末」だけを拾い上げ、iPadを除外する独自の is_smartphone() 関数を定義するのが実務での正解です。

📄 1. functions.php に追記するコード

お使いのテーマの functions.php の末尾に貼り付けてください。

<?php
/**
 * iPad等のタブレットを除外した厳密なスマートフォン判定
 */
function is_smartphone() {
  $ua = $_SERVER['HTTP_USER_AGENT'] ?? '';
  if ( strpos( $ua, 'iPhone' ) !== false || ( strpos( $ua, 'Android' ) !== false && strpos( $ua, 'Mobile' ) !== false ) || strpos( $ua, 'Windows Phone' ) !== false ) {
    return true;
  }
  return false;
}
?>

📄 2. テンプレート側での使い方 (header.php等)

上記の関数を定義すると、以下のように分岐処理が書けるようになります。

<?php if ( is_smartphone() ) : ?>
  <!-- ここにスマホ専用のHTMLや処理を書く -->
  <div class="sp-only-menu">スマホ用メニュー</div>

<?php else : ?>
  <!-- ここにPC・タブレット用のHTMLや処理を書く -->
  <div class="pc-menu">PC用メニュー</div>

<?php endif; ?>

🚀 さらに高度な判定が必要な場合は?(名作ライブラリのご紹介)

上記のスニペットは「とにかく軽く、シンプルにスマホだけを判定したい」という用途には最適ですが、案件によっては「iOSとAndroidで表示を変えたい」「タブレット専用の分岐を作りたい」といった複雑な要件が発生することがあります。
そんな時は、PHP界で長年愛されている最強のデバイス判定ライブラリ「Mobile Detect」の導入をおすすめします。

💡 Mobile Detect の基本的な使い方(導入の種)

使い方は実はとても簡単です。公式サイトから Mobile_Detect.php をダウンロードしてテーマフォルダに置き、使いたい場所(または functions.php)で以下のように読み込むだけで、強力な判定メソッドが使い放題になります。

<?php
// 1. ファイルを読み込んで準備する(テーマフォルダ直下に置いた場合)
require_once get_theme_file_path( '/Mobile_Detect.php' );
$detect = new Mobile_Detect;

// 2. 用意された強力なメソッドで分岐する
if ( $detect->isMobile() && !$detect->isTablet() ) {
  // ① スマホのみ(タブレットは除外)の処理
} elseif ( $detect->isTablet() ) {
  // ② タブレットのみの処理
} elseif ( $detect->isiOS() ) {
  // ③ iOS(iPhone / iPad)のみの処理
}
?>

※常に最新の端末情報(UA)に合わせてアップデートされているため、自作関数よりも安全で確実です。
🔗 詳細なメソッドや最新版のダウンロードは Mobile Detect 公式サイト(GitHub) をご確認ください。

🎨 CSSだけで見た目を切り替えたい場合は?

「不要なHTMLごと消してサイトを軽くしたい」場合は上記のPHP分岐が最強ですが、「単にスマホとPCでデザインや並び順を変えたいだけ」の場合は、CSSのメディアクエリ(@media)を使うのが王道です。

👉 CSSメディアクエリ自動生成ジェネレーター
ブレイクポイントを入力するだけで、スマホ用とPC用のCSS枠組み(SassのMixin含む)を一瞬で自動生成できます。