【wordpress】コメント表示の際に出力されるHTMLを変更する

前回コメント欄の表示方法の出力方法について記事を更新しました。

okinawanpizza.hatenablog.com

今回はコメント欄に表示されるHTMLを変更していこうと思います。
というのも私自身、既存のテーマ「twentytwentyone」を上書きしなからテーマを作っていました。

フォームのHTMLだけがどこにも見当たらず、、、
調べてみるとthemeディレクトリ配下ではなく
wp_includesディレクトリ内に記述がありました；；

今回はその変更方法をまとめてみました！！

手順

① コメントに使われているHTMLの設定部分を確認

おそらくtwenty-nineteenテーマの場合は
wp_includesにあるclass-walker-comment.phpに記述されているかと思います。

以下の部分が設定箇所となり、
こちらを書き換えることで変更可能です。

 protected function html5_comment( $comment, $depth, $args ) {
        $tag = ( 'div' === $args['style'] ) ? 'div' : 'li';

        $commenter          = wp_get_current_commenter();
        $show_pending_links = ! empty( $commenter['comment_author'] );

        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 id="div-comment-<?php comment_ID(); ?>" class="comment-body">
                <footer class="comment-meta">
                    <div class="comment-author vcard">
                        <?php
                        if ( 0 != $args['avatar_size'] ) {
                            echo get_avatar( $comment, $args['avatar_size'] );
                        }
                        ?>
                        <?php
                        $comment_author = get_comment_author_link( $comment );

                        if ( '0' == $comment->comment_approved && ! $show_pending_links ) {
                            $comment_author = get_comment_author( $comment );
                        }

                        printf(
                            /* translators: %s: Comment author link. */
                            __( '%s <span class="says">says:</span>' ),
                            sprintf( '<b class="fn">%s</b>', $comment_author )
                        );
                        ?>
                    </div><!-- .comment-author -->

                    <div class="comment-metadata">
                        <?php
                        printf(
                            '<a href="%s"><time datetime="%s">%s</time></a>',
                            esc_url( get_comment_link( $comment, $args ) ),
                            get_comment_time( 'c' ),
                            sprintf(
                                /* translators: 1: Comment date, 2: Comment time. */
                                __( '%1$s at %2$s' ),
                                get_comment_date( '', $comment ),
                                get_comment_time()
                            )
                        );

                        edit_comment_link( __( 'Edit' ), ' <span class="edit-link">', '</span>' );
                        ?>
                    </div><!-- .comment-metadata -->

                    <?php if ( '0' == $comment->comment_approved ) : ?>
                    <em class="comment-awaiting-moderation"><?php echo $moderation_note; ?></em>
                    <?php endif; ?>
                </footer><!-- .comment-meta -->

                <div class="comment-content">
                    <?php comment_text(); ?>
                </div><!-- .comment-content -->

                <?php
                if ( '1' == $comment->comment_approved || $show_pending_links ) {
                    comment_reply_link(
                        array_merge(
                            $args,
                            array(
                                'add_below' => 'div-comment',
                                'depth'     => $depth,
                                'max_depth' => $args['max_depth'],
                                'before'    => '<div class="reply">',
                                'after'     => '</div>',
                            )
                        )
                    );
                }
                ?>
            </article><!-- .comment-body -->
        <?php
    }

② functions.php にオーバーライドする

先程の箇所を直接変更するのではなく、
functions.phpに継承します。

<?php
class My_Walker_Comment extends Walker_Comment {
    function html5_comment( $comment, $depth, $args ) {

                //ここに先程の`html5_comment()`の中身を移し替えます
        <?php
    }
}
?>

③ My_Walker_Commentを呼び出す設定をする

テンプレートタグwp_list_comments($args)の設定に変更を加えます。

<?php 
$args = array(
    'walker' => new My_Walker_Comment,
);
wp_list_comments( $args ); 
?>

これで継承したMy_Walker_Commentを呼び出すように設定されておりますので
関数内のHTMLを任意に書き換えることが可能となります!!

おしまい!!

参考
wp_includesディレクトリリファレンス
https://wpm.eomec.com/link-template

説明がわかりやすかったです！
https://blog-and-destroy.com/21654