wordpressでモバイル判定

wordpressでモバイル判定

こんにちは。ウェブエンジニアのジワタネホです。

今日はwordpressでのモバイル判定に関しての備忘録を書きます。

誰かの参考になれば！！

背景・前提条件

当サイト(以下ZTM)はiPadにも対応したレスポンシブサイトです。

基本はcssのメディアクエリで表示を変更しています。

がしかし、

wordpressで目次を実装

の記事で紹介したページ内スクロールに対して、SPのみ対応すべき事象が発生。

具体的には、SPの場合は、headerがfixedする仕様となっているため、スクロールがヘッダー分ずれるw

初歩中の初歩www

要件

javascript側で表示がスマホの場合だけに何かをする時に便利なようにスマホ閲覧の場合のみにbodyに"is-mobile"classを付与したい。

サーバーサイドで判定してclassを付与すれば、javascript側では該当classがあるかないかの判定だけすれば良いようにする

ちなみにタブレットでの閲覧をスマホと判定して良ければ、wordpressで用意されている"wp_is_mobile()"を使用すれば良いんだけど、

ZTMはタブレットとスマホは別判定にしたいので、使用できない

あくまでも

閲覧デバイスがスマホの場合のみに"is-mobile"classを付与する

参考記事

https://whitebear-seo.com/wordpress-conditional-mobile-pc/

https://www.nxworld.net/wordpress/wp-body-class-adding-more-classes-and-alternative-method.html

コード

//スマートフォンを判別
function is_mobile(){
  $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
  );
  $pattern = '/'.implode('|', $useragents).'/i';
  return preg_match($pattern, $_SERVER['HTTP_USER_AGENT']);
}

//スマートフォンのみbodyに独自classを付与
if (is_mobile()) {
  add_filter( 'body_class', 'add_class_mobile' );
  function add_class_mobile( $classes ){
    $classes[] = 'is-mobile';
    return $classes;
  }
}

解説

解説のしようがないなww

細かいことは、参考記事を参照くださいwww

最後に

これで、javascript側でも

if($("body.is-mobile").length > 0){
  //スマホのみ実行する処理
}

ができるようになりました。

実装が終わって思ったのですが、php側で作った"is_mobile()"を使えば、cssの出し分けもメディアクエリを使用する必要がなくなるのでは。。。

レンダリングの速度を考えたら上記の方が効率は良さそうな気がする。

後日調べます。今日はここまで！

ご意見・ご感想はコメントまでお願いします。