[WordPress] nginxでモバイルとPCでテーマを分ける方法

WordPressでnginxを使う場合にリバースプロキシを使うことで強力な高速化できると思いますが、PCとモバイルでテーマを分けている場合、リバースプロキシで作ったキャッシュをモバイルとPCで分けておかないと表示がぐちゃぐちゃになってしまいます。

そこでnginxにユーザーエージェントによってキャッシュを分けるやり方をお伝えします。（nginxのリバースプロキシのセットアップについては、いくつも参考になるサイトがあるので省きます）

Nginxの設定

（下記の設定ファイルは一部抜粋です）

server {
    
    //ほかは省略
    
    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|PSP)') {
        set $mobile "@ktai";
    }
    if ($http_user_agent ~* '(iPhone|iPod|incognito|webmate|Android.*Mobile|dream|CUPCAKE|froyo|BlackBerry|webOS|s8000|bada|IEMobile|Googlebot\-Mobile|AdsBot\-Google)') {
        set $mobile "@smartphone";
    }
}

$mobileという変数にuseragentに該当するものであれば、@ktaiや@smartphoneと言った文字列を渡します。

location / {
    if ($uri ~ \.(gif|jpg|png|ico|js|css)$) {
        access_log off;
    }
    proxy_no_cache     $do_not_cache;
    proxy_cache_bypass $do_not_cache;

    proxy_redirect     off;
    proxy_cache czone;
    proxy_cache_key "$scheme://$host$request_uri$mobile";
    proxy_cache_valid  200 1h;
    proxy_pass http://backend;
}

proxy_cache_keyに先ほどの$mobileを付加します。

こうすることで、同一URLでも「ktai」と「smartphone」と「それ以外（主にPC）」の3種類のキャッシュが生み出されることになりました。

ワードプレスの設定

今度はNginxで分けたユーザーエージェントと同じ条件でテーマの表示分けをワードプレス側でする必要があります。それにはUserAgent Themes Switcherというプラグインを使っていきます。このプラグインにはNginxと同じ正規表現を設定していきます。

スクリーンショットにあるような形です。実際にはktaiサイトはモバイルとして扱っているので、意味はありませんが、一応分けて設定しているといったところです。

弊社では下記の正規表現でユーザーエージェントを区分しています。

iPhone|iPod|incognito|webmate|Android.*Mobile|dream|CUPCAKE|froyo|BlackBerry|webOS|s8000|bada|IEMobile|Googlebot\-Mobile|AdsBot\-Google

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|PSP

 

ユーザーエージェントについては完全では無いと思いますが、ほとんどの場合は問題ないかなと思います。

以上で、強力なキャッシュを保ちながら、モバイルとPCでテーマを分ける事ができました。