2013.04.30
wordpress

WP コメント表示のカスタマイズ

コメント表示部分をカスタマイズしてみたのでその方法を紹介します。

デフォルトでのコメント表示

通常ワードプレスでコメントを表示させる場合、テーマディレクトリ内のcomments.phpファイルに以下を記述します。

comments.php

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

たったこれだけでコメントをリスト表示してくれます。
olulとしてももちろんOK。

そしてデフォルトのものからアレンジできないものかと調べてみました。
wp_list_commentsがどこから呼び出されているのかというと、wp-includesディレクトリの中のcomment-template.phpからとのこと。

comment-template.php内を書きかえればいいのですが、これではWPをアップデートしたときに書き換えられてしまいます。

なんとかテーマ内で変更できればと思い以下の方法で解決しました。

コメントをカスタム表示する方法

comments.phpに以下のように記述。

comments.php

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

mytheme_commentの部分は任意に決めてOK。

functions.phpcomments.phpで指定したcallback関数(ここではmytheme_commentという関数)を定義します。

functions.php

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
        }

HTMLタグやCSSでIDやClassを追加することによってコメント表示部分のカスタマイズが可能です。

カスタマイズの一例

例えば、当サイトのコメント表示ではアバターが表示される部分にピンクの点線の枠を付けてます。

上記でハイライトした6行目がアバター表示についてなので、CSSで追加したクラスをHTMLタグで囲ってます。

functions.php

<div class="writer_icon">         
<?php echo get_avatar($comment,$size='45',$default='<path_to_url>' ); ?>
</div>

style.cssに以下を追加。

style.css

.writer_icon {
border:#EC8E9E 1px dashed;
padding:3px;
width:45px;
height:45px;
float:left;
margin-right:10px;
}

こんな要領でカスタマイズできます。

関連する記事

コメント & トラックバック
  1. テラハ・ファン

    とても役に立ちました。ありがとうございます!


    • Ri-mode

      テラハ・ファンさん
      お役に立てて光栄です。


コメントをどうぞ

技術的なサポート、質問等にはお答えできない場合もございます。
また、現在更新頻度はかなり低めですので、返信できたとしてもかなり遅くなる場合があります。
ご理解くださいませ。


以下のHTMLタグが使えます。
<a href="" title=""> <abbr title=""> <acronym title=""> <b> <blockquote cite=""> <cite> <code> <del datetime=""> <em> <i> <q cite=""> <strike> <strong>

*


おすすめの本
ネットで調べればなんとかなる!という時代ですが、良い本にめぐり合い、基礎をきっちり固めることで応用がきくテクニックを身に着けることができます。もっと上達したい人におすすめの本をいくつかご紹介します。
TO TOP