WordPress + CloudFrontでPC版・SP版切り分け

最近はレスポンシブデザインが主流ではありますが、まだまだPC版・SP版のデザインを別々に作成するシーンはあるかと思います。

弊社でもつい先日、WordPressのテーマをPC版・SP版で切り替える案件があったのですが、その際にCloudFrontならではの詰まりポイントがあったので、備忘録として残しておきます!

前提条件

  • WordPress 4.9.0以降
  • CDNとしてAmazon CloudFrontを導入する
  • WordPressのテーマをPC版、SP版別々に作成する

通常だとMulti Device Switcherを導入するだけでOKなのですが、
CloudFrontがUser-Agentを削除してしまう(スルーさせる設定も可能ですが、User-Agent別にキャッシュが生成されるため、非常に非効率とのことです)ため、いつもとは違うアプローチが必要です。

今回は以下の通り解決しました。

Paka3 mobile themeを導入する

wp_is_mobile()でPC版、SP版のテーマを切り替えるプラグインです。
通常この関数はUser-Agentを使用して切り分けを行っており、CloudFront経由だと上手く動作しません。そこで、以下設定を追加で行います。

CloudFrontにMobile Device Detectionを設定する

組み合わせが無限大で、キャッシュ効率が悪いUser-Agentの代わりに、デバイス情報が入った以下のフラグを送信してもらい、キャッシュ効率を上げながらもデバイスごとの処理を可能にする設定です。

  • CloudFront-Is-Desktop-Viewer
  • CloudFront-Is-Mobile-Viewer
  • CloudFront-Is-SmartTV-Viewer
  • CloudFront-Is-Tablet-Viewer

C3 Cloudfront Cache Controllerを導入する(4.9.0以降対応)

管理画面からCloudFrontのキャッシュ削除が出来るプラグインですが、同時にWordPress 3.4以降に実装されたwp_is_mobile()をCloudFront対応してくれるパッチを適応してくれます。
このプラグインはプレビューURL等も上手く対応してくれるので、CloudFrontを使用する際はほぼ必須のプラグインになります。

以上です!シンプルでわかりやすい構成になったのではないでしょうか。
汎用的なwp_is_mobile()を使用しているので、もしCloudFront以外のCDNに切り替える際でも、スムーズに行くのではないかと思います。