コメントフォームとコメント一覧を表示する[WordPressテーマ作成 #5]

シングルページ（記事の個別ページ）にコメントフォームとその記事に投稿されたコメントの一覧を表示するようにテンプレートをつくってみます。

デフォルトテンプレートをみてもコメントの部分はけっこう複雑なのでindex.phpだけではつらいです。なのでテンプレートを分けます。

「comments.php」という名前で新規ファイルを作成。これにタグを書いていきます。index.php側でこのテンプレートを読み込むには次の構文を記事のループの中に書きます。

<?php comments_template(); ?>

さらに、次の文をhead要素内に書きます。

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

コメント返信用のJavascriptを挿入するための記述です。wp_head()関数があるときはその前に挿入します。

それではcomments.phpの作成に入ります。参考にするのはドキュメントの次のページ。

Migrating Plugins and Themes to 2.7/Enhanced Comment Display – WordPress Codex 日本語版

2.7から追加されたタグを使ったテンプレートの書き方が紹介されています。それを参考にまずは大まかにテンプレートの構成を作ってみました。

//この部分は削除しない

if (!empty($_SERVER['SCRIPT_FILENAME']) && 'comments.php' == basename($_SERVER['SCRIPT_FILENAME']))
  die ('このページには直接アクセスできません。');
if ( post_password_required() ) {
  echo '<p class="nocomments">この投稿はパスワードで保護されています。コメントを閲覧するにはパスワードを入力してください。<p>';
  return;
}
//ここまでは削除しない
//ここから編集
<?php if ( have_comments() ) : ?>
  (1)コメントがあるときに表示する内容はここに書く
<?php else :>
  //コメントがひとつもないときに表示する内容はここに書く
  <?php if ('open' == $post->comment_status) : ?>
    (2)コメントを受け付ける設定になっているがコメントがないときに表示する内容をここに書く
    <?php else : ?> 
    (3)コメントを受け付けない設定のときに表示する内容をここに書く
<?php endif; ?>
<?php endif; ?>
<?php if ('open' == $post->comment_status) : ?>
(4) コメントフォームのテンプレートタグはここ
<?php endif; ?>

冒頭の部分はデフォルトを参考。「消さないでね」とあるのでそのままコピペです。comments.phpに直接アクセスできないようにするため（？）と記事がパスワードでロックされているかをチェックしているようです。個人的にはロックすることはないので必要ないかも・・・ですが・・・ロックの意味がよくわかりません。なのでこれはそのままスルー。

1.コメントがあるとき

if (have_comments() ): ?>

まずはhave_comments()でコメントがあるかどうかを判定します。コメントがあれば投稿されたコメントを表示します。コメントの表示にはwp_list_comments()を使います。

<ol>
  <?php wp_list_comments(); ?>
</ol>

デフォルトの設定ではリスト形式で出力されます。このタグのまわりをol要素やul要素で囲むことを忘れずに。特定のコメントに対するコメントがあると入れ子のリストで表示されます。

2. コメントを受けつける設定でコメントがないとき

記事にコメントがあるかどうかはグローバル変数の$postにアクセスして調べているようです。

<?php if ( 'open' == $post->comment_status ) : ?>

$postは記事の情報を持っている配列で、「comment_status」もそのひとつ。コメントを受け付ける設定になっているかどうかを表しています。受け付ける設定なら「open」になっています。

ひとつもコメントがないときは「コメントはありません」と表示するようにします。

#15<?php if ( 'open' == $post->comment_status ) : ?>

<p>コメントはありません。</p>

3. コメントを受け付けない設定のとき

このときは単純になにも表示しないか、「コメントは受け付けていません」とか表示するのがいいかと思います。

#17<?php else : ?>
<p>コメントは受け付けていません</p>

4. コメントフォームをつくる

コメントフォームはコメントを受け付ける設定のときに常に表示したいので、if文を追加します。

<div id="respond">
  <form action="<?php echo get_option('siteurl'); ?>/wp-comments-post.php" method="post" id="commentform">
    <input type="hidden" value="<?php echo $id; ?>" />
   	<?php comment_id_fields(); ?>
    <?php if ( $user_ID ) : ?>
    <p><a href="<?php echo get_option('siteurl'); ?>/wp-admin/profile.php"><?php echo $user_identity; ?></a>としてログインしています。ほかのユーザーIDでコメントするときは<a href="<?php echo get_option('siteurl'); ?>/wp-login.php?action=logout" title="<?php _e('Log out of this account') ?>">ログアウト &raquo;</a>してください。</p>
    <?php else : ?>
    <dl>
      <dt> <label for="author">名前 <span><?php if ($req) _e('(required)'); ?></span></label></dt>
      <dd> <input type="text" name="author" id="author" value="<?php echo $comment_author; ?>" size="22" tabindex="1" /> </dd>
      <dt> <label for="email">メール<span><?php if ($req) _e('(required)'); ?></span></label> </dt>
      <dd> <input type="text" name="email" id="email" value="<?php echo $comment_author_email; ?>" size="22" tabindex="2" /> </dd>
      <dt> <label for="url">Webサイト</label> </dt>
      <dd> <input type="text" name="url" id="url" value="<?php echo $comment_author_url; ?>" size="22" tabindex="3" /> </dd>
   </dl>
   <?php endif; // Check for $user_ID ?>
   <p>次のタグを使うことができます: <?php echo allowed_tags(); ?></p>
   <dl>
     <dt> <label for="comment">コメント</label></dt>
     <dd> <textarea name="comment" id="comment" cols="100%" rows="10" tabindex="4"></textarea> </dd>
   </dl>
   <ul>
     <li> <input name="submit" type="submit" id="submit" tabindex="5" value="Submit Comment" /> </li>
   </ul>
   <div id="cancel-comment-reply">
     <p><?php cancel_comment_reply_link() ?></p>
   </div>
   <?php do_action('comment_form', $post->ID); ?>
  </form>
</div>

ここは長いのでポイントだけ。

div#respond

コメントフォーム全体をid属性respondを指定したdiv要素で囲みます。これはコメントをスレッド（入れ子）形式にする場合は必須だと思います。

<?php comment_id_fields(); ?>

フォームの隠し属性を追加してくれます。これもスレッド形式のときは必須かも。出力される内容は以下のようなものです。

<input type='hidden' name='comment_post_ID' value='10' id='comment_post_ID' />
<input type='hidden' name='comment_parent' id='comment_parent' value='0' />

<?php cancel_comment_reply_link() ?>

返信コメントの入力をキャンセルするためのリンクを表示するための関数です。

とりあえず完成

ひとまず形になりましたが、ちょっと変更したいところもあります。WordPressではコメントやトラックバック、そしてピンバックというものをまとめてコメントとして扱っているのでMTからの移籍組としてはちょっと理解できません。

ということで次回はこれらをわけて表示できるように修正しようと思います。

関連する投稿

• 検索フォームを設置する[WordPressテンプレート作成#8] (1)
• 最近の記事を表示する[WordPressテーマ作成#10] (0)
• 最近のコメントを表示する[WordPressテーマ作成#11] (1)
• 必要なテンプレートをさらに追加する[WordPressテンプレート作成#9] (0)
• ループで記事を表示する [WordPressテーマ作成 #2] (0)