WordPress と JavaScript との連携を考えるとき、wp_is_mobile() 関数を JavaScript でも使いたい、と思うことがあります。正確には、サーバー側のモバイル判定とクライアント側のモバイル判定を一致させたいときです。

そんなコードは誰でも書ける。誰でも書けるなら、誰かが書いたコードを丸コピーして使いたい。むしろ、どうぞ使ってください、そんな気持ちで公開している人がいるに違いない。だから筆者は胸を張って検索しました。見つからない。せめて 3ページ目までには出てきて欲しい。なかった。無いなら仕方ない。自分で書くしかない。現実は甘くなかった。

設計

最近はクッキーが無効になっているクライアントなんてマイノリティ。PHP で wp_is_mobile() の結果をクッキーに保存して、JavaScript でそれを読むようにします。なんだよタイトル詐欺かよ。そんなことはない。目的と手段を取り違えてはいけない。でも万一、クッキーが無効にされている場合を考えて、ちゃんと JavaScript のコードも書いたよ。

PHP – setcookie()

functions.php に以下を追加。

setcookie( 'isMobile', wp_is_mobile() ? 'true' : 'false', 0, '/' );

3番目のパラメータはクッキーの expire で、0 を指定するとセッション クッキー。4番目のパラメータはパス指定。パスを指定しないと、URL上のディレクトリごとにクッキーが保存されてしまう。つまり WordPress でスラッグを使った URL にしていた場合、記事ごとに別のクッキーになってしまいます。それを避けるため、サイトのルート パスを指定しています。

上記のコードはドメインのルートが WordPress サイトの場合の例です。クッキーのパスは、あなたのサイトに合わせて設定してください。

• PHP: setcookie – Manual

PHP – wp_is_mobile()

JavaScript に移植するために wp_is_mobile() のソースコードを拝見。

• WordPress > wp_is_mobile() | Function | WordPress Developer Resources

function wp_is_mobile() {
    static $is_mobile;

    if ( isset($is_mobile) )
        return $is_mobile;
 
    if ( empty($_SERVER['HTTP_USER_AGENT']) ) {
        $is_mobile = false;
    } elseif ( strpos($_SERVER['HTTP_USER_AGENT'], 'Mobile') !== false // many mobile devices (all iPhone, iPad, etc.)
        || strpos($_SERVER['HTTP_USER_AGENT'], 'Android') !== false
        || strpos($_SERVER['HTTP_USER_AGENT'], 'Silk/') !== false
        || strpos($_SERVER['HTTP_USER_AGENT'], 'Kindle') !== false
        || strpos($_SERVER['HTTP_USER_AGENT'], 'BlackBerry') !== false
        || strpos($_SERVER['HTTP_USER_AGENT'], 'Opera Mini') !== false
        || strpos($_SERVER['HTTP_USER_AGENT'], 'Opera Mobi') !== false ) {
            $is_mobile = true;
    } else {
        $is_mobile = false;
    }

    return $is_mobile;
}

JavaScript – isMobile()

PHP の static は JavaScript に無いですね。でも似たようなことはできるらしい。

• JavaScriptでPHP関数におけるstatic変数みたいな事をやる – Qiita

function isMobile() {
    if ( typeof isMobile.f === 'undefined' ) {
        if ( !jQuery.cookie('isMobile') ) {
            var ua = window.navigator.userAgent;
            if ( ua.indexOf('Mobile') > -1
                || ua.indexOf('Android') > -1
                || ua.indexOf('Silk/') > -1
                || ua.indexOf('Kindle') > -1
                || ua.indexOf('BlackBerry') > -1
                || ua.indexOf('Opera Mini') > -1
                || ua.indexOf('Opera Mobi') > -1 ) {

                isMobile.f = true;
            } else {
                isMobile.f = false;
            }
        } else {
            isMobile.f = (jQuery.cookie('isMobile') == 'true') ? true : false;
        }
    }
    return isMobile.f;
}

jQuery の cookie プラグインを使っています。

• jquery.cookie.jsの使い方とCOOKIEの寿命(保存期間)を秒・分・時間で指定する方法 – Qiita
• jquery.cookie.jsのCookie(クッキー)を削除する3つの方法 | iwb.jp

最後に

スマホ対応（mobile-friendly）を重要視する Google 先生は、モバイル デバイスではあるものの、タブレットには PC 向けのサイトを表示させるべきだと考えているようです。wp_is_mobile() は、モバイル デバイス（スマホ＋タブレット）か、PC かを判別する関数であり、この関数を使ってコンテンツの表示を変えることは、Google 先生のご意向に反することになります。このあたりは注意が必要です。

• タブレット – ウェブマスター向けモバイルガイド

ウェブサイトに PC 用とスマートフォン用で異なるページがあり、タブレット専用のページがない場合、Google の認識では、通常、タブレット ユーザーにはサイトのスマートフォン用ページではなく PC サイトが表示されます。

Flash コンテンツを出し分ける場合には、wp_is_mobile() が良いのですけどね。ケース バイ ケースといったところでしょうか。