今回はWordPressのコメント欄をカスタマイズしてみました。デフォルトで設定されているコメント欄は、デザインも設計もなんだか今ひとつだったのでいつかカスタマイズしようと思っていました。
参考にさせていただいたのは下記のサイト様です。ありがとうございました！
comments.phpを1から作る | トリコロールな猫
公式サイト
カスタマイズする部分
手を加える部分は基本的に以下の４つです。comments.phpは新規に作り、function.phpには新しい関数を追加します。style.cssではもちろん見た目を整えます。あとsingle.phpはcomments.phpを読み込む記述を書くだけです。
・function.php
・comments.php
・style.css
・single.php
function.phpに関数を追加しよう
カスタマイズしたコメント欄を表示するための関数を追加します。コメント欄に表示するのは、投稿者名、日付、内容の３つにしてあります。あと、必要であれば、メールアドレスやサイトリンクなども追加できます。使えるタグは、こちらの公式サイトで確認できます。
<!--関数名は好きなもので大丈夫です今回はcustom_commentにします-->
function custom_comment($comment,$args,$depth){
$GLOBALS['comment']=$comment;?>
<!--liタグの中身が、コメント１つ分で表示される部分になります-->
<li>
<div class="comment-meta">
<span class="comment-author">
<?php printf(__('%s'), get_comment_author_link()) ?>
</span>
<span class="comment-date">
<?php comment_date();?><?php comment_time();?>
</span>
</div>
<div class="comment-content">
<?php comment_text();?>
</div>
</li>
<?php
}
後ほど記述しますが、ここで設定したclassやidに対してスタイルを設定すればオリジナルのデザインを作ることが出来ます！liタグ内は、コメントタグだけ気をつければ普通のhtmlと同じようにレイアウトを考えれば大丈夫です。
comments.phpを作る！
最低限下記だけで大丈夫です！function.phpに追加した関数のliタグがコメントの数分ここで記述してあるulタグ内に収まるというわけです。wp_list_comments自体は、デフォルトのcomments.phpで記述してありますがここでは先ほど追加した関数を利用するためにcustom_commentをコールバックしています。
<!--コメントがあればulタグを表示する設定-->
<?php if(have_comments()):?>
<ul class = "commentlist">
<?php wp_list_comments('callback=custom_comment');?>
</ul>
<?php endif;?>
<?php comment_form(); ?>
style.cssで見た目を整える
スタイルシートは、function.phpに記述したclassやidを指定して記述していきます。こちらは通常の制作通りで大丈夫です。ただ、エディタ画面で記述すると面倒かもしれないので、事前にhtmlとcssは組んでしまってからfunction.phpやcomments.phpをカスタマイズするってワークフローが楽じゃないかと思います。
single.phpに読み込む！
ここには、以下のように読み込むだけです。本来はcomment_templateだけで良いのですが、私はコメント関連のブロックを囲っておきたかったのと、見出しが欲しかったのでdivを入れてh3を追加しています。
<div class="comments_wrap"> <h3 id="comments">コメント</h3> <?php comments_template(); ?> </div>
これらのカスタマイズをしただけだと、実はコメントフォームの方はまだカスタマイズ出来てはいないのですが、それはまた次回にいたします。
ただ、それもやはり下記で書いてくださっているのでこちらを参考にするのをお勧めします。僕はこれで上手くいきました！
WordPressのコメントフォーム（comment_form）をカスタマイズ | トリコロールな猫
では！
