ゆるくはじめるWordPress.

テーマにコメント欄&コメントフォームを設置する

comments-top

テンプレートタグを使ってコメント表示欄とコメントフォームを設置する方法をまとめました。コメントフォームのちょっとしたカスタマイズのやり方も載せてるので、自作テーマにコメント欄を付け足したいなという時の参考になればと思います。

comments.phpを用意する

テキストエディタでコメント用のテンプレートファイルcomments.phpを作ります。それをテーマファイルにアップロード。この中にコメント表示欄とコメントフォームを作ります。


コメント表示欄を設置する

投稿されたコメントを表示するwp_list_comments()タグを使ってコメント表示させます。

comments.php

<?php if(have_comments()): ?>
  <ol class="comments">
    <?php  wp_list_comments(); ?>
  </ol>
<?php endif; ?>

ifを使ってコメントがある時にだけコメント欄が表示されるようにしました。
リスト形式で出力されるので<ul><ol>で囲ったりして、CSSで見た目を整えます。デフォルトでは下のような感じ。

コメント欄

アバター表示が不要な場合は設定>ディスカッションの中の『アバターの表示』のチェックを外せばOK。

アバター設定画面

コメント欄用のページャーを設置する

コメントが増えてコメントが複数ページに渡る場合にページャーが表示されるようにします。

comments.php

<?php if(get_comment_pages_count() > 1) : ?>
  <div>
    <span><?php previous_comments_link('前のコメント'); ?></span>
    <span><?php next_comments_link('次のコメント'); ?></span>
  </div>
<?php endif; ?>

get_comment_pages_count()はコメントのページ数を取得する関数。これが1より大きくなった時にページャーが表示されるようになってます。クラスを付けたりしてCSSで見た目を整えます。
1ページにいくつコメントを表示するかは設定>ディスカッションの『他のコメント設定』で設定してください。

ディスカッション設定画面

コメントフォームを設置する

コメントフォームはcomment_form()タグで設置することができます。

<?php comment_form(); ?>

クラスやID付きで出力されるので、それを利用して見た目を整えたりもできます。デフォルトでちょっと見た目を触ると下のような感じ。

コメントフォームデフォルト

コメントフォームをカスタマイズ

これを少しだけカスタマイズして表示の仕方を変えてみたいと思います。

  • 見出しの『コメントを残す』の文字を変更
  • テキストエリアの前の『コメント』を削除
  • 『ウェブサイト』の欄を丸ごと削除
  • 送信ボタンの『コメントを送信』の文字を変更

Codexに『デフォルト $args 配列』が載っているので、それを参考にやってみました。

関数リファレンス/comment form – WordPress Codex 日本語版

comments.php

<?php
$commenter = wp_get_current_commenter();
$req = get_option( 'require_name_email' );
$aria_req = ( $req ? " aria-required='true'" : '' );
$comments_args = array(
  'title_reply' => 'Leave a Comment',
  'label_submit' => 'コメントする',
  'comment_field' => '<p class="comment-form-comment">' .
    '<textarea id="comment" name="comment" cols="45" rows="8" aria-required="true">' .
    '</textarea></p>',
  'fields' => array(
    'author' => '<p class="comment-form-author">' . '<label for="author">' . __( 'Name' ) . ( $req ? ' <span class="required">*</span><br />' : '' ) . '</label> ' .
	                    '<input id="author" name="author" type="text" value="' . esc_attr( $commenter['comment_author'] ) . '" size="30"' . $aria_req . ' /></p>',
    'email'  => '<p class="comment-form-email"><label for="email">' . __( 'Email' ) . ( $req ? ' <span class="required">*</span><br />' : '' ) . '</label> ' .
	                    '<input id="email" name="email" type="text" value="' . esc_attr(  $commenter['comment_author_email'] ) . '" size="30"' . $aria_req . ' /></p>',
    'url'    => '',
  ),
);
comment_form($comments_args);
?>

これで見た目が下のようになりました。

コメントフォームカスタマイズ後

『ウェブサイト』の欄を丸ごと削除は'url'の中身を全部削除すればOK。

$commenter = wp_get_current_commenter();
$req = get_option( 'require_name_email' );
$aria_req = ( $req ? " aria-required='true'" : '' );

この部分は'fields'の中で使われている変数$commenter$req$aria_reqに値を入れています。これが無いと表面上は普通に動いていてもデバッグモードで見た時にエラーが出てる状態になるので注意。これもCodexに記載してあります。


コメント返信用のスクリプトを追加する

設定>ディスカッションの他のコメント設定の中にコメント欄をスレッド表示に変更する項目があります。

他のコメント設定

ここにチェックを入れるとコメント欄に返信ボタンが付き、クリックするとその場所にコメントフォームが表示されます。

コメントリプライ

この機能を動かすために必要なタグを<head>内に追加します。下のタグを<?php wp_head(); ?>の直前あたりに追加すればOK。

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

comments.phpをインクルードタグで呼び出す

comments.phpが完成したら、single.phpなどコメント欄を設置したい箇所にインクルードタグを入れて呼び出します。

<?php comments_template(); ?>

テストコメントを投稿して動作チェック。ちゃんと動けば完成です!
CSSで見た目を調整したり、functions.phpを使ってもっとゴリゴリカスタマイズしてみたり、好みのコメント欄にしてみてください。


スポンサーリンク

公開日:2016-2-2