WordPressのコメント内部デザインをWalkerクラスを使って変更する方法
Jun 26, 2015
AD:
wp_list_commentsでulなどを変更できたりしますが、コメント内部のデザインを変更ができません。
なので、wp_list_commentsのWalker_Commentをオーバーライドしてデザインを変更します。
下記のようにcomments.phpなどに書いてあるwp_list_commentsにwalkerにfunctions.phpに書いたクラスを渡します。
|
1 2 3 4 5 6 7 8 9 |
<?php wp_list_comments( array( 'walker' => new custom_walker_comment, 'style' => 'ul', 'callback' => null, 'end-callback' => null, 'type' => 'all', 'page' => null, 'avatar_size' => 32 ) ); ?> |
次にfunctions.phpの下記のようなWalker_Commentを継承したクラスを作成します。
ちなみに、下記の内容はFirst Name+Last Nameを表示しているのと、htmlを変更しております。
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 50 51 |
class custom_walker_comment extends Walker_Comment { var $tree_type = 'comment'; var $db_fields = array( 'parent' => 'comment_parent', 'id' => 'comment_ID' ); function __construct() { echo '<ul id="comment-list">'; } function start_lvl( &$output, $depth = 0, $args = array() ) { $GLOBALS['comment_depth'] = $depth + 1; echo '<ul class="children">'; } function end_lvl( &$output, $depth = 0, $args = array() ) { $GLOBALS['comment_depth'] = $depth + 1; echo '</ul><!-- /.children -->'; } /** START_EL */ function start_el( &$output, $comment, $depth, $args, $id = 0 ) { $depth++; $GLOBALS['comment_depth'] = $depth; $GLOBALS['comment'] = $comment; $parent_class = ( empty( $args['has_children'] ) ? '' : 'parent' ); ?> <section class="mb-md"> <h1><?php echo get_the_title($comment->comment_post_ID);?></h1> <p class="mt-sm"><small>By <?php $comment_user = get_userdata($comment->user_id); echo $comment_user->first_name." ".$comment_user->last_name;?></small></p> <p class="mt-sm"> <?php if( !$comment->comment_approved ) : ?><em class="comment-awaiting-moderation">Your comment is awaiting moderation.</em> <?php else: comment_text(); endif; ?> </p> <p><time><?php comment_date(); ?></time></p> </section> <?php } function end_el(&$output, $comment, $depth = 0, $args = array() ) { echo '</li><!-- /#comment-' . get_comment_ID() . ' -->'; } function __destruct() { echo '</ul><!-- /#comment-list -->'; } } |
Twitter:
Warning: Undefined array key "Twitter" in /home/sazaeau/mizoshiri.com/public_html/blog.mizoshiri.com/wp-content/plugins/sns-count-cache/sns-count-cache.php on line 2897
0 | Facebook: 0 | Google Plus:
Warning: Undefined array key "Google+" in /home/sazaeau/mizoshiri.com/public_html/blog.mizoshiri.com/wp-content/plugins/sns-count-cache/sns-count-cache.php on line 2897
0 | Hatena: 0 | Pocket: 1 | Total: 1 | Feedly: 0
Ayumi Mizoshiri
