WordPressで作ったWebサイトをAMP(Accelerated Mobile Pages Project)に対応させるには、プラグイン(以下 AMPプラグイン)を使うと便利です。
ところで・・・AMPプラグインは、デフォルトでは「投稿」のみ対応しています。
このブログを例にすると、以下の投稿
https://www.imamura.biz/blog/27551
のAMPページは
https://www.imamura.biz/blog/27551/amp
でアクセスできます。
カスタム投稿タイプの投稿もAMP対応したい
Webサイトによっては「カスタム投稿タイプ」を作って、カスタム投稿タイプの投稿を利用している場合もあると思います。
「カスタム投稿タイプの投稿もAMP対応させたい!」
ということもあると思います。以下に方法を書きましたので、機会がありましたらご参考ください。
カスタム投稿タイプの投稿をAMP対応する方法
方法は「Automattic/amp-wp: WordPress plugin for adding AMP support」にサンプルが書かれています。
私はありがたく参考にさせていただいて、以下のように書いています。テーマフォルダ内のfunctions.phpの最後尾などに書いたり、プラグイン化して切り出してもいいですね。(私はプラグイン化しています)
//投稿タイプ追加 add_action( 'amp_init', 'amp_add_function_reference' ); function amp_add_function_reference() { add_post_type_support( 'function_reference', AMP_QUERY_VAR ); }
上のコードでは「function_reference」という投稿タイプの投稿に対してAMP対応しています。
このブログを例にすると、以下の投稿
https://www.imamura.biz/blog/function_reference/get_page_uri
のAMPページは
https://www.imamura.biz/blog/function_reference/get_page_uri/amp
でアクセスできるようになります。
カスタム投稿タイプ専用のテンプレートを適用するには
カスタム投稿タイプの投稿もAMP対応できたので、次はAMPページのデザインをオリジナルなものにします。
またまたサンプルを参考にして、私は以下のように書いています。こちらも同様に、テーマフォルダ内のfunctions.phpの最後尾などに書いたり、プラグイン化して切り出してもいいと思います。
//カスタム投稿タイプ専用のテンプレート適用 add_filter( 'amp_post_template_file', 'custom_post_template', 10, 3 ); function custom_post_template( $file, $type, $post ) { if ( 'single' === $type && 'function_reference' === $post->post_type ) { $file = TEMPLATEPATH . '/amp/single-function_reference.php'; //読み込むテンプレートファイルの場所を指定 } return $file; }
上のコードでは、カスタム投稿タイプ「function_reference」の投稿のAMPページは「テーマフォルダ/amp/single-function_reference.php」を読み込むように指定をしています。
「file_exists」などを使って、ファイルがあるかどうかの条件分岐を挟むとよりいいと思います。
まとめ
カスタム投稿タイプの投稿をAMP対応することは今後の制作案件でも増えてきそうなので、作業メモとして残しました。
「似たようなことをされたい」という方は、ご参考いただけますとうれしいです。
このページを共有する