WordPressでスマートフォン・タブレット・PCで表示を変更する条件分岐方法

こんにちは、メディア事業部ウェブディレクターのコネル飯塚です。

スマートフォンやタブレットでも見やすいようにレスポンシブデザインにしているWEBサイトも多いと思います。

PCでは表示させるが、スマートフォンでは非表示にしたり、PCとスマートフォンでは異なる広告を表示させたりなど。

CSSのMedia Queries（メディアクエリ）を使って、「display:none」と「display:block」を切り替えてスタイルを変更できますが、WordPressではバージョン3.4から導入されている「wp_is_mobile()」というあらかじめ用意されている関数を使うこともできます。

しかしながら、「wp_is_mobile()」はモバイル端末である「スマートフォン・タブレット」であるかどうかを判別するための関数であり、「スマートフォン」と「タブレット」を分けることはできません。

iPad、Kindleなどのタブレット端末は、画面の表示範囲が広いためレスポンシブならスマートフォンよりもPCに合わせた見せ方をしたい場合も多いと思います。

「wp_is_mobile()」だけでは思ったような使い方ができないこともありますので、これとは別に、新しくカスタマイズした関数を作ってスマートフォン・タブレット・PCで表示を変更できるよう条件分岐させてみようと思います。

カスタマイズした関数と言ってもコピペで使うことができますので、下記を参考にしてみてください。

<目次>

• モバイル端末かを判別する
• スマートフォンのみを判別する
• スマートフォン以外を判別する
• iPhoneのみを判別する
• Androidのみを判別する
• iPadのみを判別する
• Kindleのみを判別する
• その他を判別する
• まとめ

モバイル端末かを判別するwp_is_mobile()の使い方

「wp_is_mobile()」はモバイル端末(スマートフォン＋タブレット)を判別することができます。

if文を使って「モバイル端末(スマートフォン＋タブレット)」と「PC」で表示させたい内容を変えたい場合は、下記を表示させたい箇所に記述します。

<?php if ( wp_is_mobile() ) : ?>
// スマホ・タブレットで表示させたい内容
<?php else: ?>
// PC（モバイル端末以外）で表示させたい内容
<?php endif; ?>

スマートフォンのみを判別するis_mobile()の使い方

「wp_is_mobile()」はタブレットを含めて判別しますが、タブレットを含めずスマートフォンのみを判別できるように新しく「is_mobile()」という関数を作ります。

まずは、関数を記述するファイル「functions.php」に下記のコードを入れておきます。
※変更前にバックアップをとっておくことをオススメします。

 //スマートフォンを判別
function is_mobile(){
$useragents = array(
‘iPhone’, // iPhone
‘iPod’, // iPod touch
‘Android.*Mobile’, // 1.5+ Android *** Only mobile
‘Windows.*Phone’, // *** Windows Phone
‘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’]);
}

こちらは「iPhone」「iPod touch」「Android」「Windows Phone」などを1つずつ設定して、USER_AGENT（ユーザーエージェント）を判別する「is_mobile()」関数になります。

WEBサイトにアクセスしてくるスマートフォンのユーザーエージェントの文字列に、設定した文字列が含まれるかどうかを確認しています。

そして、if文を使って「スマートフォン」と「PC・タブレット」で表示させたい内容を変えたい場合は、下記を表示させたい箇所に記述します。

<?php if ( is_mobile() ) : ?>
// スマホで表示させたい内容
<?php else: ?>
// PC・タブレット（スマートフォン以外）で表示させたい内容
<?php endif; ?>

スマートフォン以外を判別する!is_mobile()の使い方

さまざまに応用できますが、関数の前に「!」を付けることで、「それ以外」といった使い方ができます。

上記の「スマートフォンのみ」で設定した関数をfunctions.phpに追加しているものとします。

if文を使って「スマートフォン以外」に表示させたい内容がある場合は、下記を表示させたい箇所に記述します。

<?php if ( !is_mobile() ) : ?>
// PC・タブレット（スマートフォン以外）で表示させたい内容
<?php endif; ?>

iPhoneのみを判別するis_iphone()の使い方

