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

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

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

コメントの本文部分

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

コメント本文部分のソースコード

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

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

pタグはWordPressの段落分け機能で付加されているだけです。

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

鮭の切り身が直接トレイに載っているイメージ

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

しっかりとさらに盛られた鮭の切り身

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

スポンサーリンク
レクタングル(大)広告

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

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

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

wp_list_comments関数は、大抵のテーマの場合、comments.phpテンプレートで呼び出されていると思います。

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

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

動作確認

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

コメント本文がしっかりラッピングされている

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

コメント本文の装飾例

まとめ

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

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

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