WordPressのスマホでのアクセスで判定を行うwp_is_mobile関数を使用している場合は、キャッシュ系のモジュールと相性が宜しくありません。とくにNginxを利用する場合はアクセスが多いケースなど困ったりします。そこで今回はNginxで判定したUAを利用して、WordPress用の新しい関数を作成して対応する方法の御紹介です。
目次
環境
- Nginx
- PHP-FPM
- fastcgi cache
- WordPress
Nginxの設定
Nginxのコンフィグにmobile判定させるディレクティブを挿入します。
|
1 2 3 4 5 6 7 |
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"; } |
|
1 2 3 4 5 6 7 |
location ~ .php$ { (略) # 変数$mobileをFastCGIサーバーに渡す fastcgi_param HTTP_UA_MOBILE_NGINX $mobile; (略) } |
モバイル端末のUAがある場合は$mobileに値を入れて、それを任意のパラメータにしてFastCGIに渡します。
反映させます。
|
1 |
# nginx -t |
|
1 |
# systemctl reload nginx |
WordPressテーマファイルへの設定
○WordPress function.php
下記を追加する
|
1 2 3 |
function is_mobile_detect() { return $_SERVER['HTTP_UA_MOBILE_NGINX'] ? true : false; } |
パラーメータの値が入っていればモバイルなのでtrue、何もなければPCからのアクセスでありfalseを返します。
検証してみよう
検証したい位置に張って、PCとモバイル端末でアクセスしてみよう。
|
1 2 3 4 5 6 |
<?php echo "<hr/>"; $mResult = is_mobile_detect(); var_dump($mResult); echo "<hr/>"; ?> |
PCでアクセスした場合
falseと判定がでました。
スマホでアクセスした場合
trueと判定されました。
Chromeの開発者ツールでiPhone 6 Plusと擬態してアクセスしましたが、正常にモバイル判定が出来ています。
wp_is_mobile関数からの移行方法
wp_is_mobile()関数をis_mobile_detect()関数に切り替える。
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 |
<?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等のキャッシュ系プラグインを採用する場合も、ひと手間が必要になります。
お疲れ様です。
