スマホやタブレットでサイトを見ることが増えている現代。
PCの時にはこの内容、スマホの時にはこの内容、タブレットの時にはこの内容を表示させたい！となる時があります。
例えば画像であったりとか。
PCでサイトを見た時には横幅が大きい画像でも大丈夫ですが、スマホやタブレットで見た時には画像が小さくなってしまうため、別の画像を用意しなきゃいけない…そしてスマホやタブレットで見た時にはその画像に差し替わるようにしなきゃいけない…なんてことがあったりとか。
そんな時にWordPressでサイトを制作していたら、PHPの端末判別によってどの端末でサイトを見ているかによって表示内容を切り替えることができます！
そこで今回は端末判別についてまとめてみたいと思います！
目次
WordPressのデフォルトで用意されているwp_is_mobile
まず初めに紹介したいのがwp_is_mobileというタグ。
これはWordPressがデフォルトで用意している端末判別のタグになります！
これを使う時には、以下のようにコードを書きます。
<?php if(wp_is_mobile()): ?> スマホ・タブレットで見た時の表示内容 <?php else: ?> PCで見た時の表示内容 <?php endif; ?>
ただし、このコードだとスマホとタブレットが一緒の端末として判別されてしまいます。
「スマホとタブレットではそれぞれ違う画像を表示させたい…」
という時には使えない…ということですね(´・ω・｀)
PCとスマホで端末判別
そこで次に紹介するのはPCとスマホで端末判別してくれるタグになります。
これはまず初めにfunctions.phpに以下のタグを記述する必要があります。
(※もしfunctions.phpに以下のコードしか書かない場合は、一番最初に<?php、最後に; ?>を忘れずに記述ください！)
function is_mobile() {
$useragents = array(
'iPhone', // iPhone
'iPod', // iPod touch
'Android', // 1.5+ Android
'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']);
}
上のコードをfunctions.phpに記述しましたら、is_mobileというタグでPCとスマホの端末判別が可能になります！
端末判別のコードの書き方は以下になります。
<?php if(is_mobile()): ?> スマホで見た時の表示内容 <?php else: ?> PCで見た時の表示内容 <?php endif; ?>
上の書き方をすることで、PCとスマホの端末判別が可能になります！
PCとiPadで端末判別
続いて、PCとタブiPadで端末判別する方法。
こちらもまず、functions.phpに以下のコードを記述しましょう。
(※先ほども書きましたが、もしfunctions.phpに以下のコードしか書かない場合は、一番最初に<?php、最後に; ?>を忘れずに記述ください！)
function is_ipad() {
$is_ipad = (bool) strpos($_SERVER['HTTP_USER_AGENT'],'iPad');
if ($is_ipad) {
return true;
} else {
return false;
}
}
上のコードをfunctions.phpに記述することで、is_ipadというタグでPCとiPadの端末判別が可能になります！
タグの書き方は以下になります。
<?php if(is_ipad()): ?> iPadで見た時の表示内容 <?php else: ?> PCで見た時の表示内容 <?php endif; ?>
このコードを書くことでPCとiPadの端末判別が可能になります！
応用編：PC・スマホ・iPadそれぞれで別々の表示をさせるには？
では、実際にPC・スマホ・iPadでそれぞれ別々の表示をさせたい！となった時には、以下の工程を踏むことで可能になります。
それにはまず、functions.phpにis_mobileとis_ipadを実行できるようにするタグを記述する必要があります。
そのタグは上で紹介したタグを続けて書くだけで大丈夫です！
念のため、見本のコードを記載しておきます。
(※これで3回目になりますが、もしfunctions.phpに以下のコードしか書かない場合は、一番最初に<?php、最後に; ?>を忘れずに記述ください！)
// スマホ用の端末判別
function is_mobile() {
$useragents = array(
'iPhone', // iPhone
'iPod', // iPod touch
'Android', // 1.5+ Android
'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']);
}
// iPad用の端末判別
function is_ipad() {
$is_ipad = (bool) strpos($_SERVER['HTTP_USER_AGENT'],'iPad');
if ($is_ipad) {
return true;
} else {
return false;
}
}
functions.phpに記述が済みましたら、以下のようにコードを書くことで可能になります！
<?php if(is_mobile()): ?> スマホで見た時の表示内容 <?php elseif(is_ipad()): ?> iPadで見た時の表示内容 <?php else: ?> PCで見た時の表示内容 <?php endif; ?>
この書き方をすることでPC・スマホ・iPadの端末判別が行われ、表示内容を切り替えることが可能になります(^-^)
まとめ
以上がWordPressで端末判別をさせるためのコードの書き方でした！
このコードを応用していけば、いろいろな表示の仕方を端末によって切り替えることができるようになりますので、是非ともいろいろ試してみてくださいo(^^)o
