【WordPress】コメント一覧のHTMLをカスタマイズする例|Walker_Commentクラス

今回はWordPressのコメント一覧の出力を、カスタマイズして変更する例となります。

【WordPress】コメント一覧のHTMLをカスタマイズする例

WordPressには、ツリー状のHTMLデータ構造を処理するWalkerクラスがあり、コメント一覧のループのHTMLは、Walkerクラスを継承しているWalker_Commentクラス内で処理されています。

今回の例では、その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 ); 
?>

メソッドのオーバーライドについて

カスタマイズする前のコメント一覧のソースコードは、wp-includes/class-walker-comment.php内にあるWalker_Commentクラスのhtml5_commentメソッドで確認できます。

また、class-walker-comment.phpはWordPressのバージョンによって変わる可能性もあるので、自らコメント一覧をカスタマイズする際には、自身の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属性値を削除

参考サイトなど

コメント投稿またはTwitterで返信

コメントは、以下の項目(*は必須項目)を入力し「コメントを送信」ボタンから送信お願いします。メールアドレスは公開されることはありません。
Twitterで返信する場合はこちらから。

また、コメントは承認制となります。