CloudFront からオリジンサーバに対して、User-Agent は送信されません。そのため、モバイルブラウザの判定に使用する wp_is_mobile() 関数を使うことができず、モバイル用のテーマの振り分けができません。
この場合、以下の手順で対応が可能です。
A: 最新版の C3 Cloudfront Cache Controller を使用する場合
導入するだけで対応可能。
以下のサポートドキュメントを参照の上，設定を行う。
C3 Cloudfront Cache Controller の設定方法
B: 古いバージョンの C3 Cloudfront Cache Controller を使用する場合
※ Amimoto AMIでは 最新版の C3 Cloudfront Cache Controllerへのアップデートを強く推奨します。
古いバージョンの C3 Cloudfront Cache Controller プラグインでも Nginx Mobile Theme プラグイン および、判定処理を functions.php へ追加する事により uesr-agent の判定は可能です。
この方法はWordPress のバージョンによって対応方法が異なるため、以下の手順を参照の上、設定をしてください。
- WordPress 4.8 以前の場合、wp_is_mobile() を代替する関数を使用する
- WordPress 4.9 以降の場合、wp_is_mobile フィルターフックを追加する
1. Nginx Mobile Theme プラグインを導入する
Nginx Mobile Theme プラグイン は Nginx にてUser-Agent 判別を行い、テーマを PC とスマートフォンで別々に使用するためのプラグインです。
ですが、PC・スマートフォンどちらでも同じテーマを使用しての同一テーマ内で User-Agent 切り替えをする関数を使用する場合でも CloudFront から送られるヘッダデータで切り分けをすることが可能となりますので、まずこちらを導入してください。
プラグインの詳細は Nginx Mobile Theme をご参照ください。また、使用方法については Nginx Mobile Theme の設定と使い方 をご参照ください。
2. 判定処理を functions.php へ追加し、使用する
2-1. WordPress 4.8 以前の場合、wp_is_mobile() を代替する関数を使用する
以下の関数をテーマの functions.php などに追記して wp_is_mobile() の代わりに使用してください。
スマートフォンからのアクセスの場合、CloudFront からオリジンサーバへ CloudFront-Is-Mobile-Viewer というヘッダが送信されるため、PHP 側でこれを判別するように処理をします。
function cf_is_mobile() {
$is_mobile = function_exists('wp_is_mobile') && wp_is_mobile();
// CloudFront でスマートフォンと判定された場合、true を返す。
if ( isset($_SERVER['HTTP_CLOUDFRONT_IS_MOBILE_VIEWER']) && "true" === $_SERVER['HTTP_CLOUDFRONT_IS_MOBILE_VIEWER'] ) {
$is_mobile = true;
}
// CloudFront でタブレットと判定された場合、true を返す。
// （タブレットはPCと同じ扱いにしたい場合は、$is_mobile を false にする
if ( isset($_SERVER['HTTP_CLOUDFRONT_IS_TABLET_VIEWER']) && "true" === $_SERVER['HTTP_CLOUDFRONT_IS_TABLET_VIEWER'] ) {
$is_mobile = true;
//$is_mobile = false;
// タブレットをPCと同じ扱いにしたい場合は false にする
}
return $is_mobile;
}
設定後には必ず CloudFront のキャッシュのクリアを行ってください。
2-2. WordPress 4.9 以降の場合、wp_is_mobile フィルターフックを追加する
なお、C3 Cloudfront Cache Controller プラグインの最新版ではこの対応をおこなっているため、ファイルの編集作業は不要です。
プラグインの更新と更新後のキャッシュ削除を行ってください。
スマートフォンからのアクセスの場合、CloudFront からオリジンサーバへ CloudFront-Is-Mobile-Viewer というヘッダが送信されるため、PHP 側でこれを判別するように処理をします。
WordPress 4.9 以降では wp_is_mobile というフィルターフックが追加されました。
以下のコードをテーマの functions.php に追加することで UA の判定が可能となります。
add_filter( 'wp_is_mobile', function( $is_mobile ) {
// CloudFront でスマートフォンと判定された場合、true を返す。
if ( isset($_SERVER['HTTP_CLOUDFRONT_IS_MOBILE_VIEWER']) && "true" === $_SERVER['HTTP_CLOUDFRONT_IS_MOBILE_VIEWER'] ) {
$is_mobile = true;
}
// CloudFront でタブレットと判定された場合、true を返す。
// （タブレットはPCと同じ扱いにしたい場合は、$is_mobile を false にする
if ( isset($_SERVER['HTTP_CLOUDFRONT_IS_TABLET_VIEWER']) && "true" === $_SERVER['HTTP_CLOUDFRONT_IS_TABLET_VIEWER'] ) {
$is_mobile = true;
}
return $is_mobile;
});
設定後には必ず CloudFront のキャッシュのクリアを行ってください。
設定は以上です。