WordPressでカスタム投稿タイプの投稿をAMP対応する方法

AMP

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対応することは今後の制作案件でも増えてきそうなので、作業メモとして残しました。

「似たようなことをされたい」という方は、ご参考いただけますとうれしいです。

著者:bouya Imamura