自作でWordPressのコメント機能、comments.phpを作る。

当ブログにコメント機能をつけたいなぁと思ってコメント機能を作成しました。

WordPressではcomments.phpを追加することにより、コメント機能を使用できるようになります。

私自身、先人の様々なブログを見ながら独学で知識を蓄えていったはいいものの、時には予期せぬエラーが出たり、理解できなかったり。。。初学者さん向けなので、質問なども受け付けられるようにしたい！

面倒臭いので、めちゃくちゃシンプルな方法で作成しました。

さっそくソースコード公開

解説はのちほど。まずはソースコードをざくっと紹介します。コピペでそのままご自分のテーマに入れてみてください！

comments.php

<?php
if ( post_password_required() ) {
	return;
}
?>
<div id="comments" class="comments-area">
<h2 class="comments-title"><?php echo get_comments_number() . '件のコメント' ?></h2>
	<?php if ( have_comments() ) : ?>
		<ol class="comment-list">
		<?php wp_list_comments(); ?>
		</ol><!-- .comment-list -->
	<?php else : ?>
		<p>コメントはまだありません。最初の一人になりましょう！</p>
	<?php endif; // have_comments() ?>

	<?php comment_form(); ?>

</div><!-- #comments -->

single.php

コメントを表示したいところに追加。single.phpだったらループ内でもループ外でも挿入できました。

<?php if ( comments_open() || get_comments_number() ) :
	comments_template();
endif;?>

header.php

入れ子にしたかったので、それ用のjsを読み込んでくれるようにします。

<?php if (is_singular()) wp_enqueue_script("comment-reply"); ?>

<?php wp_head(); ?>より上だったらどこでも良いです。私はすぐ上に挿入しました。なんとなく。

入れ子構造やWordPressのコメント設定についてはこちらで解説しています！
WordPressのディスカッション設定について解説✍️

プレビュー

CSSをあててないので、デザイン皆無ですが、これでコメント機能を追加できました。
※タイトルはブログ内と同じデザインで設定されてますね

comments.phpの解説

鍵付き記事の場合はcomments.phpの実行を終了

まずは一番最初。WordPressは関数がわかりやすいので、英語をそのまま読めば意味が理解できますね。

<?php
if ( post_password_required() ) {
	return;
}
?>

直訳すると、post（記事）がpassword（パスワード）の保護をかけられていたら、return（戻る）。
記事にパスワード保護があった場合、元プログラム（この場合single.php）の処理に戻るよってことですね。
comments.phpのプログラムは何も実行されずに終了します。

全体を囲うdivとタイトル

<div id="comments" class="comments-area">
<h2 class="comments-title"><?php echo get_comments_number() . '件のコメント' ?></h2>
<!-- ここにコメント一覧とコメントフォームの処理が入る -->
</dib>

<div id="comments" class="comments-area">はデザインをあとで調整できるようにdivで囲ってclassを入れています。（参考にしたソースコードそのままなだけなんだけど）

<h2>からはコメント全体のタイトルです。
echo get_comments_number()で現在何件のコメントがあるのか数字を表示することができます。

条件分岐：コメントがあったら

<?php if ( have_comments() ) : ?>
	<!-- コメント一覧を表示する処理 -->
<?php else : ?>
	<p>コメントはまだありません。最初の一人になりましょう！</p>
<?php endif; // have_comments() ?>

コメントがあったら、コメントのためのリストを表示し、コメントがなかったら「コメントがありません」と表示します。

「N件のコメント」と表示するタイトルをここに含めて、elseを入れなければコメントがない場合は何も表示しないとできますね。

アレンジ例

<?php if ( have_comments() ) : ?>
	<h2 class="comments-title"><?php echo get_comments_number() . '件のコメント' ?></h2>
	<!-- コメント一覧を表示する処理 -->
<?php endif; // have_comments() ?>

コメント一覧を表示

<ol class="comment-list">
	<?php wp_list_comments(); ?>
</ol><!-- .comment-list -->

wp_list_comments()は<li>で表示されるので、<ol>か<ul>で囲ってあげましょう。
いろいろなパラメータがあるのですが、私はWPのディスカッション設定を使いたかったので、何も入れません。検証が面倒くさかった！

コメントフォームを表示

<?php comment_form(); ?>

コメントを書くためのフォームの関数です。
ああ、なんとシンプルなのでしょうか？これだけです！
色々作らなくてもWPが用意してくれています！これもいろいろなパラメータがあるけど、めんどくさいのでこのまま。

さいごに

wp_list_comments()やcomment_form()といったWPが用意している関数だけでなんとかなります。条件分岐でいつ何を表示するかの指定をしてあげるだけです。

もっと色々できるのですが、今回はとりあえずここまで。気が向いたら機能向上します。

それでは、閲覧いただきありがとうございました。

参考サイト

• Comment Template – wordpress.org（英語です）
• WordPress コメントをスレッド対応にする – をかもとさん