【wordpress】コメント欄を作りたい！〜カスタマイズ編〜

2021.5.172021.5.17Writer: tamakiComment: 0

開発ブログ

今回はコメント欄に表示される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
    }

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.' );

}

<{{urvanov-syntax-highlighter-internal:0}} id="comment-<?php comment_ID(); ?>" {{urvanov-syntax-highlighter-internal:2}}>

<article id="div-comment-<?php comment_ID(); ?>" class="comment-body">

</div>

</div>

<em class="comment-awaiting-moderation">{{urvanov-syntax-highlighter-internal:8}}</em>

</footer>

</div>

</article>

<?php

}

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

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

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

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

1	{{urvanov-syntax-highlighter-internal:0}}

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

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

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

1	{{urvanov-syntax-highlighter-internal:0}}

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

おしまい!!

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

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