Simplicity の AMP ページに WordPress のコメント欄を設置

AMPにWordPressのコメント欄を設置

Akira

福岡在住ウェブデザイナー。 WordPress のカスタマイズを、「見やすさ」と「使いやすさ」にこだわり紹介しています。

Simplicity の AMP ページには、コメント欄が表示されません。

そこで Simplicity のコメント表示タイプ「デフォルト」のコメント欄を、 AMP ページに設置するカスタマイズをご紹介します。

Simplicity のコメント表示タイプ「シンプルスレッド表示」と「 某スレッド掲示板風」は、「 AMP ページでも WordPress のコメント欄を表示するカスタマイズ(コメントタイプ:シンプルスレッド表示・ 某スレッド掲示板風)」をご覧ください。

カスタマイズ後は、コメントリストと「コメントする」ボタンが表示されます。

コメントリストと「コメントする」ボタンが表示されたカスタマイズ後の完成図

「コメントする」ボタンと個別コメントの返信をクリックすると、通常ページのコメントフォームに移動します。

もちろん AMP 検証には合格するため、安心してカスタマイズが可能です。

アバターと個別コメント返信機能を AMP に対応する

AMP ページにコメントリストを表示するためには、アバターと個別コメント返信機能の AMP 対応が必要です。

まずは、子テーマの functions.php に下記のコードを追加します。

// AMP用にアバターを変換する
add_filter( 'get_avatar', function( $get_avatar ) {
    if( is_amp() === false ) {
        return $get_avatar;
    }
    // 画像タグをAMP用に置換
    $get_avatar = preg_replace( '/<img(.+?)\/?>/is', '<amp-img$1></amp-img>', $get_avatar );
  
    return $get_avatar;

}, 9999999999 );
 
// AMP用に個別コメント返信機能を変換する
add_filter( 'comment_reply_link', function( $comment_reply_link ) {
    if( is_amp() === false ) {
        return $comment_reply_link;
    }
    // onclick属性を取り除く
    $comment_reply_link = preg_replace( '/ *?onclick=["][^"]*?["]/i', '', $comment_reply_link );
    $comment_reply_link = preg_replace( '/ *?onclick=[\'][^\']*?[\']/i', '', $comment_reply_link );
    
    return $comment_reply_link;

}, 999999999 );

アバターの <img> タグを、 <amp-img> に置き換えています。ただし、タグの中身の属性置き換えまではしていません。

個別コメント返信機能からは、 AMP で禁止の onclick 属性を取り除いています。

コードは、わいひらさんの「 WordPress の投稿本文を AMP 化する方法」がすごく参考になります。

コメント欄を自作する

次に、AMP ページに設置するコメント欄を作成します。

FTP ソフトを使い simplicity2-child の直下に 1 つファイルを作成し、ファイル名を self-made-amp-comments-default.php にします。

今後親テーマに新たに PHP ファイルが作られても、こんなファイル名とはかぶらないはず。

作成した self-made-amp-comments-default.php ファイルに、以下のコードを追加します。

<!-- comment area -->
<div id="comment-area">
    <?php 
    if( have_comments() ): // コメントがあったら
    ?>
    <section>
        <h2 id="comments"><?php echo get_theme_text_comments(); // コメントタイトル ?></h2>
        <ol class="commets-list">
            <?php wp_list_comments( 'avatar_size=56' ); // コメント一覧を表示 ?>
        </ol>
        <div class="comment-page-link">
            <?php paginate_comments_links(); // コメントが多い場合、ページャーを表示 ?>
        </div>
    </section>
    <?php 
    endif;
    if( is_comment_form_freeze() ) { // コメント凍結
        echo get_theme_text_comment_freeze_label();
    } else { // コメント表示
        if( have_comments() ) { // コメントがある時
            echo '<aside>
                      <div id="respond" class="comment-respond">
                          <h3 id="reply-title" class="comment-reply-title">' . get_theme_text_comment_reply_title() . '</h3>
                          <a class="comments-from-amp" rel="nofollow" href="' . get_the_permalink() . '#respond">コメントする</a>
                      </div>
                  </aside>';
        } else { // コメントがない時
            echo '<aside>
                      <div id="respond" class="no-comment-respond">
                          <h2 id="reply-title" class="comment-reply-title">' . get_theme_text_comment_reply_title() . '</h2>
                          <p class="no-yet-comment">ご意見やご要望をお聞かせください。</p>
                          <a class="comments-from-amp" rel="nofollow" href="' . get_the_permalink() . '#respond">コメントする</a>
                      </div>
                  </aside>';      
        }
    }
    ?>
