WordpressでPCとスマホで表示を分けたい時に多用する「wp_is_mobile関数」ですが、iPadなどのタブレットもモバイルデバイスとして扱われてしまいます。
スマートフォンよりも画面サイズが大きく、ビューポートに余裕があるタブレットはPC表示になると思っていたのですが、スマホ表示になるようです。
タブレットでのアクセスは比較的少ないですが、せっかくレスポンシブデザインなのだから全ての端末で使いやすいようにしたいところ。
functions.phpに新たなis_mobile関数を定義することで、iPadでのアクセスがモバイルではなくPCになるように変更します。
この記事の目次
wp_is_mobile関数ではiPadはモバイル扱い
サイドバーをwp_is_mobile関数で隠していると、iPadでもサイドバーが非表示になり変な余白ができてしまいます。
また、スマホ用に設計したメニューを使用することになり、ユーザービリティーによろしくないので対応しました。
ChromeデベロッパーでのiPad Proアクセスの確認
Chromeの開発者ツールを使い、iPad Proでのアクセスを試してみるとこんな感じ。
パソコンとほとんど変わらないビューポートを持っているタブレットでスマホ用の画面が表示されると、広々とした画面に違和感があります。
wp_is_mobileの仕組み
Wordpress関数の「wp_is_mobile」では「スマホ＆タブレット」or「パソコン」という条件分岐ができます。
どのような条件で振り分けているのかを確認するにはプログラムコードを確認するのが手っ取り速いです。
wordpress ＞ wp-includes ＞ vars.php
にwp_is_mobile関数が定義されていますので確認してみましょう。
wp_is_mobile()のコード内容
プログラム自体は簡単です。
「ユーザーエージェント」と呼ばれるWebブラウザから渡される情報の中身の文字列を見ることで「モバイル＆タブレット」or「パソコン」かという判断をしています。
- 返り値がtrue：モバイルアクセス
- 返り値がfalse：PCアクセス
iPadのユーザーエージェントにはmobileも含まれるため、iPadでのアクセスがモバイル扱いになってしまうようです。
つまりこの条件ではmobileが含まれる＝スマホ、またはiPadという感じ。
is_mobileユーザー関数の作成
「モバイル(スマホ)」or「タブレット＆パソコン」という扱いにしたいので、子テーマのfunctions.phpに新しくis_mobile()という関数を作成してコチラを使用します。
以下のコードをfunctions.phpに追記し保存する。
function is_mobile() {
if (isset($_SERVER['HTTP_USER_AGENT'])) {
$ua = $_SERVER['HTTP_USER_AGENT'];
$mobile = stripos($ua, 'Mobile');
$ipad = stripos($ua, 'iPad');
$macintosh = stripos($ua, 'Macintosh');
if (($mobile !== false) && ($ipad === false||$macintosh === false)){
return true;
} else {
return false;
}
}
}注意
もっと良い方法があるかもしれないので使用する方は自己責任でお願いします。
ユーザーエージェントを配列に格納して全チェックする方法が一般的です。
当記事の内容も同じ動作をしますが、正確性は分かりませんのでご了承ください。
元のプログラムを参考にiPadでの条件分岐を付け加えました。
ユーザーエージェントに含まれる文字を見て、mobileとiPadでしか条件分岐しないシンプルなものです。
必要最低限ですが必要十分かな。
2021.8.30追記
新しいOSのiPadではユーザーエージェントにiPadが無く、Macintoshがあるものがあるようなのでコードを改変しました。
関数の使い方はwp_is_mobile()と同じです。
php
<?php if ( is_mobile() ) : ?>
～ここにモバイルのみに表示したい内容～
<?php else: ?>
～ここにPCとタブレットに表示したい内容～
<?php endif; ?>
サイドバーウィジェットに使用していたwp_is_mobile関数から、作成したis_mobile関数に書き換えて動作確認します。
iPad Proでのサイト表示が意図した結果になりました。
追記
実機で上手くいってもChromeのデベロッパーツールでうまくいかないことがあります。逆もしかりです。
メディアクエリの指定と違ってユーザーエージェントだけで判別しているのでアクセスされる端末間の差が激しいです。
アクセス時に作成され、その都度更新されないキャッシュとの相性は最悪です。
キャッシュを使っているとどの端末でうまくいって、どの端末がダメなのかすごく分かりにくいので出来れば全種類の実機で確認したいところ…
まとめ
・wp_is_mobile()関数は「スマホ＆タブレット」or「PC」という条件分岐。
・「スマホ」or「タブレット＆PC」に変更したい場合、functions.phpに新たに関数を作り、wp_is_mobileを使用している部分をこの関数に書き換える。
タブレットがモバイル端末かパソコンのどちらかと言われれば確かに難しいところがありますが、Wordpressで用意されている関数ではタブレットはモバイル扱いとなっているようです。
iPadの最新OSでは、デスクトップ用のページを表示するように設定している場合ユーザーエージェントにiPadではなくMacintoshが入るようです…
まだまだ改善の余地がありそうです。実機が欲しいところ。。。
しかしながらユーザーエージェントを最新のものに合わせて条件分岐を追加していくとなると骨が折れますね・・・
