レスポンシブデザインでWEBサイトを作っていく中で、スマホ・タブレット・パソコンでそれぞれ表示させたいコンテンツ、または非表示にしたいコンテンツを振り分ける方法をご紹介します。スマホ・タブレット・PCの表示をそれぞれ変える条件分岐をする方法です。
はじめに、WordPressにはユーザーがモバイル端末を使用して訪問しているかどうかを判定する「wp_is_mobile」という関数があるのでご紹介します。
スポンサーリンク
目次
スマホかタブレットを判定する関数 wp_is_mobile
「wp_is_mobile」はモバイル端末であるかどうかを判定することができます。
スマートフォンまたはタブレットであることを判定する関数なので、この関数では「スマートフォンの場合」「タブレットの場合」といったように別々に分けて判定をすることができません。
wp_is_mobile()の使い方
1 2 3 4 5 6 7 8 9 10 11 12 13 | <?php if ( wp_is_mobile() ) : // スマホ・タブレットで表示させたい内容 else: // PC（モバイル端末以外）で表示させたい内容 endif; ?> |
スマホ・タブレットの場合とそれ以外の時で判定ができます。
スマートフォンの時だけの判定をしたい
上記で記載したように、wp_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 22 23 24 25 26 27 28 29 30 | <?php // スマートフォンを判別 function is_mobile(){ $useragent = array( 'iPhone', // iPhone 'iPod', // iPod touch '^(?=.*Android)(?=.*Mobile)', // 1.5+ Android '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('|', $useragent).'/i'; return preg_match($pattern, $_SERVER['HTTP_USER_AGENT']); } ?> |
こちらのコードでは配列にモバイルデバイスの種類を指定しています。
上記を記述することで、「is_mobile()」を使って条件分岐ができるようになりました。
is_mobile()を使ってみよう
1 2 3 4 5 6 7 8 9 10 11 12 13 | <?php if ( is_mobile() ) : // スマホで表示させたい内容 else: // タブレット・PCで表示させたい内容 endif; ?> |
まとめ
以上、WordPressでスマホのアクセスを条件分岐を使って変更する方法でした。
スマホ・タブレット・PCで表示を切り替えるときなど、レシポンシブデザインで活用できると思います！
スポンサーリンク
スポンサーリンク
