KH-WEBLOG TOP > WEBメモ > WordPress > コメントリストのカスタマイズ:WordPress

コメントリストのカスタマイズ:WordPress

WordPressでコメントされたときにそのコメントを表示させるコメントリストの表示カスタマイズの方法をメモ。

WordPressでコメントリストを表示する際はwp list comments();を使います。
表示させたい部分に

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

こんな感じ。

このままでも一応表示はされるのですが、出力されるソースをカスタマイズしたい場合、
まず、functions.php内に、

<?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, 48 );//アバター画像の表示:48はサイズ ?>
	</div>

<div class="comment-listCon">
	<div class="comment-name">
         <?php printf(__('<cite class="fn">%s</cite> <span class="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>
</div>
<?php
        }
?>

のように記述し、コメントリストで出力されるソースを作ります。

あとはcomments.php内の表示させたい部分に

<ul class="commentlist">
<?php wp_list_comments('type=comment&callback=mytheme_comment'); ?>
</ul>

のようにcallbackを使い先程functions.phpに定義したmytheme_commentを呼び出せばOK。

細かい部分に関しては
WordPress Codex 日本語版
を参考にしていただければと思います。

TAGS

.htaccess ActionScript All in one seo pack Contact Form 7 CSS CSS3 EC-CUBE Flash HTML HTML5 JavaScript jQuery LightBox PHP SEO WordPress アイキャッチ画像 アクセス解析 カテゴリー カラーミーショップ カート コメント ショートコード ソースコード タグ テンプレートタグ ドロップダウンメニュー パーマリンク ビジュアルエディタ フォーム フルスクリーン プラグイン ページテンプレート ページナビ ページ分割 マウスイベント リダイレクト リンク レンタルサーバー ロールオーバー 携帯サイト 条件分岐 正規表現 角丸 関連記事