AMP ページでも WordPress のコメント欄を表示するカスタマイズ(コメントタイプ:シンプルスレッド表示・ 某スレッド掲示板風)

AMPページにシンプルスレッド表示と某スレッド掲示板風のコメント欄を表示

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

カスタマイズ箇所コメント欄(AMP)
カスタマイズ方法PHP
テンプレート変更あり
コピペの可否100% 可能

Simplicity の AMP ページに、コメント欄を表示することは可能です。

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

今回はコメント表示タイプ「シンプルスレッド表示」と「某スレッド掲示板風」のコメント欄を、 AMP ページに設置するカスタマイズをご紹介します。

ただし、コメントフォームは AMP への対応に障害があるため、表示されません。

その代わりに、通常ページのコメントフォームに移動する「コメントする」ボタンを設置します。

完成図は以下のとおりです。

AMPページにシンプルスレッド表示を設置した完成図シンプルスレッド表示の完成図

AMPページに某スレッド掲示板風を設置した完成図某スレッド掲示板風の完成図

AMP ページでの「シンプルスレッド表示」と「某スレッド掲示板風」の切り替えは、テーマ設定ではできません。

2つの表示タイプは CSS が異なるため、ご希望のタイプの CSS を amp.css に指定します。

今回のカスタマイズの手順は以下のとおりです。

エラーが出ないようにアバターと個別コメント返信機能を AMP 用に変換

コメントリストには、アバターと個別コメントへの返信が出力されます。

「某スレッド掲示板風」でどちらも表示されないのは、 CSS で非表示になっているだけです。

そのため、「シンプルスレッド表示」でも「某スレッド掲示板風」でも、アバターと個別コメントへの返信を 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> に置き換えています。

個別コメントへの返信は、 onclick 属性を取り除いています。

これで AMP エラーが出る心配がなくなりました。

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

コメント欄のテンプレートを作成

次に AMP ページ専用のコメント欄テンプレートを自作します。

親テーマの comments-thread.php に手を加えるわけではないため、 Simplicity のアップデート時の手間が減ります。

FTP ソフトを使用し、 simplicity2-child の直下に 1つファイルを作成。

作成したファイルに self-made-amp-comments-thread.php と名前をつけ、下記のコードをコピペします。

<!-- comment area -->
<div id="comments-thread">
    <?php
    if( have_comments() ):
    ?>
        <section>
            <h2 id="comments">『<?php the_title(); ?>』へのコメント</h2>
            <ol class="commets-list">
                <?php wp_list_comments( 'callback=thread_comment' ); ?>
            </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>

HTML のアウトラインは、Simplicity の一般ページと同じです。

コメント欄を表示かつコメントがある時には、見出しの「コメントをどうぞ」は <h3> で出力します。

コメント欄を表示かつコメントがない時には、見出しの「コメントをどうぞ」は <h2> で出力します。

また、コメント欄を表示かつコメントがない時には、「ご意見やご要望をお聞かせください。」のテキストを表示しています。

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

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

ボタンの「コメントする」のテキストは '.get_theme_text_comment_submit_label().' にすると、テーマ設定 → 「テーマ内テキスト」 → 「コメントサブミットラベルを変更」の定型文を呼び出せます。

<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 を子テーマ直下にコピペをし、子テーマに設置した single-amp.php を開きます。

次に、 <?php endif; //is_related_entry_visible?> を探し、 その下の行に下記のコードを追加します。

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

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

CSS で見た目を調整する

CSS は、「シンプルスレッド表示」と「某スレッド掲示板風」とで異なります。

ご希望のタイプの CSS をご選択ください。

シンプルスレッド表示の CSS

「シンプルスレッド表示」を選択される場合には、下記の CSS を子テーマの amp.css に追加します。

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

#comments {
  margin-bottom: 25px;
}

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

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

.children {
  padding-left: 2em;
}

.comment-info {
  display: inline;
}

.comment-info > .avatar {
  float: right;
  margin: 0 0 0 10px;
  max-width: 40px;
  max-height: 40px;
}

.comment-author {
  font-weight: bold;
}

.comment-id,
.form-allowed-tags {
  display: none;
}

.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 は、お好みでご変更ください。

某スレッド掲示板風の CSS

「某スレッド掲示板風」を選択される場合には、下記の CSS を子テーマの amp.css に追加します。

#comments-thread {
  background: #f7f7f7;
  padding-bottom: 30px;
}

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

#comments {
  margin-bottom: 25px;
}

.commets-list {
  margin: -20px 29px 40px 39px;
  padding-left: .5em;
}

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

.children {
  padding-left: 2em;
}

.comment-info {
  font-weight: bold;
}

.comment-info > .avatar,
.comment-reply {
  display: none;
}

.comment-author {
  color: #008800;
}

#comments-thread p {
  font: 12pt/18px "Mona","IPA MONAPGOTHIC","MS PGothic","MS Pゴシック","MS Pゴシック","MS Pゴシック",sans-serif;
}

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

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

.comments-from-amp {
  background: #fff;
  border: 1px solid #333;
  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;
}

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

@media screen and (max-width: 740px) {
  #comments-thread {
    margin: 0 -10px;
  }
  .comment-info {
    font-size: 14px;
  }
}

Simplicity デフォルトの CSS を真似ているため、見た目はほぼ同じはず。

違ったらごめんよ (´・ω・`)


Simplicity は、テーマ側で AMP に対応している貴重な WordPress テーマです。

そのままの利用でも十分ですが、 Simplicity 利用者がカスタマイズすることでより強化できます。

CSS をそのまま使用するのなら 100% コピペでできるため、カスタマイズをされてはいかがでしょうか。

Facebook ページにいいね!をする
Twitter でフォロワーになる

シェアする

URL をコピーする