ユーザーエージェント判定の決定版！PCとスマホで表示を簡単に分けられる「Mobile Detect」

PCやスマートフォン、タブレットなど端末ごとにサイト内の表示を切り替えたいときってありますよね。そんなときに便利でオススメなのがPHPのクラスライブラリ「Mobile Detect」です。

Mobile Detect

Mobile Detectで出来ること

Mobile DetectはPHPが動く環境なら、簡単にユーザーエージェントを取得・判定できます。

あとは簡単な条件分岐を書くだけで、PCユーザーとスマホユーザーの分岐はもちろん、iOSやAndroidなどOSでの分岐、そしてブラウザごとの分岐なんかにも対応しています。

もう少し具体的な例を出すと、「スマホユーザーにだけお問合せページへのボタンを表示したい」このような分岐はもちろん、「Android端末かつタブレットユーザー、なおかつChromeで見ているユーザーにのみ表示したい」なんていう細かい分岐設定にも対応しています。

Mobile Detectの使い方

使い方は簡単！まずはMobile Detectを読み込みます。

次に読み込んだMobile Detectを使って閲覧ユーザーの端末情報を判定、その内容を変数にセットして準備は完了です。

<?php
  require_once 'Mobile_Detect.php'; //Mobile Detectを読み込む
  $detect = new Mobile_Detect;      //閲覧するユーザーの端末情報を判定して変数にセット
?>

あとは分岐したい箇所で以下のように書くだけでデバイスごとの分岐が出来ます。

<?php if ( $detect->isMobile() ) : //モバイル端末のとき ?>
  表示したいコンテンツ
<?php endif; ?>

ただこの分岐だとタブレットでも表示されてしまうので、本当にスマホユーザーだけに表示したいときは

<?php if ( $detect->isMobile() && !$detect->isTablet()) : //スマホのとき ?>
  スマホで表示したいコンテンツ
<?php endif; ?>

このように書くとバッチリ表示を別けることができます。

タブレット・PCでも表示を変えたいときは上記の条件分岐に少し付け加えて、

<?php if ( $detect->isMobile() && !$detect->isTablet()) : //スマホのとき ?>
  スマホでだけ表示したいコンテンツ
<?php elseif ( $detect->isTablet()) : //タブレットのとき ?>
  タブレットでだけ表示したいコンテンツ
<?php else : //それ以外(PC)のとき ?>
  PCでだけ表示したいコンテンツ
<?php endif; ?>

このように書くことでスマホ・タブレット・PCのそれぞれのユーザーに対して、別々の内容を表示することができます。

そしてMobile Detectは更に細かい判定も可能です。
例えばAndroidのバージョン判定だと以下のようになります。

<?php
  $android_version = $detect->version('Android');
?>

これで変数にはユーザーの端末のAndroidのバージョンがセットされます。

あとはこれを使って以下のように分岐を書くだけ。

<?php if ( $android_ver == '4.4.2' ) : ?>
  andoroid4.4.2のときだけコンテンツを表示
<?php endif; ?>

これだけで一部バージョンでのみ起きるバグにも対応することができます。

WordPressへの応用

Mobile DetectはPHPで動くのでもちろんWordPressでも使用可能です。テーマファイル内の1行目に「Mobile_Detect.php」を呼び出し、「$detect = new Mobile_Detect;」で端末の情報を取り出してあげれば、あとは好きなタイミングで分岐が書けます。

更にfunction.php内で前もって以下のようにMobile_Detect.phpを読み込んでおけば、各テーマファイルの中で呼び出す手間も省けます。

//ユーザーエージェント判定の読み込み
require_once( 'Mobile_Detect.php' );

※注意※
function.phpにMobile_Detect.phpを呼び出す記述を書くと、各テーマファイル内ではすでに読み込まれたことになります。その状態で再度テーマファイル内に「require_once ‘Mobile_Detect.php’;」を読み込んでしまうとエラーが発生するので、テーマファイル内にはMobile_Detect.phpを読み込む記述は書かないようにしてください。

Mobile_Detect.phpのショートコード化

また、投稿ページや固定ページなどphpを直接書けない箇所にはショートコードにすることで対応させることが可能です。

手順は以下の通り。

まずfunction.phpに以下のコードを貼り付けます。

//SP
function spcontents( $atts, $content = null ) {
	require_once('Mobile_Detect.php');
	$detect = new Mobile_Detect;
	if($detect->isMobile() && !$detect->isTablet()) {
	        return '' . $content . '';
	 } else {
	        return '';
	 }
	}
add_shortcode('sp-only', 'spcontents');

//TAB
function tabcontents( $atts, $content = null ) {
	require_once('Mobile_Detect.php');
	$detect = new Mobile_Detect;
	if($detect->isTablet()) {
	        return '' . $content . '';
	 } else {
	        return '';
	 }
	}
add_shortcode('tab-only', 'tabcontents');

//PC
function pccontents( $atts, $content = null ){
	require_once('Mobile_Detect.php');
  $detect = new Mobile_Detect;
	if(!$detect->isMobile() && !$detect->isTablet()) {
	        return '' . $content . '';
	 } else {
	        return '';
	 }
	}
add_shortcode('pc-only', 'pccontents');

これで準備は完了です。

あとはページ内で分岐させたい箇所に次のように書くと表示が切り替わります。

[sp-only]
スマホだけに表示
[/sp-only]

[tab-only]
タブレットだけに表示
[/tab-only]

[pc-only]
PCだけに表示
[/pc-only]

画像やちょっとした文章をスマホにだけ付け加えたいときなど、上記のショートコードを使えば簡単に表示できるのでとっても便利です。