WordPress モバイルとPCとタブレットの分岐方法

WordPressでモバイルとPCとタブレットを分岐するには。

今回はWordPressでデバイスごとに分岐する方法を紹介していくぞ。

WordPressには分岐に使用できる便利な関数がいくつも用意されている。その中で今回使用する関数は「wp_is_mobile」であるぞ。

wp_is_mobileとは

WordPressでアクセスしているデバイスが、モバイルなのかPCなのかを判別できる関数だ。

wp_is_mobileはモバイルでアクセスしている場合、trueを返し、PCでアクセスしている場合はfalseを返す。

wp_is_mobileの使い方

基本的にはifで分岐して使うことが多い

<?php
if ( wp_is_mobile()) {
　echo 'モバイルの内容';
}else{
　echo 'PCの内容';
}
?>

wp_is_mobileとは別に各デバイスごとに分岐する関数を作成する

wp_is_mobileが用意してあるならそれで大丈夫じゃないか？

と思いきや、wp_is_mobileをそのまま使用しようとすると注意が必要なのだ。

wp_is_mobileの問題点

wp_is_mobileはタブレットに対応していない。タブレットでアクセスした場合、trueが返ってきてしまう。

つまりスマホとタブレットが同じ内容で、PCだけ分岐してしまうのだ。この分け方で問題ないサイトはこのままwp_is_mobileを使用すれば良いんだが、

「PCとタブレットとスマホを全て別々に分けたい場合」

「PCとタブレットを同じ内容で、スマホを別の内容にしたい場合」

この２つの場合は次のカスタマイズが必要になってくるのだ。

タブレットでも分岐する関数を作成する。

タブレットも分岐したい場合は、function.phpに以下のコードを追加すればいい。

//スマートフォンの判別
function wp_is_phone() {
	$ua = $_SERVER['HTTP_USER_AGENT'];
	if (   strpos($ua, 'iPhone') 							// iPhone
		|| strpos($ua, 'iPod') 								// iPod touch
		||(strpos($ua, 'Android') && strpos($ua, 'Mobile'))	// Android搭載スマホ
		||(strpos($ua, 'Windows') && strpos($ua, 'Mobile')) // Windows Phone
		||(strpos($ua, 'firefox') && strpos($ua, 'Mobile')) // firefox製ブラウザ
		|| strpos($ua, 'Opera Mini')						// Androidで人気のブラウザ
		|| strpos($ua, 'Opera Mobi')						// Androidで人気のブラウザ
		|| strpos($ua, 'webmate') 							// その他の Other iPhone browser
		|| strpos($uat,'incognito') 						// その他の iPhone browser
	) {
		return true;
	} else {
		return false;
	}
}
//タブレットの判別
function wp_is_tablet() {
	$uat = $_SERVER['HTTP_USER_AGENT'];
	if ( strpos($uat, 'iPad') // iPad
		||(strpos($uat, 'Android') && strpos($uat, 'Mobile')=== false ) // Android搭載タブレット
		|| strpos($uat, 'windows touch') //windows touch
		|| strpos($uat, 'Kindle') // Kindle
		|| strpos($uat, 'Silk') // Kindle に付属の Amazon 製ブラウザ
		|| strpos($uat, 'firefox tablet') //firefox tablet
		|| strpos($uat, 'WebOS') // Palm
	) {
		return true;
	} else {
		return false;
	}
}

カスタマイズ後の使い方

上のコードをfunction.phpに追加したことにより、次のような分岐が使えるようになるぞ。

<?php if(wp_is_phone())://スマートフォン ?>
	<p>スマホで表示したい内容</p>
		
<?php elseif(wp_is_tablet())://タブレット ?>	
	<p>タブレットで表示したい内容</p>

<?php else://PC ?>
	<p>PCで表示したい内容</p>

<?php endif; ?>

まとめ

今回はwp_is_mobileの分岐と、タブレットも分岐させる場合のカスタマイズ方法を紹介したぞ！

ちなみに全く新しいデバイスが出てきた場合は、function.phpに追加したコードを編集する必要がある。そこは覚えておくのだ！