wp_is_mobileによる条件分岐をカスタマイズする

WordPressには、サイトを訪れたユーザーのデバイスを判定する関数があらかじめ用意されています。

この機能を使うと、パソコンとスマートフォンでは、違う内容を表示できたりするのですが、ちょっとだけ惜しい点もあるので、その辺をカスタマイズしてみます。

WordPressの条件分岐タグとは

WordPressでは、wp_is_mobile( )という条件分岐タグを使うことで、ユーザーのデバイスを判定し、処理を変えることができます。

次のような使い方で、モバイル環境のみに適応させたい処理を、いとも簡単に実装できてしまうのです。

<?php
if ( wp_is_mobile() ) {
/* ここにモバイルの時だけ処理する内容を書く*/
}
?>

ところが、この <?php wp_is_mobile(); ?> という関数、残念な点があります。

モバイルには、タブレットも含まれちゃってるんです。つまり、スマートフォンもタブレットも同じ扱いなんですね。

けれど、状況によってはPC・タブレット・スマホの三種類で処理を変えたい場合だってあるはずです。

そこで、ちょこっと手を加えて、タブレットとスマホの条件分岐ができるようにしていきたいと思います。

ユーザーエージェントを利用したデバイスの条件分岐

functions.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;
	}
}
?>

新たに作った条件分岐タグは、

<?php wp_is_phone(); ?>

<?php wp_is_tablet(); ?>

のふたつです。wp_is_phone でスマートフォンを、wp_is_tablet でタブレットを処理できます。

条件分岐タグの使い方

デバイスによってスタイルシートを変えたい場合などは、以下のような使い方で条件分岐できます。

<?php if(wp_is_phone())://スマートフォン ?>
	<link rel="stylesheet" href="wp-content/themes/your-theme/style-phone.css" media="all">
		
<?php elseif(wp_is_tablet())://タブレット ?>	
	<link rel="stylesheet" href="wp-content/themes/your-theme/style-tablet.css" media="all">

<?php else://パソコン ?>
	<link rel="stylesheet" href="wp-content/themes/your-theme/style.css" media="all">

<?php endif; ?>

ただ、利用するにあたって、ひとつ注意点があります。

それは、定期的に最新のユーザーエージェントをチェックして、変更が必要なら手作業で更新しなければならない点です。

もしも、そういった作業に不安を感じるようなら、デフォルトのwp_is-mobileを使うのが無難かもしれませんね。