STINGER5でスマホとタブレットとPCの分岐を行う方法
2018/04/22
本エントリーの目次
WordPressを使用したブログのカスタマイズをしていると、こう思うことがありませんか？
スマホとタブレットとPCで、異なる処理を行いたい！
たとえばこのブログでも利用している、Google AdSense。
その出力コードを、スマホ、タブレット、PCでそれぞれ違うコードを使用したい。
なんてことは結構あるんじゃないでしょうか。
そうすることで広告の出力位置は同じでも、出力する広告のサイズや広告タイプを変えることが可能になります。
そこで今回は、このスマホとタブレットとPCで異なる処理を行わせたい場合の、簡単な分岐の作り方をご紹介します！
スマホとタブレットとPCを判別して、分岐する方法
このブログでは、WordPressのテーマにSTINGER5を使用しています。
その場合、以下のPHPコードを使用することで、アクセス元がスマホ、タブレット、PCのどれであるかを判別し、処理を分岐させることが可能です。
1 2 3 4 5 6 7 8 9 | <?php if(is_mobile()) { ?> <!-- スマホ --> <?php } else { ?> <?php if ( wp_is_mobile() ) { ?> <!-- タブレット --> <?php }else{ ?> <!-- PC --> <?php } ?> <?php } ?> |
STINGER5のテーマを使用していれば、このようにとっても簡単に判別・分岐させることができます。
後はそれぞれの分岐に、処理を記述するだけでOK！
どんな仕組み？
is_mobile()メソッドは、スマホとそれ以外を分岐するメソッド、wp_is_mobile()はPC以外とPCに分岐するメソッドです。
そのためまずスマホかどうかを判別、次にPC以外かどうかを判別することで、それぞれを判別、分岐しています。
STINGER5以外では動かないよ？
この手法は、STINGER5のテーマを使用していない場合、正しく動作しない場合があります。
それはis_mobile()メソッドが、宣言(定義)されていないため。
STINGER5では、テーマ内のfunctions.php内に、このis_mobile()メソッドが宣言されています。
ですがテーマによっては、これが宣言されておらず、呼び出しができないため、エラーを発生させてしまいます。
その場合は、以下のコードをテーマ内、もしくは子テーマ内のfunctions.phpに記述することで、動作するようになるはず。
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 | 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']); } |
尚、wp_is_mobile()は、WordPress3.4以降のバージョンに標準で宣言されているため、コードの追加は必要ありません。
アイデア次第で、様々なことに使えるはず！
今回ご紹介したスマホ、タブレット、PCのどれであるかを判別し、処理を分岐する方法は、アイデア次第で様々なことに使えます。
ぜひ、いろいろな用途に活用してみてください！