LoginSignup
9
4

More than 5 years have passed since last update.

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

Posted at

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と同じ正規表現を設定していきます。

スクリーンショット 2014-11-28 15.49.33

スクリーンショットにあるような形です。実際には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でテーマを分ける事ができました。

9
4
0

Register as a new user and use Qiita more conveniently

  1. You get articles that match your needs
  2. You can efficiently read back useful information
  3. You can use dark theme
What you can do with signing up
9
4