NginxでWordPressスマホとPCの判定 wp_is_mobile()使用テーマの注意│システムガーディアン株式会社

Apache Nginx

WordPressのスマホでのアクセスで判定を行うwp_is_mobile関数を使用している場合は、キャッシュ系のモジュールと相性が宜しくありません。とくにNginxを利用する場合はアクセスが多いケースなど困ったりします。そこで今回はNginxで判定したUAを利用して、WordPress用の新しい関数を作成して対応する方法の御紹介です。

1 wp_is_mobile関数からの移行方法

環境

Nginx
PHP-FPM
fastcgi cache
WordPress

Nginxの設定

Nginxのコンフィグにmobile判定させるディレクティブを挿入します。

    set $mobile "";
    if ($http_user_agent ~* '(DoCoMo|J-PHONE|Vodafone|MOT-|UP\.Browser|DDIPOCKET|ASTEL|PDXGW|Palmscape|Xiino|sharp pda browser|Windows CE|L-mode|WILLCOM|SoftBank|Semulator|Vemulator|J-EMULATOR|emobile|mixi-mobile-converter)') {
        set $mobile "@ktai";
    }
    if ($http_user_agent ~* '(iPhone|iPod|Opera Mini|Android.*Mobile|NetFront|PSP|BlackBerry)') {
        set $mobile "@mobile";
    }

location ~ .php$ {
(略)

            # 変数$mobileをFastCGIサーバーに渡す
            fastcgi_param HTTP_UA_MOBILE_NGINX $mobile;
(略)
}

モバイル端末のUAがある場合は$mobileに値を入れて、それを任意のパラメータにしてFastCGIに渡します。

反映させます。

# nginx -t

# systemctl reload nginx

WordPressテーマファイルへの設定

○WordPress function.php

下記を追加する

function is_mobile_detect() {
    return $_SERVER['HTTP_UA_MOBILE_NGINX'] ? true : false;
}

パラーメータの値が入っていればモバイルなのでtrue、何もなければPCからのアクセスでありfalseを返します。

検証してみよう

検証したい位置に張って、PCとモバイル端末でアクセスしてみよう。

<?php
echo "<hr/>";
$mResult = is_mobile_detect();
var_dump($mResult);
echo "<hr/>";
?>

PCでアクセスした場合

Nginx スマホ PC 振り分け

falseと判定がでました。

スマホでアクセスした場合

Nginx スマホ PC 振り分け

trueと判定されました。

Chromeの開発者ツールでiPhone 6 Plusと擬態してアクセスしましたが、正常にモバイル判定が出来ています。

wp_is_mobile関数からの移行方法

wp_is_mobile()関数をis_mobile_detect()関数に切り替える。

<?php if ( wp_is_mobile() ) : ?>
  // モバイル用コンテンツの処理
<?php else: ?>
  // PC用コンテンツの処理
<?php endif; ?>


↓変更


<?php if ( is_mobile_detect() ) : ?>
  // モバイル用コンテンツの処理
<?php else: ?>
  // PC用コンテンツの処理
<?php endif; ?>

そんなに難しくないですね。使用しているテーマにwp_is_mobileがある場合、スマホ専用の広告表示や特別な処理があるテーマの場合は注意が必要です。

今回はNginx+PHP-FPM+fastcgi cache+WordPressの構成でしたが、Apache+WP Super Cache等のキャッシュ系プラグインを採用する場合も、ひと手間が必要になります。

お疲れ様です。