【WordPress】パソコン・タブレット・スマートフォンで表示を振り分ける条件分岐タグ

ブログの表示をスマートフォンやタブレット用に最適化する場合、Media Queries(メディアクエリ)を使ってレスポンシブデザインにすることが多いと思います。

WordPress(ワードプレス)

しかし、メディアクエリだけではデバイスによって要素を変更したり消したりすることは難しいです。そんな時、WordPressの条件分岐を使うと、利用している環境によって表示を変えることが可能になります。

スマートフォン・タブレット端末用の条件分岐

WordPressの3.4から実装された条件分岐タグ「wp_is_mobile()」を使うとモバイル端末で条件分岐できます。

が、上記の関数はiPhoneなどのスマートフォンからiPad、Kindleなどのタブレットまで全て含まれてしまいます。スマホとタブレットでは解像度も全く違うので、これだとちょっと使い勝手が悪いかもしれません。

タブレット端末を除いてスマートフォンにだけ対応させたい時は、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']);
}
?>

表示させたいテンプレートに下記を記述します。

<?php if (is_mobile()) : ?>
// スマートフォン用コンテンツ
<?php else: ?>
// PC・タブレット用コンテンツ
<?php endif; ?>

これでスマートフォン向けの条件分岐ができるようになります。

コードは下記のサイトを参考にさせて頂きました。元記事では、さらにブラウザや端末別に振り分ける方法などが細かく紹介されております。

参考サイト:WordPress条件分岐、スマートフォンとブラウザ別に表示を変える方法

Related Posts