【WordPress】コメント一覧のHTMLをカスタマイズする例｜Walker_Commentクラス
今回はWordPressのコメント一覧の出力を、カスタマイズして変更する例となります。
【WordPress】コメント一覧のHTMLをカスタマイズする例
WordPressには、ツリー状のHTMLデータ構造を処理するWalkerクラスがあり、コメント一覧のHTMLは、Walkerクラスを継承しているWalker_Commentクラス内で処理されています。
また、Walker_Commentクラスはwp-includes/class-walker-comment.phpファイルで定義されています。
例では、そのWalker_Commentクラスを継承したサブクラスで、コメント一覧のHTMLをカスタマイズします。
カスタマイズする箇所
以下、例でカスタマイズする箇所となります。
- コメント投稿者名のフォーマットを変更
- コメント投稿者のアバターを削除
- コメント日時のリンクを削除
- コメント時刻を削除
- コメントリプライボタンを削除
- コメント本文内でHTMLタグの利用不可
- 一部のHTMLタグを変更
- 一部のclass属性値を削除
コメント一覧をカスタマイズするソースコード
以下、コメント一覧のループをカスタマイズする例となり、functions.phpに記述します。
例では、Walker_Commentクラスを継承したサブクラスで、コメント一覧のループを出力するメソッドhtml5_commentをオーバーライド（上書き）しています。
<?php
class My_Walker_Comment extends Walker_Comment {
function html5_comment( $comment, $depth, $args ) {
$tag = ( 'div' === $args['style'] ) ? 'div' : 'li';
$commenter = wp_get_current_commenter();
if ( $commenter['comment_author_email'] ) {
$moderation_note = __( 'Your comment is awaiting moderation.' );
} else {
$moderation_note = __( 'Your comment is awaiting moderation. This is a preview, your comment will be visible after it has been approved.' );
}
?>
<!-- コメント-->
<<?php echo $tag; ?> id="comment-<?php comment_ID(); ?>" <?php comment_class( $this->has_children ? 'parent' : '', $comment ); ?>>
<article class="comment-body">
<div class="comment-meta">
<!-- コメント投稿者名 -->
<div class="comment-author">
<?php
if( get_comment_author( $comment) == get_the_author() ){
echo '記事執筆者 ' . get_comment_author( $comment );
}else{
echo 'コメント投稿者 ' . get_comment_author( $comment );
}
?>
</div>
<!-- コメント日付 -->
<div class="comment-metadata">
<time><?php echo get_comment_date( '', $comment ); ?></time>
<?php edit_comment_link( __( 'Edit' ), '<span class="edit-link">', '</span>' ); ?>
</div>
<?php if ( '0' == $comment->comment_approved ) : ?>
<em class="comment-awaiting-moderation"><?php echo $moderation_note; ?></em>
<?php endif; ?>
</div>
<!-- コメント本文 -->
<div class="comment-content">
<?php
$comment_text = esc_html(get_comment_text());
echo '<p class="guest-comment">' . $comment_text . '</p>';
?>
</div>
</article>
<?php
}
}
?>コメント一覧を表示するソースコード
コメントを表示させるwp_list_comments関数では、パラメータの配列内の'walker'に、カスタムしたWalker クラス のオブジェクトを指定できます。それにより、カスタマイズしたコメント一覧を表示することができます。
以下、上記クラスでカスタマイズしたコメント一覧を表示する例となり、コメント一覧を表示したい箇所に記述します。
<?php
$args = array(
'walker' => new My_Walker_Comment,
);
wp_list_comments( $args );
?>クラスのオーバーライド（上書き）について
Walker_CommentクラスはWordPressのバージョンによって変更される可能性もあるので、Walker_Commentクラスを継承してカスタマイズする場合は、Walker_Commentクラスが定義されている自身のwp-includes/class-walker-comment.phpファイルを確認した上で、オーバーライド（上書き）してください。
ソースコードの説明
以下、Walker_Commentクラスを継承したサブクラスで、カスタマイズした主な箇所の説明となります。
コメント投稿者名のフォーマットを変更
例のソースコード19行目からの以下の箇所は「コメント投稿者名」を表示させる箇所となります。
そこでは、「現在のコメントの投稿者」と「記事投稿者」が同じかを判断し、記事投稿者のコメントとそれ以外のコメントで、「コメント投稿者名」のフォーマットを変更しています。
<!-- コメント投稿者名 -->
<div class="comment-author">
<?php
if( get_comment_author( $comment) == get_the_author() ){
echo '記事執筆者 ' . get_comment_author( $comment );
}else{
echo 'コメント投稿者 ' . get_comment_author( $comment );
}
?>
</div>コメント本文内でHTMLタグを利用不可
例のソースコード41行目からの以下の箇所は「コメント本文」を表示させる箇所となります。
そこでは、WordPressのesc_html関数を利用し、出力するコメント本文をエスケープしています。それにより、コメント本文内でHTMLタグを利用不可としています。
<!-- コメント本文 -->
<div class="comment-content">
<?php
$comment_text = esc_html(get_comment_text());
echo '<p class="guest-comment">' . $comment_text . '</p>';
?>
</div>
HTMLタグをエスケープして出力すると、タグが利用できないため、HTML要素内の文章が詰まった状態で出力され、文章が読みずらくなります。
そのような場合に、文章内の改行・ホワイトスペース（半角スペース・タブ）を、そのままの形式で出力できるCSSのプロパティがあります。詳しくは、以下のリンク先を参考にしてみてください。
HTMLタグを削除・変更
その他、コメント一覧の以下の箇所を削除・変更しています。
- コメント投稿者のアバターを削除
- コメント日時のリンクを削除
- コメント時刻を削除
- コメントリプライボタンを削除
- 一部のHTMLタグを変更
- 一部のclass属性値を削除