このページでは、ワードプレスの自作テーマで「コメント」を受け付け、そのコメントを表示するための方法について解説します。
やはりウェブサイトを運営する上でコメント機能は必要ですよね。コメントを受け付け、表示する機能がウェブサイトにあれば、サイト訪問者の直の声を聞くことができますし、サイト訪問者とコミュニケーションをとることもできます。
頑張って作成したページにコメントがもらえると非常に嬉しいですよね!
ただし、自作テーマを0から開発している場合、このコメントの機能は無効になっています。ですので、訪問者からコメントを受け付けることともできませんし、当然いただいたコメントを表示することもできません。
このページでは、自作テーマでこの「コメントの受け付け」と「コメントの表示」を行うための手順を解説していきます。
Contents
コメントの受付と表示に必要な手順
まず思い浮かべていただきたいのが、コメントの受け付けからコメント表示までの流れです。
ワードプレスにおいて、コメントの受付は下図のような流れで行われ、最終的にデータベース(MySQL)にコメントが保存されます。
さらに、コメント表示はデータベース(MySQL)に保存されたコメントを読み込み、下の図のような流れで行われます。
もっと細かい処理も行われていますが、イメージとしては大体こんな感じで良いと思います。
つまり、コメントを受け付け、そのコメントを表示するためには上記の処理の流れを実現する必要があるということになります。
ただし、ワードプレスでは、ワードプレス本体(コア部分や管理画面生成部)は「コメント受付フォーム表示」と「コメントの表示」以外の機能は既に持っています。
したがって、テーマ開発者は、それ以外の機能、つまり「コメント受付フォーム表示」と「コメント表示」をプログラミングして実装してやれば、自作テーマを有効化したウェブサイトでコメントの受付とコメントの表示が行えるようになります。
また、ワードプレスにおいては、コメント機能(受付画面表示やコメントの表示)は基本的に「comments.php」に実装することが推奨されています。
したがって、自作テーマでコメントを受け付け、コメントを表示するためには、下記の3つの手順を行う必要があります。
- テンプレートファイルから comments.php を読み込む
- comments.php でコメントの受付フォームを表示する
- comments.php で受け付けたコメントを表示する
なんだか難しそうですが、実はコメントの受付やコメントの表示を行う関数自体はワードプレスに用意されています。
ですので、これらは関数の呼び出しを行うだけで簡単に実現することが可能です。
テンプレートファイルから comments.php を読み込む
まずはコメント機能を実装する comments.php を用意し、さらにテンプレートファイルから comments.php の読み込みを行います。
スポンサーリンク
comments.php を用意する
前述の通り、ワードプレスではコメント機能は comments.php に実装することが推奨されています。
0からテーマ開発を行っている場合は、comments.php が存在しませんので、まずは comments.php を用意しましょう。
この comments.php は下記のフォルダに設置します。まずは空のファイルで良いので comments.php を設置しましょう。
ワードプレスインストールフォルダ/wp-content/themes/[テーマ名]/
他のテンプレートファイル(single.php、category.php、sidebar.php など)と同じ階層に設置します。名前が comments.php であることに注意してください。
comments.php を読み込む
さらに用意した comments.php を single.php 等のテンプレートファイルから読み込みします。
この comments.php は下記の関数を実行することで読み込むことができます。
<?php comments_template( $file, $separate_comments ); ?>
引数で読み込むファイル名を指定できますが、引数を指定しなかった場合は自動的に先ほど用意した comments.php が読み込まれ、comments.php の処理が実行されることになりますので、引数は基本 “なし” で良いです。
例えば下記のように single.php を作成すれば、投稿ページを表示すると記事本文(コンテンツ)を表示後に comments.php が読み込まれるようになります。
<?php
get_header();
echo '<div id="content">';
while ( have_posts() ) {
the_post();
echo '<h1>';
the_title();
echo '</h1>';
the_post_thumbnail( 'medium' );
the_content();
comments_template();
}
echo '</div>';
get_sidebar();
get_footer();
?>
したがって、comments.php でコメントの受付フォーム表示とコメントの表示を行うようにしておけば、記事本文表示後に、受付フォームとコメントが表示されるようになります。
といっても、まだ comments.php は空ですので何も表示されません。
ここからこの comments.php を作り込んでいくことで、コメント受付とコメント表示が行えるようになります。
comments.php でコメントの受付フォームを表示する
まずは「コメントの受付フォームの表示」を行います。
スポンサーリンク
comment_form 関数で受付フォームを表示する
コメント受付フォームは comment_form 関数を実行するだけで表示することが可能です。
一番簡単なコメント受付フォームを表示する comments.php は下記のようになります。
<?php
comment_form();
?>
ページを表示してみると、下のようなコメント受付フォームが表示されるようになったことが確認できるはずです。
comment_form 関数は、ワードプレス本体に既に用意されているコメント受付フォームを表示する関数です。
この受付フォームでは、コメントを受け付けると(コメントが送信されると)コメント本文やコメント送信者の名前をデータベースを自動的に保存してくれます。つまり、コメント受付に必要な機能はこの関数を呼び出すだけで実現することが可能です。
ですので、基本的にコメント受付フォームの表示を行うためには comment_form 関数を実行するだけで良いです。特に最初は。
comments.php で受け付けたコメントを表示する
続いてページ訪問者の方から受け付けたコメントを表示する方法について解説します。
wp_list_comments 関数でコメントを表示する
実はこれも基本は簡単で、wp_list_comments 関数を実行するだけコメントを表示することが可能です。
下記のように comments.php にプログラムを記述すれば、コメント受付フォームの上に受け付けたコメントを表示することができます。
<?php
echo '<ul class="my_comments">';
wp_list_comments();
echo '</ul>';
comment_form();
?>
wp_list_comments 関数はデフォルトでは各コメントを li タグで表示しますので、wp_list_comments 関数前後に ul タグを付加しておくとリストとして綺麗に表示することができます。
実際にページを表示すると、コメントがある場合は下のように受け付けたコメントが表示されます。
スポンサーリンク
wp_list_commetns 関数の注意点
この wp_list_comments 関数には注意点があります。
それは、実行する前にデータベースからのコメントの読み込みを行っておく必要があることです。
読み込みを行わずに wp_list_comments 関数を実行してもコメントは表示されません。
ただし、このデータベースからのコメントの読み込みは、comments.php を読み込むで紹介した comments_template 関数の中で、comments.php を読み込む前に自動的に行ってくれます。
ですので、「comments.php の中で wp_list_comments 関数の実行を行う」 & 「comments_template 関数で comments.php を読み込む」ようにしておけば、 必ずデータベースからのコメント読み込みが行われた後に wp_list_comments 関数が行われるので安全です。
まとめ
このページではコメント受付フォームを表示してページ訪問者からコメントを受け付ける方法と、受け付けたコメントを表示する方法について解説しました。
コメントを受け付け、それを表示することにより、ページ訪問者の方と直接コミュニケーションを取ることができるようになります。コメントをしてもらうことでサイト運営のモチベーションも上がります。
是非、このページを参考にしてコメント受付フォームと受け付けたコメントの表示を行ってみてください!
このページでは基本的なコメント受付フォームやコメントの表示方法を解説しましたが、これらは様々なカスタマイズを行い、より自分好みのものに拡張していくことが可能です。
コメント受付フォームのカスタマイズ方法については下記のページで、
【ワードプレス】コメントフォーム(comment_form)をカスタマイズする【サンプル付き】コメント表示のカスタマイズ方法については下記のページで、
【ワードプレス】コメント表示(wp_list_comments)をカスタマイズする【サンプル付き】それぞれサンプル付きで解説していますので、こちらも是非参考にしていただければと思います!