ブログ

株式会社コミュニティコム採用情報 自由な働き方ができるから、パパ・ママにも優しい職場 復業OK、起業したい方、経験を積みたい方、あなたの夢を応援します

wp_is_mobile関数 – WordPress3.4から実装されたパソコン用サイトとスマートフォン用サイトを分ける条件分岐タグ

こんにちは。株式会社コミュニティコム代表取締役の星野邦敏です。

WordPressのバージョンが、日本語では2012年6月15日に、3.3.2から3.4にバージョンアップされました。

3.4から加わった条件分岐タグとして、
wp_is_mobile関数
があります。

これは、Webサイトを閲覧する端末のヘッダー情報を見て、パソコン用のコンテンツと、スマートフォン用のコンテンツを切り分ける、WordPressの条件分岐タグです。

具体的には、WordPressテーマに、以下のようなソースコードを記述すると、パソコン用のコンテンツと、スマートフォン用のコンテンツを、切り分けることが可能となります。

<?php if (wp_is_mobile()) :?>
スマートフォン用コンテンツをココに書きます。
<?php else: ?>
パソコン用コンテンツをココに書きます。
<?php endif; ?>

ちなみに、wp_is_mobile関数は、WordPress3.4からの関数ですので、それ以前のバージョンの場合、このような書き方をWordPressテーマにするとエラーコードが表示されると思います。

そこで、

<?php if ( function_exists('wp_is_mobile') && wp_is_mobile() ) :?>
スマートフォン用コンテンツをココに書きます。
<?php else: ?>
パソコン用コンテンツをココに書きます。
<?php endif; ?>

にした方が、過去のバージョンでもエラーコードにならないと、菱川さん大曲さんに、Twitterのやり取りで教えてもらいました。

つまり、wp_is_mobile関数が存在して、かつ、wp_is_mobile関数が有効の時に、「スマートフォン用コンテンツをココに書きます。」という箇所が表示され、そうでなかった時に、「パソコン用コンテンツをココに書きます。」という箇所を書く、という条件分岐です。

例えば、以下のようなレスポンシブWebデザインによって、画面サイズに応じて、パソコン用サイト、スマートフォン用サイトを切り分けた際にも、広告バナーなどがあった場合、変化しないこともあると思います。
もちろん、この部分を、CSSで、display:noneで対応することもできるとは思いますが、例えば、Google AdSenseなどは意図的に表示を消すことになるので、規約違反などのリスクも考えられるので、広告という観点から見ると、CSSのdisplay:noneで対応するのは難しいこともあると思います。
wp_is_mobile関数を使えば、このような場合の表示も切り替えることができます。

すなわち、レスポンシブWebデザインで、CSS3のメディアクエリ(Media Queries)を使ってスマートフォンサイトに対応したとしても、広告バナー部分に関しては、ヘッダー情報で判別してユーザーエージェントで振り分けることが可能です。

wp_is_mobile関数

レスポンシブWebデザインで、CSS3のメディアクエリ(Media Queries)を使ってスマートフォンサイトに対応したとしても、上記のキャプチャ画像のように、バナーサイズはパソコン用のままで、デザインが不恰好になってしまいます。

wp_is_mobile関数

wp_is_mobile関数を使えば、パソコンから見た時はそのままにして、iPhoneやAndroidやBlackBerryなどのスマートフォン端末から見る時だけ、上記のようにバナーサイズを切り替えることが可能です。

なお、このように切り替えることができるのは、WordPressのコアファイルの「wp-includes」フォルダの中の、vars.phpファイルに、以下のようなソースコードがあるからです。

function wp_is_mobile() {
	static $is_mobile;

	if ( isset($is_mobile) )
		return $is_mobile;

	if ( empty($_SERVER['HTTP_USER_AGENT']) ) {
		$is_mobile = false;
	} elseif ( strpos($_SERVER['HTTP_USER_AGENT'], 'Mobile') !== false // many mobile devices (all iPhone, iPad, etc.)
		|| strpos($_SERVER['HTTP_USER_AGENT'], 'Android') !== false
		|| strpos($_SERVER['HTTP_USER_AGENT'], 'Silk/') !== false
		|| strpos($_SERVER['HTTP_USER_AGENT'], 'Kindle') !== false
		|| strpos($_SERVER['HTTP_USER_AGENT'], 'BlackBerry') !== false
		|| strpos($_SERVER['HTTP_USER_AGENT'], 'Opera Mini') !== false ) {
			$is_mobile = true;
	} else {
		$is_mobile = false;
	}

	return $is_mobile;
}

つまり、端末のヘッダー情報に、Mobile、Android、Silk/、Kindle、BlackBerry、Opera Miniなどとあると、それがwp_is_mobile関数として条件分岐される、ということです。

今後は、スマートフォン対応サイトを作る需要も、より一層増すと思いますし、それをWordPressで対応することも多いと思います。そのような時に、wp_is_mobile関数は便利になると思います。