読者です 読者をやめる 読者になる 読者になる

残像ブログ

残像だった

WordPressのdefaultテーマを改造してコメント欄を作る:後編(コメント一覧のカスタマイズ)

前編:WordPressのdefaultテーマを改造してコメント欄を作る:前編(準備と入力欄) - 残像ブログ

前編で改造したcomments.phpで、コメント一覧の出力をしていたwp_list_comments()の改造を行う

wp_list_comments()について

wp_list_comments()はデフォルトのままだと下記のようなHTMLを生成する。
このHTMLはwp-includes/comment-template.phpのWalker_Commentクラスのstart_el()メソッドに記述された内容から出力されている。

<li class="comment even thread-even depth-1" id="comment-2">
<div id="div-comment-2" class="comment-body">
<div class="comment-author vcard">
 <cite class="fn">名前</cite> <span class="says">より:</span>
</div>
<div class="comment-meta commentmetadata">
<a href="http://localhost/blog/memo/246.html/comment-page-1#comment-2">
2011年7月31日 8:36 PM</a>
</div>
<p>コメント本文</p>
<div class="reply">
<a class='comment-reply-link' href='/blog/memo/246.html?replytocom=2#respond' onclick='return addComment.moveForm("div-comment-2", "2", "respond", "246")'>返信</a>
</div>
</div>

このHTMLを図にすると下図のようになる

引数によってliをdivにする('style=div')などの変更はできるが、名前をコメント本文の後に持ってくるなどの変更は引数では指定できないので、細かく変えたい場合はfunctions.phpを使う。

functions.phpに出力コードをコピー

wp_list_comments()の出力内容が記述してあるstart_el()メソッドの最初の方に下記のようなコードがある

if ( !empty($args['callback']) ) {
  call_user_func($args['callback'], $comment, $args, $depth);
  return;
}

wp_list_comments()にcallback関数が設定してあれば、callback関数の方を実行してメソッドを抜ける感じの内容っぽい。
なのでwp_list_comments()の引数にcallback関数を設定して、functions.phpにcallback関数の内容を書きます。

wp_list_comments()にcallback関数を設定

comments.phpのwp_list_comments()の引数を書き換える。関数名は任意に考えてよい。

<?php wp_list_comments('type=comment&callback=関数名'); ?>

functions.phpに関数を作り、start_el()のcallback読み込み以降のコード($GLOBALS['comment'] = $comment;からメソッドの終わりまで)をコピーする。
関数名はwp_list_comments()で指定したものと同じにする。

function 関数名($comment, $args, $depth){
  $GLOBALS['comment'] = $comment;
  extract($args, EXTR_SKIP);
  (略)
  </div>
  <?php endif; ?>
}

callback関数を改造

あとはfunctions.phpにコピーしたコードを好みに合わせて改造すればよい。

投稿者名表示部
<div class="comment-author vcard">
<?php if ($args['avatar_size'] != 0) echo get_avatar( $comment, $args['avatar_size'] ); ?>
<?php printf(__('<cite class="fn">%s</cite> <span class="says">says:</span>'), get_comment_author_link()) ?>
</div>

div内1行目でアバターの処理、2行目で投稿者名を表示している。
「%s」が投稿者名、「says:」の部分は日本語環境だと「より:」にあたる。

承認待ち時表示部
<?php if ($comment->comment_approved == '0') : ?>
<em class="comment-awaiting-moderation"><?php _e('Your comment is awaiting moderation.') ?></em>
<br />
<?php endif; ?>

コメントの承認待ち時に表示される部分。
comment_approvedにはコメントの承認状態が記録されている(DBのwp_commentsテーブルのフィールド)これが"0"だと承認待ち、"1"だと承認済みになる。(参照:データベース構造 - WordPress Codex 日本語版
承認待ちの場合、承認待ちである旨のメッセージ(Your comment is awaiting moderation.)を表示する。

投稿日時表示部
<div class="comment-meta commentmetadata"><a href="<?php echo htmlspecialchars( get_comment_link( $comment->comment_ID ) ) ?>">
<?php /* translators: 1: date, 2: time */
printf( __('%1$s at %2$s'), get_comment_date(),  get_comment_time()) ?></a><?php edit_comment_link(__('(Edit)'),'&nbsp;&nbsp;','' ); ?>
</div>

投稿日時を表示してコメントのパーマリンクをしている。
「%1$s」が投稿日時(get_comment_date())、「%2$s」が投稿時間(get_comment_time())になる。
デフォルトだと「2011年7月31日 11:36 PM」と表示されるが、書式を変更したい場合は各関数の引数に書式を指定する(参照:日付と時刻の書式 - WordPress Codex 日本語版
編集権限がある場合のみedit_comment_link()によりコメント編集リンクが出力される((Edit))