wp_list_commentsを使ってWordPressのコメント出力をカスタマイズする

ホーム
WordPress
wp_list_commentsを使ってWordPressのコメント出力をカスタマイズする

2012.02.2

wp_list_commentsを使ってWordPressのコメント出力をカスタマイズする

WordPressのコメントまわりをちょっと調べてたんですが、コメント一覧を出力するためにはwp_list_commentsを使えば、一覧が表示されます。これに色々とパラメータを渡していくといいみたいですね。ちなみにwp_list_commentsのソースファイルは「wp-includes」→「comment-template.php」に記述されています。今回は表示されるコメント一覧のHTMLをカスタマイズしたい時のやり方の備忘録です。

[ads_center]

コメント一覧のHTMLを編集する場合

一般的にはこんな感じでolまたはulを使ってリスト表示されます。

<ol class="commentlist">
<?php wp_list_comments(); ?>
</ol>

これでコメント一覧が表示されるようになります。で、表示形式を変えたい場合にはwp_list_commentsに色んなパラメータを渡していきます。

<?php $args = array(
    'walker'            => null,
    'max_depth'         => '',
    'style'             => 'ul',
    'callback'          => null,
    'end-callback'      => null,
    'type'              => 'all',
    'page'              => '',
    'per_page'          => '',
    'avatar_size'       => 32,
    'reverse_top_level' => null,
    'reverse_children'  => ''
    );
?>

こんな感じで渡してあげます。

<?php wp_list_comments($args); ?>

別にここまでパラメータを渡さなくても、必要なパラメータだけを直接渡しても大丈夫です。

<?php wp_list_comments('type=comment&callback=mytheme_comment'); ?>

で、この中で管理画面から設定できる項目がいくつかあります。以下、管理画面のどこの項目につながっているのか、試した範囲での説明です。

max_depth

管理画面の「設定」→「ディスカッション」の中の「他のコメント設定」で「コメントを○階層までのスレッド・・・」と書かれた、何階層までスレッド形式にするかを数値で指定できます。例えば5と指定すると5階層まで入れ子にできます。

per_page

「設定」→「ディスカッション」の中にある、「他のコメント設定」という項目から「1ページあたり○件のコメントを含む・・・」と書かれた中の件数を指定した数字が入ります。例えば3と指定すると3件ずつコメントが分割されて表示されます。分割された、「次へ／前へ」と表示される前後のリンクを出力するのにはpaginate_comments_linksというテンプレートタグが必要です。以下のように表示させたい場所に記述します。

<?php paginate_comments_links(); ?>

reverse_top_level

同じく「設定」→「ディスカッション」にある「他のコメントの設定」から「（新しい／古い）コメントを各ページのトップに表示する」の、「新しい」か「古い」かを指定できます。trueにすると「新しい」になり、falseにすると「古い」になります。

ちなみにパラメータで上記の値を指定する場合にはシングルクオーテーションをつけないで指定します。

というか管理画面から選べるんだったら、わざわざこんなところ弄んなくてもそっちから操作した方がいいっすよね。

callbackを指定する

で、ずらずらコメントの一覧が表示されていると仮定して、その出力されているHTMLなんかをカスタマイズしたいって思った時にすることがcallbackで指定する独自関数です。

これをfunctions.phpに作成して、パラメータのcallbackにその関数名を指定すればそれが読み込まれるみたいです。

function mytheme_comment($comment, $args, $depth) {
   $GLOBALS['comment'] = $comment; ?>
   <li <?php comment_class(); ?> id="li-comment-<?php comment_ID(); ?>">
     <div id="comment-<?php comment_ID(); ?>">
      <div class="comment-author vcard">
         <?php echo get_avatar($comment,$size='48',$default='<path_to_url>' ); ?>

         <?php printf(__('<cite class="fn">%s</cite> <span class="says">says:</span>'), get_comment_author_link()) ?>
      </div>
      <?php if ($comment->comment_approved == '0') : ?>
         <em><?php _e('Your comment is awaiting moderation.') ?></em>
         <br />
      <?php endif; ?>

      <div class="comment-meta commentmetadata"><a href="<?php echo htmlspecialchars( get_comment_link( $comment->comment_ID ) ) ?>"><?php printf(__('%1$s at %2$s'), get_comment_date(),  get_comment_time()) ?></a><?php edit_comment_link(__('(Edit)'),'  ','') ?></div>

      <?php comment_text() ?>

      <div class="reply">
         <?php comment_reply_link(array_merge( $args, array('depth' => $depth, 'max_depth' => $args['max_depth']))) ?>
      </div>
     </div>
<?php
        }

最後に色々と設定したパラメータをwp_list_commentsに渡せばOKです。