CloudFront からオリジンサーバに対して、User-Agent は送信されません。そのため、モバイルブラウザの判定に使用する wp_is_mobile() 関数を使うことができず、モバイル用のテーマの振り分けができません。

この場合、以下の手順で対応が可能です。
 

1. Nginx Mobile Theme プラグイン を導入し有効化する
2. 判定処理を functions.php へ追加し、使用する
    2-1. WordPress 4.8 以前の場合、wp_is_mobile() を代替する関数を使用する
    2-2. 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 のキャッシュのクリアを行ってください。

Did this answer your question?