モバイルを判定するための関数について

公開日:2021(令和3)年10月10日/最終更新日:

WordPressのカスタマイズ方法についての画像



既に先人の方々がたくさん執筆されていることですが、本テーマの技術メモとして。

WordPressでは、wp_is_mobile()という組み込み関数が既に用意されていて、以下のように記述することでモバイル端末からのアクセスだったら..という条件を加えることができます。

PHPの処理ごとに独立させる場合

<?php if(wp_is_mobile()): ?>
モバイル時に処理する内容
<?php endif; ?>

1つの処理として記述する場合

<?php if(wp_is_mobile()){
モバイル時に処理する内容
}
?>

逆にモバイルでないとき..というのを書く場合には、elseでくくるのもいいのですが、単純に「!wp_is_mobile」と先頭に「!」を付けることで済みます(私的にはこの方が見やすいので好きです)。

この「wp_is_mobile」関数は、アクセスしてくる端末の情報(User Agent)によって判断をしているわけですが、タブレットの場合(特にipadの場合ですが、その他の場合もあり)もモバイルとして判定され、タブレット表示で間延びしてしまうことがあります。

そこで先人の知恵として、よく掲載されているのが、「モバイルであることの条件を限定する別のユーザー定義関数を用意する」ことです。

調べると、一応wp_is_mobile()にはフィルタフック(もともとの関数の内容に何かを加える)が用意されているのを利用して、判断基準をごにょごにょするコードが紹介されている記事も見かけるのですが、試しにやってみたところ、私のサイト(HABONEテーマを使ったサイト)では、あくまでもデベロッパーツール上ではうまく判断されないようでした。

この方法でうまくいけばよかったのですが、前述した「モバイルであることの条件を限定する別のユーザー定義関数を用意する」ということになると、ユーザー定義関数を用意した後、テーマ内に使っている「wp_is_mobile」の記述をすべて書き換えなければならない状況となり少々面倒ではあるものの、よりきちんと動いた方がいいということで、【HABONE】では以下のユーザー定義関数を使って判別を行っています。

/***** モバイル判定をスマホだけに限定 *****/
if ( !function_exists( 'is_mobile' ) ){
//スマホ表示分岐
function is_mobile(){
  if (!isset($_SERVER['HTTP_USER_AGENT'])) {
    return false;
  }
  $useragents = array(
    'iPhone', // iPhone
    'iPod', // iPod touch
    'Android.*Mobile', // 1.5+ Android *** Only mobile
    'Windows.*Phone', // *** Windows Phone
    'dream', // Pre 1.5 Android
    'CUPCAKE', // 1.5+ Android
    'blackberry9500', // Storm
    'blackberry9530', // Storm
    'blackberry9520', // Storm v2
    'blackberry9550', // Storm v2
    'blackberry9800', // Torch
    'webOS', // Palm Pre Experimental
    'incognito', // Other iPhone browser
    'webmate' ,// Other iPhone browser
    'Mobile.*Firefox', // Firefox OS
    'Opera Mini', // Opera Mini Browser
    'BB10', // BlackBerry 10
  );
  $pattern = '/'.implode('|', $useragents).'/i';
  return preg_match($pattern, $_SERVER['HTTP_USER_AGENT']);
}
}

コードの引用元:Cocoonテーマ内のソース

これをテーマのfunctions.phpへ追記するだけで、「is_mobile()」という条件を書けば、ほぼスマートフォンとそれ以外という分岐ができるようになります。

ほぼと書いたのは、これで条件すべてではない可能性があるからです

先頭行で「同じ名前の関数が既に定義されていなかったら..」という条件を加えているので、どのテーマに使ってもまず問題ないとは思いますが、2点ほど注意点があります。それは

  1. 既に同じ名前で別の条件を持つユーザー定義関数がある場合には、そちらが優先されてしまうこと(つまり追加したコードは無効になること)
  2. functions.phpの中で、最初にis_mobile(書き換え前のwp_is_mobile)関数が出てくる前に書かないと、未定義エラーとなること

です。

1の場合は先頭と末尾の「同じ名前の関数が既に定義されてなかったら」という部分を、既に定義されている関数側に追加し、新たに追加するコードからこの部分を削除する(順序を逆にする)ことで解決できますが、親テーマでの編集はテーマ更新によってふたたび書き換えられる可能性があるので、ユーザー定義関数名を別名(例:new_is_mobileなど)にした方が無難でしょう。

2の場合は、テーマエディター上で更新をクリックした時にエラー行がずらっと表示されるので、「ユーザー定義関数を書く前に使おうとしたのね」と冷静に判断して、よりfunctions.phpの先頭に近い行へ書くようにすれば解決します。


ちなみに自作テーマなどで、wp_is_mobile関数が記述されている箇所をすべて目で探すのは大変ですから、「String Locator」というプラグインを使って探すともれなく変更できます(書き換えは自力でする必要はありますが..)

おまけ is_mobile関数の使用例

せっかく「is_mobile」が使えるようになったので、実際に使用する例として、モバイル時には「is-mobile」、パソコン(+タブレット)時には「is-pc」というbodyclassを付与して、それぞれ用のデザインをstyle.cssへ書いて実現する方法を以下のページで紹介しています。

よかったら一度見てみてくださいね。