WordPress:PCとスマートフォンでコンテンツを切り替えたい際に便利なwp_is_mobile関数+α

  • Posted on
  • Category : WordPress
WordPress:PCとスマートフォンでコンテンツを切り替えたい際に便利なwp_is_mobile関数+α

wp_is_mobileとはWordPressの3.4から実装された関数で、PC用とiPhoneやAndroidといったスマートフォン用とでコンテンツを切り替える際に便利な条件分岐タグです。今まで実際に使ったことはなかったのですが、ちょっと使ってみて今後使いそうだと思ったので備忘録。

先日このブログを少しいじろうと思い、以前から機会があったら使おうと思っていたwp_is_mobileを実際に使用しようとした時に調べたり試した備忘録になります。(なんだかんだで、結局Media Queriesだけで済ましたんですが…)
いろんな方がエントリーなどで紹介していたりするので便利なんだろうなとは思っていましたが、例えばPCとスマートフォンでは広告を切り替えたいとか、各コンテンツの見栄えを手っ取り早く変えたい時など、実際に自分でいろいろとやってみるとたしかに便利だなと思いました。

そもそもPCとスマートフォンでテーマを別々にしていれば「Mobile Theme Switcher」とか「WPtap Mobile Detector」などのプラグインを使ったり、あとはブログとしてのみ使っているとかであれば「WPtouch」とか使ったほうが手っ取り早くコンテンツの切り替えはできるのですが、このブログは一応レスポンシブにしているので、今後何かいじる際はwp_is_mobileを使うことが多そうです。
ちなみにwp_is_mobileはWordPress Ver3.4から実装された関数なので、使用できるのは3.4以降となります。

<?php if (wp_is_mobile()) :?>
	スマートフォン向けコンテンツ
<?php else: ?>
	PC向けコンテンツ
<?php endif; ?>

上記を記述すると、PCとスマートフォンのそれぞれ指定したコンテンツで内容を切り替えて表示してくれます。

上記のコードでとりあえずPCとスマートフォンのコンテンツを切り替えるのを実装できるのですが、このままだとiPadもスマートフォンと同様の端末扱いとされてしまいます。
iPadはスマートフォンに比べたら表示領域が広いということもあり、PCと同じコンテンツを表示させたい場合があるので、その際は以下の方法で実装します。

以下で紹介する方法は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']);
}

上記をfunctions.phpに記述後、コンテンツを表示したい場所には下記を記述します。
最初に紹介したコードでwp_is_mobileとなっていた部分をis_mobileに変更しただけです。

<?php if (is_mobile()) :?>
	スマートフォン向けコンテンツ
<?php else: ?>
	PC向けコンテンツ
<?php endif; ?>

上記それぞれを記述して確認すると、iPadでもPC用のコンテンツが表示されるようになります。

2通りの方法を書きましたが、Ver3.4以降でiPadを含めても良いのであればwp_is_mobileを使い、iPadは含めたくないとか自分でもっと細かくUA判別を設定したいという時はfunctions.phpを用いた方法が良いと思います。

以下を参考にさせてもらいました。

Back to Top

WordPress:PCとスマートフォンでコンテンツを切り替えたい際に便利なwp_is_mobile関数+α

WordPress:PCとスマートフォンでコンテンツを切り替えたい際に便利なwp_is_mobile関数+α

/ WordPress

Tagged with:

NxWorld

Sorry... doesn't support your browser

To get the best possible experience using our site we recommend that you upgrade to a modern web browser.NxWorldではご利用中のブラウザサポートはしていません。
Internet Explorerのアップグレード行う、もしくはその他のブラウザを使用しての閲覧をお願いします。