wordpressでスマホブラウザ別に表示を分岐する方法


wordpressでスマートフォンとPC、ブラウザ別に表示を分ける方法などはよく載っているのですが(例えばhttp://millkeyweb.com/if-mobile/)
スマホブラウザ別に条件を分岐する方法は調べてもなかなか出てこなかったのでメモ。

今回表示を分岐したのはSafariとLINEブラウザ、Facebookブラウザの3つです。
Safariでは通常のスマホサイトを表示し、LINEとFacebookからリンクを踏んだ際はSafariでの閲覧を促す別ページへ分岐させました。

まず、それぞれのブラウザのユーザーエージェントを調べます。
私はここのサイトを使用しました。http://www.openspc2.org/JavaScript/library/system/useragent/

以下それぞれのユーザーエージェント

Safari
Mozilla/5.0 (iPhone; CPU iPhone OS 9_2_1 like Mac OS X) AppleWebKit/601.1.46 (KHTML, like Gecko) Version/9.0 Mobile/13D15 Safari/601.1

LINE
Mozilla/5.0 (iPhone; CPU iPhone OS 9_2_1 like Mac OS X) AppleWebKit/601.1.46 (KHTML, like Gecko) Mobile/13D15 Safari Line/5.10.0

Facebook
Mozilla/5.0 (iPhone; CPU iPhone OS 9_2_1 like Mac OS X) AppleWebKit/601.1.46 (KHTML, like Gecko) Mobile/13D15 [FBAN/FBIOS;FBAV/47.0.0.43.396;FBBV/20481971;FBDV/iPhone8,1;FBMD/iPhone;FBSN/iPhone OS;FBSV/9.2.1;FBSS/2; FBCR/ソフトバンク;FBID/phone;FBLC/ja_JP;FBOP/5]

この中にある特定の文字列(LINEなら「Line」、Facebookなら「FB」)を含む場合は別のhtmlを表示するという条件文を書きます。

関数はwordpressの中にあるfunctions.phpに書き込んでいきます。

functions.php
function is_line() {
    $is_line = (bool) strpos($_SERVER['HTTP_USER_AGENT'],'Line');
    if ($is_line) {
        return true;
    } else {
        return false;
    }
}

function is_facebook() {
    $is_facebook = (bool) strpos($_SERVER['HTTP_USER_AGENT'],'FB');
    if ($is_facebook) {
        return true;
    } else {
        return false;
    }
}

その後分岐を行うブラウザに(例えばpage.php)に以下のように書き込みます。

page.php
<?php if (is_line() and is_facebook()) : ?>
//LINEブラウザとFaebookブラウザで見たときの表示
<?php else: ?>
//それ以外での表示
<?php endif; ?>