iPhoneのみをユーザーエージェントを使って判別できるように新しく「is_iphone()」という関数を作ります。

まずは、functions.phpに下記のコードを入れておきます。

function is_iphone() {
$is_iphone = (bool) strpos($_SERVER[‘HTTP_USER_AGENT’],’iPhone’);
if ($is_iphone) {
return true;
} else {
return false;
}
}

if文を使って「iPhone」と「それ以外」で表示させたい内容を変えたい場合は、下記を表示させたい箇所に記述します。

<?php if ( is_iphone() ) : ?>
// iPhoneで表示させたい内容
<?php else: ?>
// それ以外で表示させたい内容
<?php endif; ?>

Androidのみを判別するis_android()の使い方

Androidのみをユーザーエージェントを使って判別できるように新しく「is_android()」という関数を作ります。

まずは、functions.phpに下記のコードを入れておきます。

function is_android() {
$is_android = (bool) strpos($_SERVER[‘HTTP_USER_AGENT’],’Android’);
if ($is_android) {
return true;
} else {
return false;
}
}

if文を使って「Android」と「それ以外」で表示させたい内容を変えたい場合は、下記を表示させたい箇所に記述します。

<?php if ( is_android() ) : ?>
// Androidで表示させたい内容
<?php else: ?>
// それ以外で表示させたい内容
<?php endif; ?>

iPadのみを判別するis_ipad()の使い方

iPadのみをユーザーエージェントを使って判別できるように新しく「is_ipad()」という関数を作ります。

まずは、functions.phpに下記のコードを入れておきます。

function is_ipad() {
$is_ipad = (bool) strpos($_SERVER[‘HTTP_USER_AGENT’],’iPad’);
if ($is_ipad) {
return true;
} else {
return false;
}
}

if文を使って「iPad」と「それ以外」で表示させたい内容を変えたい場合は、下記を表示させたい箇所に記述します。

<?php if ( is_ipad() ) : ?>
// iPadで表示させたい内容
<?php else: ?>
// それ以外で表示させたい内容
<?php endif; ?>

Kindleのみを判別するis_kindle()の使い方

Kindleのみをユーザーエージェントを使って判別できるように新しく「is_kindle()」という関数を作ります。

まずは、functions.phpに下記のコードを入れておきます。

function is_kindle() {
$is_kindle = (bool) strpos($_SERVER[‘HTTP_USER_AGENT’],’Kindle’);
if ($is_kindle) {
return true;
} else {
return false;
}
}

Kindleのユーザーエージェントの文字列には「Kindle」または「Silk」があります。

if文を使って「Kindle」と「それ以外」で表示させたい内容を変えたい場合は、下記を表示させたい箇所に記述します。

<?php if ( is_kindle() ) : ?>
// Kindleで表示させたい内容
<?php else: ?>
// それ以外で表示させたい内容
<?php endif; ?>

その他のユーザーエージェントを判別するオリジナルの関数

その他の種類のスマートフォン・タブレットでもユーザーエージェントの文字列を調べることでオリジナルの関数を作ることができます。
スマートフォン・タブレット以外でもブラウザのユーザーエージェントによって条件分岐させることもできます。

上記を参考に関数部分には任意の文字列を入れ、USER_AGENT部分には判別したいユーザーエージェントの文字列を入れてください。

まとめ　スマートフォン・タブレット・PCの振り分け

このようにスマートフォン・タブレット・PCを振り分けて、表示させたい内容を変更することが可能です。

表示内容を切り替えるのはもちろんですが、Google AdSenseなどの広告を貼っていて、広告サイズによってはスマートフォンの横幅からはみ出してしまったりするので、スマートフォンのみ別の小さい広告サイズにしたいこともあると思います。

他にも、ソーシャルボタンを配置していて、スマートフォンでは非表示にしたり、逆に大きく押しやすいオリジナルのボタンを設置したい場合もあると思います。

レスポンシブデザインではさまざまな使い方があると思いますので、WEBサイトの表示したい箇所に条件分岐させてオリジナルにカスタマイズしてみてください。