【WordPress】User-Agent を判定してモバイル用コンテンツを表示する方法。

最近のWebデザインのトレンドとして、レスポンシブデザインが普及し、iPhoneやiPad、Android端末等、各モバイル・デバイスへの対応が当たり前になってきました。

実際に、現在当サイトへのアクセスも、PC（Windows / Mac）とスマートフォン・タブレット（iPhone / iPad / Android）のアクセス比率は、ほぼ半々になってきています。
モバイル・デバイスに最適化されたコンテンツを表示することは、今後SEO的にも重要なポイントになり、無視できない状況になっています。

しかし予算や制作期間、クライアント様の意向により、モバイル・サイトの開発に着手できないケースも多々あるかと思います。
そんなときに、最低限のモバイル対応として WordPress の［functions.php］に簡単なコードを記述して、User-Agent を判定して、モバイル用のコンテンツを分岐させて表示する方法を紹介します。

ちなみに［User-Agent（UA、ユーザーエージェント）］とは、WEBブラウザでの通信に使用するHTTPプロトコルに含まれる情報で「iPhone」や「Android」などの端末の情報です。
つまり［User-Agent］を見ればどんなデバイスからアクセスしているかを把握できるというワケ。
ただし偽装も可能なので絶対的なものではありませんが、特殊なケースを除けば［User-Agent］を判定するだけでモバイル用のコンテンツを振り分けることが可能です。

実際に WordPress の［functions.php］に記述するコードは以下。

function is_mobile () {
$useragents = array(
	'iPad',
	'iPhone',
	'iPod',
	'Android',
	'dream',
	'CUPCAKE',
	'Windows',
	'blackberry',
	'webOS',
	'incognito',
	'webmate'
);
$pattern = '/'.implode('|', $useragents).'/i';
return preg_match($pattern, $_SERVER['HTTP_USER_AGENT']);
}

関数（function）の名前は分かりやすく「is_mobile」としています。
この関数を使うと iPhone などのモバイル端末からアクセスした場合に「TRUE」を返します。
特定のデバイスをモバイルとして追加したい場合は配列の中に追加するだけでＯＫ。また、iPad などのタブレット端末はPCと同じ処理にしたいのであれば、逆に配列の中から「'iPad',」を削除します。

実装する方法

実装は至って簡単。テンプレートファイルの［header.php］や［index.php］内で、モバイル用のコンテンツを分岐させたい箇所で以下のコードを記述するだけです。

<?php if(is_mobile()) { ?>
	/* モバイル・デバイス向けのコンテンツ */
<?php } else { ?>
	/* PC向けのコンテンツ */
<?php } ?>

さて。以上のように独自関数として「is_mobile」を作りましたが、実は WordPress 3.4 以降からはデフォルトで「wp_is_mobile」という関数が追加になっていて上記とまったく同じように機能します。

……というワケで。通常はwp_is_mobileを利用して、モバイル・デバイスを個別に振り分けたいときにis_mobileを使用することをお勧めします。