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)を使うのが王道です。