WordPressでAMPページにもコメントを表示する方法。

当サイトでは、WordPress純正のコメント欄を設置しているんですが、AMPページでは表示できないという認識だったので、通常ページにだけ表示していました。

プラグインでAMP対応する場合も「Leave a comment」や「コメントを残す」というボタンは表示されますが、実際にコメントするのは通常のページですからね。

ただ、コメント欄を設置したいなぁとコアファイルのコードを見ていたら、コメントを表示することは不可能ではないことに気が付きました。

そこで今回は、AMPページにコメントを表示する方法と、いくつかの問題点をご紹介します。

1
通常ページのコメント欄をAMPページにそのまま表示するのは難しい
2
実用的なコメント欄とは？
3
コメントテンプレートを読み込む
4
コメントテンプレートの編集
5
プロフィール画像（アバター）変換
6
スタイル変更
7
まとめ

通常ページのコメント欄をAMPページにそのまま表示するのは難しい

まず、AMPページにコメント欄を表示するのが難しい理由は、フィルターフックがないからです。

つまり、本文や、他のテンプレートファイルのように、正規表現を使ってコードを削除したり、文字列を修正するのができないんです。

そこで、コアファイルの関数をコピペして関数名と一部のタグを修正してみましたが、aタグのonclickが邪魔をしてコメントへ直接返信する機能が実装できないんです。

ここら辺はあまり詳しくないので、onclick禁止、JavaScript禁止で、代替案が見つかりませんでした。コアファイルをコピペして使うので、今後仕様が変わった時の修正が面倒という問題もあります。

後は、SSL化していなければ、そもそもAMPページにコメントフォームを設置できないというのも大きかったですね。

当サイトのテンプレートは、僕が自作して配布しているものなので、そういった事情を無視できないので。

ただ、実用的かどうかは別として、「コメントへの個別返信機能を実装しなければ通常ページとほぼ同じコメント欄をAMPページにも設置できる」ことはわかりました。最終的にエラーもなくなりました。

実用的なコメント欄とは？

で、最終的に僕は、「通常ページと同じコメントをAMPページにも表示し、実際のコメントは通常ページでしてもらう」という形を採用しました。

▼こちらがAMPページでも表示されるコメント欄。

本当はコメントフォームも実装したかったんですが、通常ページでも、コメントへ個別に返信する場合はページが遷移するので、そこまで頑張る必要もないかなと。

コメントフォームよりも「コメント」の方が重要なので、それが表示できるだけで満足というのが本音だったりします。

（そもそも、プラグインでできないことに挑戦したのが無謀だったかもしれません…笑）

ということで、ここからはそのカスタマイズ方法をご紹介します。AMPページかどうかの条件分岐を使うのが前提条件になるので、ご了承ください。

コメントテンプレートを読み込む

まず、AMPページを生成するファイルに下記の「コメントテンプレートを読み込む」コードを追加します。

<?php if( comments_open() || get_comments_number() ) comments_template(); ?>

single.phpで条件分岐をしてAMPページを生成している場合は必要ありません。

コメントテンプレートの編集

そのコメントテンプレートの中のコードを下記のコードと入れ替えるか、AMPかどうかの条件分岐の部分だけコピペします。

<div id="comments">
<?php if(have_comments()): ?>
 <p id="comments-title">コメント</p>
 <ol class="comment-list">
 <?php if(is_amp) {
 wp_list_comments('max_depth=1');
 } else {
 wp_list_comments();
 } ?>
 </ol>
<?php endif;
 if(is_amp()) {
 echo '<div id="respond" class="comment-respond">
 <a class="comments-from-amp" href="'.get_the_permalink().'#respond">コメントを残す</a>
 </div>';
 } else {
 comment_form($args);
 }
?>
</div>

この中で重要なのは、wp_list_comments('max_depth=1');です。カッコの中のmax_depth=1を引数に指定すると、「返信」が非表示になります。

※このコードでは、is_ampという関数でAMPページかどうかの条件分岐をしていますが、上手くいかない場合は下記記事で紹介している方法を試してみてください。

PHP（WordPress）でAMP対応ページかどうか判別する方法。 Fantastech!! もっと見る

プロフィール画像（アバター）変換

別記事でもまとめていますが、プロフィール画像（アバター）はフィルターフックがあるので、下記のコードをfunctions.phpに追加すればAMP用に変換されます。

function convert_avatar_to_amp_4536 ($avatar) {
 if ( !is_amp() ) {
 return $avatar;
 }

//style属性を取り除く
 $avatar = preg_replace('/ +style=["][^"]*?["]/i', '', $avatar);
 $avatar = preg_replace('/ +style=[\'][^\']*?[\']/i', '', $avatar);

//画像タグをAMP用に置換
 $avatar = preg_replace('/<img/i', '<amp-img', $avatar);

$avatar = '<div>'.$avatar.'</div>';
 return $avatar;

}
 add_filter('get_avatar','convert_avatar_to_amp_4536', 9999999999);

WordPressのプロフィール画像（アバター）のAMP対応方法。

スタイル変更

最後は「コメントを残す」ボタンのスタイルを決めます。好きなようなデザインにしていただければと思いますが、こちらがサンプルコードです。

/* AMPページのコメントボタン */
.comments-from-amp {
 text-align: center;
 display: block;
 color: #fff;
 background-color: #000;
 padding: 10px;
 margin: 1rem auto;
 border-radius: 4px;
}