レスポンシブデザインのWEBサイトの場合、以下の様にPCとスマホで表示する要素を切り替えたいケースが多くあります。
・PCとスマホで表示させる要素を別々にする。
・PCでは要素を表示させるが、スマホでは要素を非表示にする。
・PCでは要素を非表示にするが、スマホでは要素を表示させる。
CSSであれば、メディアクエリを使って「display:none」と「display:block」で要素の表示非表示を操作することができます。デバイスの横幅を基準に、表示非表示を切り替えるやり方ですね。
今回はこれとは別のやり方をご紹介します。
サイトにアクセスしているデバイスを判別して表示非表示を切り替えるやり方です。
PCで観覧している場合は要素Aを表示させるが、スマホなら要素Bを表示させる。
PCで観覧している場合は要素を表示させるが、スマホなら非表示にする。
PCで観覧している場合は要素を非表示にするが、スマホでは要素を表示させる。
WordPressの関数「wp_is_mobile()」を使えば、上記のようにデバイスを判別して要素の表示非表示を切り替えることができます。
やり方を詳しく見ていきましょう。
wp_is_mobile()ってどんな関数なの?
wp_is_mobile()とは、「Mobile」や「Android」のモバイル端末特有の文字列がユーザーエージェントに含まれている場合、モバイルからのアクセスだと判断して条件分岐することができる関数です。
この条件分岐があれば、「モバイルからのアクセスだから○○、それ以外(PC)からのアクセスだから○○」と条件分岐することができます。
wp_is_mobile()は、ユーザーエージェントに以下の文字列が含まれている場合、モバイル端末からのアクセスだと判断します。
- iPod Touch
- iPhone
- iPad
- Android
- Kindle
- BlackBerry
- Windows Phone
- Opera Mini
- Opera Mobile
- Silk
上記を見ても分かりますが、wp_is_mobile()は「iPad」などのタブレットからのアクセスも、モバイル端末からのアクセスだと判断します。
wp_is_mobile()では、PCとスマホで条件分岐することができますが、PCとタブレットとスマホで条件分岐することはできません。
つまり、PCなら要素A、タブレットなら要素B、スマホなら要素Cという条件分岐はできないということです。
wp_is_mobile()を使ってPCとスマホで要素を自在に切替える手順
wp_is_mobile()を使ってPCとスマホで要素を自在に操る方法を詳しく解説していきます。
手順1:wp_is_mobile()をテーマで有効化する
使用中のテーマでwp_is_mobile()が利用できるようにしましょう。
方法は簡単で、以下のコードをfunctions.phpに追記するだけです。
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']);
}
手順2:条件分岐でPCとスマホの要素を自在に切り替える。
ここでご紹介するコードは、テーマファイルの中でしか動作しません。
投稿や固定ページ内で使用したい場合は、後述する説明を確認してください。
PCとスマホで要素を切り替えたい場合
PCとスマホで要素を切り替えたい箇所に、以下のコードを記述します。
<?php if (is_mobile()) :?>
スマホからの観覧時に表示させる内容を記述します。
<?php else: ?>
PCからの観覧時に表示させる内容を記述します。
<?php endif; ?>
PCで観覧している場合は要素を表示、スマホなら非表示にする場合
PCで観覧している場合は要素を表示させるが、スマホなら非表示にする場合は、以下の様なコードを記述します。
<?php if (is_mobile()) :?>
<?php else: ?>
PCからの観覧時に表示させる内容を記述します。
<?php endif; ?>
スマホからの観覧時に表示させるコンテンツを記述しないことで、スマホから観覧した時は何も表示されません。PCから観覧した時は、PCからの観覧時に表示させる内容が表示されます。
PCで観覧している場合は要素を非表示、スマホでは表示する場合
PCで観覧している場合は要素を非表示にするが、スマホでは要素を表示させる場合は、以下の様なコードを記述します。
<?php if (is_mobile()) :?>
スマホからの観覧時に表示させる内容を記述します。
<?php else: ?>
<?php endif; ?>
PCからの観覧時に表示させるコンテンツを記述しないことで、PCから観覧した時は何も表示されません。スマホから観覧した時は、スマホからの観覧時に表示させる内容が表示されます。
まとめ
PCとスマホで表示する要素を自在に操る条件分岐に関してまとめてみました。
レスポンシブデザインのサイトを作る時、よくお世話になるコードです。
スマホの利用者数が増え続けている現在、覚えておいて損のないコードです。
この機会にマスターしてはいかがでしょうか?
よく使う条件分岐を42種類を以下の記事にまとめてみたのでご確認ください。
⇒ 【保存版】WordPressの条件分岐を42個まとめてみました!
コメントを残す