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

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

CloudFrontから付与されるヘッダーをSTORKテーマに反映されるように対応します。

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

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

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

Storkのis_mobile関数を書き換えることでモバイル判定自体は可能になりましたが、ウィジェットの処理は反映されていませんでした。

Storkを確認してみると一部のモバイル判定処理はテーマ関数内ののis_mobile関数ではなくWordPress側の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関数が使われているのであれば対応できると思います。近いうちに、子テーマ側で対応できるように処理を考えたいと思います。