WordPressのコメント本文のみをHTML要素でラップするカスタマイズ方法

先日、WordPressのコメント本文がラップされていないことに気づきました。

コメント本文部分とは、以下の場所のことです。

ソースコードを見るとこんな感じ。

他の部分（名前や日付）の要素は、「div.クラス名」でしっかりと区分けされているのに、本文部分のみ区分けがない…。

こんな状態だったら、コメント本文のみをCSSで装飾できません。

これを、朝食の鮭定食に例えたら、「定食のメインたる鮭がトレイに直置きで皿に盛られていないイメージ」とでも言いましょうか（※あくまで個人のイメージです）。

これを、以下のようにしっかりと皿に乗せて盛り付けたい（できれば飾り付けもしたい）。

というわけで、「コメント本文をキチンとお皿に盛る（HTML要素でラッピングする）方法」を調べてみました。

WordPressのコメント本文をラッピングする方法

調べてみると、方法はまんま公式ページのwp_list_comments関数に掲載されていました。

カスタマイズする方法としては、まずコメント一覧の呼び出し関数であるwp_list_comments関数を以下のようにコールバック関数を指定して呼び出します。

$args = array(
  'avatar_size' => 55, //アバター画像サイズ（任意））
  'type' => 'comment', //表示するコメントの種類
  'callback' => 'comment_custom_callback', //各コメントの開始タグと内容を表示するカスタム関数の名前
);
wp_list_comments($args); //コメント一覧を表示

あとは、指定したコールバック関数でデフォルトのコメント一覧表示を変更します。

//コメント出力に関するコールバック
if ( !function_exists( 'comment_custom_callback' ) ):
function comment_custom_callback($comment, $args, $depth) {
  if ( 'div' === $args['style'] ) {
    $tag       = 'div';
    $add_below = 'comment';
  } else {
    $tag       = 'li';
    $add_below = 'div-comment';
  }
  ?>
  <<?php echo $tag ?> <?php comment_class( empty( $args['has_children'] ) ? '' : 'parent' ) ?> id="comment-<?php comment_ID() ?>">
  <?php if ( 'div' != $args['style'] ) : ?>
      <div id="div-comment-<?php comment_ID() ?>" class="comment-body">
  <?php endif; ?>
  <div class="comment-author vcard">
    <?php if ( $args['avatar_size'] != 0 ) echo get_avatar( $comment, $args['avatar_size'] ); ?>
    <?php printf( __( '%s <span class="says">says:</span>' ),
                    sprintf( '<cite class="fn">%s</cite>', get_comment_author_link( $comment ) )
                ); ?>
  </div>
  <?php if ( $comment->comment_approved == '0' ) : ?>
     <em class="comment-awaiting-moderation"><?php _e( 'Your comment is awaiting moderation.' ); ?></em>
      <br />
  <?php endif; ?>

  <div class="comment-meta commentmetadata"><a href="<?php echo htmlspecialchars( get_comment_link( $comment->comment_ID ) ); ?>">
      <?php
      /* translators: 1: date, 2: time */
      printf( __('%1$s at %2$s'), get_comment_date(),  get_comment_time() ); ?></a><?php edit_comment_link( __( '(Edit)' ), '  ', '' );
      ?>
  </div>

  <div class="comment-content">
    <?php comment_text($comment, array_merge( $args, array( 'add_below' => $add_below, 'depth' => $depth, 'max_depth' => $args['max_depth'] ) )); ?>
  </div>

  <div class="reply">
      <?php comment_reply_link( array_merge( $args, array( 'add_below' => $add_below, 'depth' => $depth, 'max_depth' => $args['max_depth'] ) ) ); ?>
  </div>
  <?php if ( 'div' != $args['style'] ) : ?>
  </div>
  <?php endif; ?>
  <?php
}
endif;

デフォルトとの変更点は、単にコメント本文が出力される部分「comment_text()」に対して.comment-contentクラスでラップしただけです。

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

動作確認

これにより、ソースコードを見ると以下のように、コメント本文が.comment-contentクラスによって、しっかりラップされています。

これにより、「コメント本文（のみ）」に対してもCSSにより装飾出来るようになりました。

まとめ

こんな感じで、コメントそれぞれの本文部分をHTML要素でラッピングすることができます。

普通にWordpressを利用する分には、特に気にするところでもないですが、「コメント本文部分をCSSで装飾したい」とか「コメント本文だけ囲まれていないなんて気持ち悪い」なんて場合には、必要になるカスタマイズかと思います。

他の部分を変更したい場合でも、コールバック関数の内容を書き換えれば手軽に変更できるかと思います。