Use Bootstrap media object for listing comments

http://twitter.github.com/bootstrap/components.html#media

- Introduce lib/comments.php: contains Roots_Walker_Comment

- Update templates/comments.php to use the new walker, general
clean up
This commit is contained in:
Ben Word
2013-02-11 23:50:49 -06:00
parent 90138a4646
commit cf4ab3b2df
3 changed files with 94 additions and 59 deletions

View File

@@ -2,66 +2,33 @@
if (post_password_required()) {
return;
}
?>
<?php function roots_comment($comment, $args, $depth) {
$GLOBALS['comment'] = $comment; ?>
<li <?php comment_class(); ?>>
<article class="comment-<?php comment_ID(); ?>">
<header class="comment-author vcard">
<?php echo get_avatar($comment, $size = '32'); ?>
<?php printf(__('<cite class="fn">%s</cite>', 'roots'), get_comment_author_link()); ?>
<time datetime="<?php echo comment_date('c'); ?>"><a href="<?php echo htmlspecialchars(get_comment_link($comment->comment_ID)); ?>"><?php printf(__('%1$s', 'roots'), get_comment_date(), get_comment_time()); ?></a></time>
<?php edit_comment_link(__('(Edit)', 'roots'), '', ''); ?>
</header>
<?php if ($comment->comment_approved == '0') : ?>
<div class="alert alert-block fade in">
<a class="close" data-dismiss="alert">&times;</a>
<p><?php _e('Your comment is awaiting moderation.', 'roots'); ?></p>
</div>
<?php endif; ?>
<section class="comment">
<?php comment_text(); ?>
</section>
<?php comment_reply_link(array_merge($args, array('depth' => $depth, 'max_depth' => $args['max_depth']))); ?>
</article>
<?php } ?>
<?php if (have_comments()) : ?>
if (have_comments()) : ?>
<section id="comments">
<h3><?php printf(_n('One Response to &ldquo;%2$s&rdquo;', '%1$s Responses to &ldquo;%2$s&rdquo;', get_comments_number(), 'roots'), number_format_i18n(get_comments_number()), get_the_title()); ?></h3>
<ol class="commentlist">
<?php wp_list_comments(array('callback' => 'roots_comment')); ?>
<ol class="media-list">
<?php wp_list_comments(array('walker' => new Roots_Walker_Comment)); ?>
</ol>
<?php if (get_comment_pages_count() > 1 && get_option('page_comments')) : // are there comments to navigate through ?>
<nav>
<ul class="pager">
<?php if (get_previous_comments_link()) : ?>
<li class="previous"><?php previous_comments_link(__('&larr; Older comments', 'roots')); ?></li>
<?php else: ?>
<li class="previous disabled"><a><?php _e('&larr; Older comments', 'roots'); ?></a></li>
<?php endif; ?>
<?php if (get_next_comments_link()) : ?>
<li class="next"><?php next_comments_link(__('Newer comments &rarr;', 'roots')); ?></li>
<?php else: ?>
<li class="next disabled"><a><?php _e('Newer comments &rarr;', 'roots'); ?></a></li>
<?php endif; ?>
</ul>
</nav>
<?php endif; // check for comment navigation ?>
<?php if (get_comment_pages_count() > 1 && get_option('page_comments')) : ?>
<nav>
<ul class="pager">
<?php if (get_previous_comments_link()) : ?>
<li class="previous"><?php previous_comments_link(__('&larr; Older comments', 'roots')); ?></li>
<?php endif; ?>
<?php if (get_next_comments_link()) : ?>
<li class="next"><?php next_comments_link(__('Newer comments &rarr;', 'roots')); ?></li>
<?php endif; ?>
</ul>
</nav>
<?php endif; ?>
<?php if (!comments_open() && !is_page() && post_type_supports(get_post_type(), 'comments')) : ?>
<div class="alert alert-block fade in">
<a class="close" data-dismiss="alert">&times;</a>
<p><?php _e('Comments are closed.', 'roots'); ?></p>
</div>
<div class="alert alert-block fade in">
<a class="close" data-dismiss="alert">&times;</a>
<p><?php _e('Comments are closed.', 'roots'); ?></p>
</div>
<?php endif; ?>
</section><!-- /#comments -->
<?php endif; ?>
@@ -84,21 +51,24 @@
<?php else : ?>
<form action="<?php echo get_option('siteurl'); ?>/wp-comments-post.php" method="post" id="commentform">
<?php if (is_user_logged_in()) : ?>
<p><?php printf(__('Logged in as <a href="%s/wp-admin/profile.php">%s</a>.', 'roots'), get_option('siteurl'), $user_identity); ?> <a href="<?php echo wp_logout_url(get_permalink()); ?>" title="<?php __('Log out of this account', 'roots'); ?>"><?php _e('Log out &raquo;', 'roots'); ?></a></p>
<p>
<?php printf(__('Logged in as <a href="%s/wp-admin/profile.php">%s</a>.', 'roots'), get_option('siteurl'), $user_identity); ?>
<a href="<?php echo wp_logout_url(get_permalink()); ?>" title="<?php __('Log out of this account', 'roots'); ?>"><?php _e('Log out &raquo;', 'roots'); ?></a>
</p>
<?php else : ?>
<label for="author"><?php _e('Name', 'roots'); if ($req) _e(' (required)', 'roots'); ?></label>
<input type="text" class="text" name="author" id="author" value="<?php echo esc_attr($comment_author); ?>" size="22" tabindex="1" <?php if ($req) echo "aria-required='true'"; ?>>
<input type="text" class="text" name="author" id="author" value="<?php echo esc_attr($comment_author); ?>" size="22" <?php if ($req) echo 'aria-required="true"'; ?>>
<label for="email"><?php _e('Email (will not be published)', 'roots'); if ($req) _e(' (required)', 'roots'); ?></label>
<input type="email" class="text" name="email" id="email" value="<?php echo esc_attr($comment_author_email); ?>" size="22" tabindex="2" <?php if ($req) echo "aria-required='true'"; ?>>
<input type="email" class="text" name="email" id="email" value="<?php echo esc_attr($comment_author_email); ?>" size="22" <?php if ($req) echo 'aria-required="true"'; ?>>
<label for="url"><?php _e('Website', 'roots'); ?></label>
<input type="url" class="text" name="url" id="url" value="<?php echo esc_attr($comment_author_url); ?>" size="22" tabindex="3">
<input type="url" class="text" name="url" id="url" value="<?php echo esc_attr($comment_author_url); ?>" size="22">
<?php endif; ?>
<label for="comment"><?php _e('Comment', 'roots'); ?></label>
<textarea name="comment" id="comment" class="input-xlarge" tabindex="4"></textarea>
<p><input name="submit" class="btn btn-primary" type="submit" id="submit" tabindex="5" value="<?php _e('Submit Comment', 'roots'); ?>"></p>
<textarea name="comment" id="comment" class="input-xlarge" rows="5" aria-required="true"></textarea>
<p><input name="submit" class="btn btn-primary" type="submit" id="submit" value="<?php _e('Submit Comment', 'roots'); ?>"></p>
<?php comment_id_fields(); ?>
<?php do_action('comment_form', $post->ID); ?>
</form>
<?php endif; // if registration required and not logged in ?>
<?php endif; ?>
</section><!-- /#respond -->
<?php endif; ?>