【WordPress Tips】モバイルデバイス(スマートフォン等)とPCで表示を分ける際の条件分岐関数【wp is mobile】

ワードプレスでサイト構築をさせていただいたクライアント様から、パソコンとスマートフォンで表示させるコンテンツや並び順を変更させたいという依頼を受けることは多々あります。
そこで、ユーザーがモバイル端末で閲覧しているかどうかをチェックして、PCとの表示を切り替える条件分岐コードを利用する。

wp is mobileでモバイル端末を利用しているかチェック

ワードプレスで用意されている関数、wp_is_mobileでユーザーがモバイル端末でページを訪問しているかどうかをチェックする。
戻り値はtrueもしくはfalse。

モバイル端末の時にだけ表示するコンテンツを追加する場合は以下。

【モバイル端末の時だけ表示させる場合】
<?php
if (wp_is_mobile()) {
//ここにモバイル端末利用時のコンテンツを記述
}
?>

モバイル端末とPCで別のコンテンツを表示する場合は以下。

【モバイル端末とPCの表示を分ける場合】
<?php if ( wp_is_mobile() ) : ?>
<!-- ここにモバイル端末の時のコンテンツを記述 -->
<?php else: ?>
<!-- ここにPCの時のコンテンツを記述 -->
<?php endif; ?>

上記を、テンプレートファイルに記述することで、表示の切り替えを行える。

ただ、wp_is_mobileでは、ブラウザのユーザーエージェント($_SERVER[‘HTTP_USER_AGENT’])の値に基づいている為、タブレット端末もモバイル端末として認識される。
タブレットもPCと同じように表示したい場合、スマホ・タブレット・PCと表示を切り替えたい場合。別に関数を設定しなければならない。

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']);
}

【タブレットを判別する関数】
//タブレットはipad
function is_tablet() {
$is_ipad = (bool) strpos($_SERVER[‘HTTP_USER_AGENT’],’iPad’);
if ($is_tablet) {
return true;
} else { 
return false; 
}
}

それぞれのユーザーエージェントをチェックする関数を作成する。

モバイル・タブレット(ipad)・PCをそれぞれ振り分ける場合は、以下のように記述。

【モバイル・タブレット・PCで切り替え】
<?php if ( is_mobile() ) : ?>
<!-- モバイル端末に表示させたいコンテンツを記述 -->
<?php elseif ( is_tablet()): ?>
<!-- タブレット端末に表示させたいコンテンツを記述 -->
<?php else: ?>
<!-- それ以外で表示させたいコンテンツを記述 -->
<?php endif; ?>

昨今、サイトはレスポンシブデザインが主流なので、単純にwp_is_mobileで、スマホ・タブレットとPCで切り替え、タブレット用のCSSで表示コンテンツをdisplay:none;で表示させない設定にする方が良いかもしれない。