WordPressテーマ『STORK』でAWS Cloudfrontのモバイル判定を行う

当サイトVOLTECHNOはページ読み込み高速化のためCDN(AWS Cloudfront)を導入していますが、その弊害としてモバイル判定に使われるHTTPヘッダのUser-Agent値が書き換えられてしまい、モバイル判定が出来ないという問題がありました。

この問題を解決する方法としてCloudFrontから付与されるヘッダーをSTORKテーマとWordPressのモバイル判定に追記します。

STROK親テーマのfunction.php内のis_mobile()を書き換える

端末のヘッダー情報(User-Agent)で判定を行う前に、AWS CloudFrontから発信されるHTTP-CLOUDFRONT-IS-MOBILE-VIEWERのブーリアン値で条件分岐する処理を追加します。

オリジンに直接アクセスした場合でもモバイル判定が行えるよう、falseとなった場合に通常のモバイル判定処理を行うようにしておきます。

WordPress vars.php内wp_is_mobile()も書き換える

is_mobile()を書き換えることでモバイル判定を行えるようになりましたが、個別記事に表示されるウィジェットは未だSPではなくPCのままです。

テーマを確認してみると、一部のモバイル判定にはテーマ関数のis_mobile()ではなくWordPressが提供しているwp_is_mobile()が使われている様子。

この場合はSTORKテーマ内のwp_is_mobile()と書かれている部分をis_mobile()に書き換えるか、wp_is_mobile()自体の処理を変更するかのどちらかで対応する必要があります。

STORKテーマ内のコードをwp_is_mobile()を書き換えるのは数が多くて手間なので、今回はwp_is_mobile()を書き換えて対応します。

これも先ほどのis_mobile()と同じようにHTTP-CLOUDFRONT-IS-MOBILE-VIEWERのブーリアン値で条件分岐し、falseとなった時は通常のモバイル判定へ移行するようにします。

まとめ

前提としてCloudFront側のForward HeadersのWhitelist設定を行う必要があります。タブレットでアクセスした場合の判定を変更したい場合はコードとともにCloudFront側の設定も変更しましょう。

今回は本サイトで使用しているテーマ『STORK』を例に説明しましたが、他のテーマでもis_mobile関数、wp_is_mobile関数が使われているのであれば有効的な方法だと思います。ただ、この方法は親テーマを改変している都合上、アップデートのたびに初期化されてしまうため、この点は今後、子テーマfunction.phpで対応するよう変更したいと思います。