以前、モバイル端末とPCで異なる要素を表示させる条件分岐タグ「wp_is_mobile()」という記事を書きました。
wp_is_mobile() は、WordPress3.4 以降で使える条件分岐タグで非常に便利なのですが、iPad もモバイルとして処理されます。スマートフォンだけ出力するコンテンツを変えたいという場合も多いのではないでしょうか。
そこで今回はスマートフォンだけ表示を切り替えるための手順をご紹介したいと思います。
functions.phpに関数を追加する
まずは、使用しているテーマの functions.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']);
}
このコードは、スマートフォンからのアクセスかどうかを判別するための関数「is_mobile()」を定義しています。$useragents の中に入っている配列が、is_mobile() 関数で判別するユーザーエージェントになります。この部分を変更することで判別したいユーザーエージェントを自由に切り替えることもできます。
スマートフォンとPCで表示するコンテンツを切り替える
functions.php へのコード追加が完了したら、is_mobile() 関数が利用できるようになります。この is_mobile() 関数を使って、スマートフォンからのアクセスを判別することで表示するコンテンツを切り替えます。
テーマファイル内の表示を切り替えたい部分に、以下のようなコードを記述します。
<?php if(is_mobile()){ ?>
スマートフォンに表示させるコンテンツ
<?php } else{ ?>
スマートフォン以外に表示させるコンテンツ
< } ?>
例えば、スマートフォンと PC でサイズの異なる画像を表示させたい場合は、以下のように記述します。
<?php if(is_mobile()){ ?>
<img src="img.jpg" width="300px" />
<?php } else{ ?>
<img src="img.jpg" width="620px" />
<?php } ?>
このように、is_mobile() 関数を定義すれば、簡単にスマートフォンからのアクセスを判別することができるようになります。
あとがき
wp_is_mobile() 関数と違って、判別したいユーザーエージェントを自分で指定することができるので、細かいカスタマイズが可能になりますね。