UserAgentによるテンプレート切り替えと公式AMPプラグインを併用する方法【WordPress】

UserAgent 自体がオワコンになりつつある昨今ではあるんですが、WordPress で今どき、UserAgent を見てテンプレートを切り替えているサイトで、公式AMPプラグインを併用する方法についてまとめておきます。

（※現在はこちらのページの方法に変わりました。）

うちでは「W3 Total Cache」というプラグインの設定でユーザーエージェント（以下UA）を判別、モバイル向けに軽量テンプレートを適用しているのですが、その前提のままで AMP 化してやろう、という腹ですな。

具体的にまとめるとこんな感じ。

• モバイルのUAからのリクエスト
  → モバイル向けテンプレートを適用
• その他のUAからのリクエスト
  → PC向けテンプレートを適用
• AMPページへのリクエスト
  → UAに関係なく、モバイル向けテンプレートをベースにAMPプラグインの「Transitional」モードで自動変換したAMPページを適用

おとなしくレスポンシブ対応すればこんなことを考えなくても済むんですが、なんでかこういう複雑な形になってしまいました。

※ 後日談：今回の方法を使用し、かつ、AMPプラグインのキャッシュ機能を有効にすると、「サイトの内容がランダムに変わりすぎる」というエラーを吐くことが分かりました。AMPプラグインのキャッシュを使いたいなら推奨しません。

前提となる設定

こんな記事を読む人には細かな説明は不要でしょうから、ベースとなる WordPress のテーマ設定や W3 Total Cache の User Agent Groups 設定、AMPプラグインの設定については、要点だけを書いておきます。

• WordPress 本体の「テーマ設定」はPC向けテーマに設定
• プラグイン「W3 Total Cache」の「User Agent Groups」設定では、モバイルUA向けのグループを作成。「モバイル向け」テーマのみ掬い上げて振り分ける方針。
• AMP 公式プラグインの設定「Template Mode」 は、「Transitional」または「Reader」を使う前提。（「Standard」では動作確認していない。）

独自プラグインの必要性とAMP Validation

さて、前項の設定を完了すると、その時点でモバイル UA からの AMP リクエストに対しては、AMPプラグインの Transitional モードが、モバイル版テンプレートを元に自動変換してくれた AMP ページがサーブされるようになります。

が、この時点ではまだ、PC版UAからのAMPリクエスト時はPC向けテンプレートを元に自動変換された AMP ページがサーブされるという問題が残っています。

ということで、これを解決すべく、以下の独自プラグインを使うこととしました。

function theme_changer_for_amp($template) {

    // AMP plug-in is not activated.
    if ( !class_exists( 'AMP_Validation_Manager' )) {
        return $template;
    }

    // NEVER call the is_amp_endpoint() when AMP validation mode.
    if ( isset( filter_input(INPUT_GET, AMP_Validation_Manager::VALIDATE_QUERY_VAR ) ) ) {
        return 'MY_MOBILE_TEMPLATE';  // is ignored by official AMP plugin.
    }

    // Force to serve mobile theme when AMP page is requested.
    if (function_exists('is_amp_endpoint') && is_amp_endpoint() ) {
        // Theme for AMP.
        return 'MY_MOBILE_TEMPLATE'; // directory name of mobile theme.
    } else {
        // Theme for other request.
        return $template;
    }
}

add_filter('template', 'theme_changer_for_amp');
add_filter('stylesheet', 'theme_changer_for_amp');
Code language: PHP (php)

※ ソースの 'MY_MOBILE_TEMPLATE' 部分は、各自、モバイル向けテンプレートのディレクトリ名に変更する必要があります。

1つ目の 'MY_MOBILE_TEMPLATE' は AMP プラグインによって無視されます。W3 Total Cache のテンプレート判別の方が勝つので、$template を返した方が綺麗かも。

is_amp_endpoint() は AMP プラグインに用意されているヘルパーファンクションの1つ。AMP ページのリクエスト判別はこれを使うと吉。

冒頭の AMP_Validation_Manager うんぬんの部分は、AMP プラグインの「Validation URL」機能呼び出し時、プラグインから is_amp_endpoint() を呼ぶとエラーになるので、その対策で無理やり入れた感じ。もっとスマートな方法がありそうだけど、プラグインの呼び出し順を調べるのが面倒だったのでこんな感じに。

ちなみにこの状態だと、AMP プラグインの「Validation URL」機能にも W3 Total Cache の UA 判別が機能してしまうので、同機能使用時はモバイルUAから呼び出してやる必要があります。うーん。いまいち。

ただまあ、この方法を使えばやりたいことはフォローできるので、これで良しとしておく。

最終的にはレスポンシブWEBにした方がいいのかもだけど、どーもPCとスマホとで同じHTMLを吐くことに抵抗がありまして。

やりようはいくらでもあるんだけども。