雑が喰おう

WordPressでスマホとそれ以外で表示を変える

WordPressでスマホとそれ以外のPCなどで表示若干変えました。
単なるレスポンシブWebデザインではないです。
出力される物自体を変えています。

たんに広告の表示位置をスマホとそれ以外でわけたかっただけですけど。

WordPressではモバイルとPCで分岐点を設置するための関数が用意されています。
それはwp_is_mobileです。

以前もwp_is_mobileを知って使ってみようと思いつつも使わなかったような記憶がありますが、その時の記事が思い出せません。
そんなに前ではなかったように思いますけど。

そして今回もwp_is_mobileは使用しません。

ではどうやってWordPressでモバイルとPCを分岐させるのか。

is_mobileを使う

実は、wp_is_mobileには若干問題があります。
それは、iPadなどのタブレットをモバイルとして扱ってしまうこと。

確かにタブレットもモバイルという認識で間違いではないでしょう。
とはいえ、タブレットにはスマホ用ページよりもPC用ページを表示させるようにしている方がほとんどでしょう。
しかしwp_is_mobileではタブレットにスマホ用ページを渡してしまいます。

では、どうするか?
is_mobileを使います。

is_mobileとは、wp_is_mobileからタブレットに対しては適用させないようにしただけのものです。
使用するには少し設定が必要です。

is_mobileを使う準備

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']);
}

分岐点では、下記のように書きます。

<?php if(is_mobile()) { ?>
スマホで出力したいもの
<?php } else { ?>
タブレット・PCで出力したいもの
<?php } ?>

ただ、キャッシュ系のプラグインを使用していて、User Agentsにより設定を行っている場合、同じようにiPadなどのタブレットを設定する必要があります。

まとめ

これでis_mobileが使用できるようになりました。
レスポンシブWebデザインといえど、すべてをCSSだけで扱うには限界があります。

そこで、今回のように元から渡すデータを変えるように分岐点を設定しておく手段もあるので、ケースバイケースで使い分けていきたいです。

スポンサード リンク

スポンサード リンク

»関連してそうな記事