</div>

親テーマの comments-default.php を基本に、通常ページと同じ HTML のアウトラインにしています。

コメントを表示していてコメントがある時には、「コメントをどうぞ」の見出しが <h3> タグで出力されます。

コメントを表示していてコメントがない時には、「コメントをどうぞ」の見出しが <h2> タグで出力されます。

また、コメントがない時は、見出しとボタンだけではあまりにも寂しいため、「ご意見やご要望をお聞かせください。」のテキストを表示しています。

コメントがない時に表示されるテキスト

ボタンの「コメントする」( 2 ヶ所)、テキストの「ご意見やご要望をお聞かせください。」( 1 ヶ所)の定型文は、コード内でご変更ください。

ちなみに、ボタンの「コメントする」は下記のコードにすることで、テーマ設定 → 「テーマ内テキスト」 → 「コメントサブミットラベルを変更」の定型文を呼び出せます。

<a class="comments-from-amp" rel="nofollow" href="' . get_the_permalink() . '#respond">' . get_theme_text_comment_submit_label() . '</a>

「コメントをどうぞ」の見出しは、テーマ設定の「テーマ内テキスト」より「返信コメントタイトルを変更」で変更可能です。

single-amp.php に設置

作成した self-made-amp-comments-default.php を、 single-amp.php に設置します。

まず、 FTP ソフトを使い親テーマにある single-amp.php を、子テーマ直下にコピペします。

子テーマに設置した single-amp.php を開き、下記のコードを探します。

<?php endif; //is_related_entry_visible?>

上記のコードの下の行に、下記のコードを追加します。

<?php //コメント欄
if( is_comments_visible() )
    comments_template( '/self-made-amp-comments-default.php' ); 
?>

これで関連記事下にコメント欄が表示されます。

CSS で装飾

あとは CSS で見た目を整えます。

下記の CSS を子テーマの amp.css に追加します。

#comments,
#reply-title {
  font-size: 21px;
}

#comments {
  margin-bottom: 25px;
}

.commets-list,
.trackback-list {
  margin: -20px 0 40px;
}

#comment-area ol,
#comment-area ul {
  list-style: none;
  padding-left: 0;
}

.commets-list li,
.trackback-list li {
  border-bottom: 1px solid transparent;
  margin-top: -1px;
  padding: 20px 0 0;
  width: 100%;
}

.children {
  margin-left: 1.5em;
}

.commets-list .avatar {
  float: left;
  margin: 0 10px 10px 0;
}

.comment-meta,
.reply {
  font-size: 80%;
}

.reply {
  text-align: right;
}

.comment-body p {
  clear: both;
}

.comment-page-link {
  margin: 1em 1em 3em;
  text-align: center;
}

#respond {
  margin-bottom: 40px;
}

.comment-respond,
.no-comment-respond {
  text-align: center;
}

.comments-from-amp {
  border: 1px solid #777;
  border-radius: 3px;
  box-sizing: border-box;
  color: #333;
  display: inline-block;
  height: 40px;
  line-height: 40px;
  min-width: 64px;
  padding: 0 16px;
  text-decoration: none;
  transition: .3s cubic-bezier(.4, 0, .2, 1);
}

.comments-from-amp:hover {
  background: #eee;
  color: #333;
}

Simplicity デフォルトのコメント欄の CSS とほぼ同じです。

CSS はお好みでご変更ください。


コメントは、重要なコンテンツの 1 つです。

また、コメントを残せるかは、サイト訪問者の満足度を左右します。

AMP ページでもコメントリストを表示し、コメントを残せるようにしてはいかがでしょうか。