comment_class()

comment_class() の用途

comment_class() は、コメントのHTML要素にCSSクラスを付けるためのテンプレートタグです。

この関数を使うと、コメントの状態や投稿者によって自動的に適切なクラスが付与され、CSSで装飾やスタイルをつけやすくなります。

WordPressのテーマでコメントを表示するときに、特に <li> や <div> にクラスを追加する目的で使います。

comment_class() の基本の使い方

最もよく使われる形は以下です。

<li <?php comment_class(); ?> id="comment-<?php comment_ID(); ?>">

このように書くと、コメントの種類に応じて様々なクラスが自動的に出力されます。

出力例：

<li class="comment byuser comment-author-admin bypostauthor even thread-even depth-1" id="comment-25">

このように複数のクラスがHTMLに付与されるため、CSSで柔軟にデザインを制御できます。

comment_class() の自動で付与されるクラス

comment_class() は状況に応じて以下のようなクラスを自動的に付与します。

例として、投稿者本人のコメントには bypostauthor クラスが付くので、色を変えるなど特別な装飾をしやすくなります。

comment_class() のパラメータ

comment_class() には以下のようなパラメータがあります。

omment_class( string|array $class = '', int|WP_Comment $comment_id = null, int|WP_Post $post_id = null, bool $echo = true )

それぞれの意味を詳しく解説します。

第1引数 $class

任意のクラス名を追加できます。

例：

<li <?php comment_class('my-comment'); ?>>

出力例：

<li class="comment byuser even my-comment">

第2引数 $comment_id

対象のコメントIDを指定します。
デフォルトは現在のコメント。

複数のコメントをループ外で処理したい場合に使います。

第3引数 $post_id

対象の投稿IDを指定します。
ほとんどの場合、コメントの属する投稿が自動的に判別されるため指定不要です。

第4引数 $echo

true にするとHTML属性をそのまま出力、
false にすると文字列を返します。

例：返り値を変数に代入する場合

$class = comment_class('', null, null, false);
echo '<li ' . $class . '>';

comment_class() の出力されるHTMLの形式

comment_class() はHTML属性として class="..." を出力します。

例：

<li <?php comment_class(); ?>>

出力例：

<li class="comment even depth-1">

このようにHTML要素に直接書けるので便利です。

comment_class() の実装例

コメントリストをループで出力する場合、よく次のように書きます。

<ol class="comment-list">
<?php
wp_list_comments([
    'style'      => 'li',
    'short_ping' => true,
]);
?>
</ol>

wp_list_comments()を使うと、内部で自動的にcomment_class()が呼ばれます。

comment_class() のCSSでの活用例

たとえば、投稿者のコメントだけ背景を変えたいときは、bypostauthorを使います。

li.bypostauthor {
    background-color: #f9f9f9;
    border-left: 3px solid #0073aa;
}

同様に奇数偶数のコメントを交互に塗り分ける場合も簡単です。

li.comment.odd {
    background-color: #fff;
}
li.comment.even {
    background-color: #f5f5f5;
}

comment_class() のフック

comment_class フィルターを使えば、クラスの配列を自由に書き換えられます。

例：depth-の代わりに独自クラスを付与する

add_filter('comment_class', function($classes, $class, $comment_id, $comment, $post_id){
    if (in_array('depth-1', $classes)) {
        $classes[] = 'first-level-comment';
    }
    return $classes;
}, 10, 5);

comment_class() のまとめ

comment_class()のポイント

• コメントの状態に応じて便利なクラスを自動付与する
• bypostauthor, odd, even, depth-{n}など多数のクラスが付く
• CSSで簡単に見た目を変えられる
• 任意のクラスを追加可能
• 出力を制御する4つの引数が用意されている

テーマ開発ではとても重要な関数なので、ぜひ活用してください。