wp_is_mobile()関数はiPadがモバイル扱い…iPadからのアクセスをスマホ表示ではなくPC表示にする方法!

is_mobileでiPadをPC扱いにする_eyecatch

WordPressでPCとスマホで表示を分けたい時に多用する「wp_is_mobile関数」ですが、iPadなどのタブレットもモバイルデバイスとして扱われてしまいます。

スマートフォンよりも画面サイズが大きく、ビューポートに余裕があるタブレットはPC表示になると思っていたのですが、スマホ表示になるようです。

タブレットでのアクセスは比較的少ないですが、せっかくレスポンシブデザインなのだから全ての端末で使いやすいようにしたいところ。

functions.phpに新たなis_mobile関数を定義することで、iPadでのアクセスがモバイルではなくPCになるように変更します。

wp_is_mobile関数ではiPadはモバイル扱い

サイドバーをwp_is_mobile関数で隠していると、iPadでもサイドバーが非表示になり変な余白ができてしまいます。
また、スマホ用に設計したメニューを使用することになり、ユーザービリティーによろしくないので対応しました。

is_mobileでiPadをPC扱いにする1

ChromeデベロッパーでのiPad Proアクセスの確認

Chromeの開発者ツールを使い、iPad Proでのアクセスを試してみるとこんな感じ。
パソコンとほとんど変わらないビューポートを持っているタブレットでスマホ用の画面が表示されると、広々とした画面に違和感があります。

wp_is_mobileの仕組み

WordPress関数の「wp_is_mobile」では「スマホ&タブレット」or「パソコン」という条件分岐ができます。

どのような条件で振り分けているのかを確認するにはプログラムコードを確認するのが手っ取り速いです。

wordpress > wp-includes > vars.php

にwp_is_mobile関数が定義されていますので確認してみましょう。

is_mobileでiPadをPC扱いにする2

wp_is_mobile()のコード内容

プログラム自体は簡単です。
「ユーザーエージェント」と呼ばれるWebブラウザから渡される情報の中身の文字列を見ることで「モバイル&タブレット」or「パソコン」かという判断をしています。

返り値がtrue:モバイルアクセス
返り値がfalse:PCアクセス

iPadのユーザーエージェントにはmobileも含まれるため、iPadでのアクセスがモバイル扱いになってしまうようです。

つまりこの条件ではmobileが含まれる=スマホ、またはiPadという感じ。

is_mobileユーザー関数の作成

「モバイル(スマホ)」or「タブレット&パソコン」という扱いにしたいので、子テーマのfunctions.phpに新しくis_mobile()という関数を作成してコチラを使用します。

以下のコードをfunctions.phpに追記し保存する。

//is_mobile関数からipadを除外する
function is_mobile() {
if ( empty( $_SERVER['HTTP_USER_AGENT'] ) ) {
  return false;
} elseif ( strpos( $_SERVER['HTTP_USER_AGENT'], 'mobile' ) !== false
&& strpos( $_SERVER['HTTP_USER_AGENT'], 'ipad' ) === false ) {
return true;
  } else {
return false;
  }
}

もっと良い方法があるかもしれないので使用する方は自己責任でお願いします。

is_mobileでiPadをPC扱いにする3

子テーマ内のfunctions.phpに追記

元のプログラムを参考にiPadでの条件分岐を付け加えました。
ユーザーエージェントに含まれる文字を見て、mobileとiPadでしか条件分岐しないシンプルなものです。

必要最低限ですが必要十分かな。
人によってはもっと細かくユーザーエージェントの指定をしている方も。

関数の使い方はwp_is_mobile()と同じです。

<?php if(is_mobile()): ?>
~ここにモバイルのみに表示したい内容~
<?php endif; ?>

サイドバーウィジェットに使用していたwp_is_mobile関数から、作成したis_mobile関数に書き換えて動作確認します。
is_mobileでiPadをPC扱いにする4iPad Proでのサイト表示が意図した結果になりました。

まとめ

・wp_is_mobile()関数は「スマホ&タブレット」or「PC」という条件分岐。

・「スマホ」or「タブレット&PC」に変更したい場合、functions.phpに新たに関数を作り、wp_is_mobileを使用している部分をこの関数に書き換える。

タブレットがモバイル端末かパソコンのどちらかと言われれば確かに難しいところがありますが、Wordpressで用意されている関数ではタブレットはモバイル扱いとなっているようです。

iPadの最新OSでは、デスクトップ用のページを表示するように設定している場合ユーザーエージェントにiPadではなくMacintoshが入るようです…
まだまだ改善の余地がありそうです。実機が欲しいところ。。。

しかしながらユーザーエージェントを最新のものに合わせて条件分岐を追加していくとなると骨が折れますね・・・

-サイト構築
-

© 2021 ソロ学