MENU

clear
Zihuatanejo to me

ブログカテゴリー

最新の記事

メニュー

SNS

wordpressでモバイル判定

目次

    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の出し分けもメディアクエリを使用する必要がなくなるのでは。。。

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

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

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

    コメントを残す

    メールアドレスが公開されることはありません。 * が付いている欄は必須項目です

    arrow_upward

    Top