The old foreach loop method still works, but you will need a plugin for threaded and/or paged comments.. As you can see, the default output for the new comments loop via the wp_list_ com
Trang 1Custom loop
• Full control, not as easy to implement
• Standardized and/or custom CSS classes for just about anything
• Plugin support for extra functionality like threading and pagination
Which method you decide to use depends on many factors In general, we advise
you to use the wp_list_comments function to display your comments In those cases
where more control over structure, presentation, and functionality is desired,
using a custom loop is certainly going to be easier than wrestling with wp_list_
comments In addition to these two methods, there is also the “old-school” method
of displaying comments: the “foreach” loop, which opens the door to more
possibilities
In the next section of our “Optimizing Comments” chapter, we’ll explore all three
of these comment-display methods and then dig into some juicy techniques for
formatting and enhancing your WordPress Comments Area
7.3.2 Using wp_list_comments() or a Custom Loop?
Before WordPress version 2.7, the comments loop that was used to query
the database and display your comments was a bit convoluted, but also
well-established and well-understood It basically consisted of the following code:
<?php foreach ($comments as $comment) : ?>
<?php comment_author_link(); ?>
<?php comment_text() ?>
<?php endforeach; ?>
Then, in WordPress version 2.7, comments were enhanced with optional threading
and paging features These new features are activated via the WordPress Admin
Trang 2and require the wp_list_comments() template tag to operate Thus, in 2.7 and better, we replace the foreach method with, yep, you guessed it, wp_list_comments:
<?php wp_list_comments(); ?>
Yep, that’s all you need now to take advantage of WordPress’ default, out-of-the-box, comment functionality, which now includes optional comment paging and threading The old foreach loop method still works, but you will need a plugin for threaded and/or paged comments
If you’re thinking that you need to use the old comments loop to fully customize
your comments display, think again You could use the old loop setup, but you
would miss out on all of the cool new features Instead, WordPress makes it possible to create your own customized comments function and call it via the new wp_list_comments() template tag Let’s explore these different comment-display methods and check out the possibilities
The new comments loop
The wp_list_comments function doesn’t actually look like a loop, but it does the same thing as the old foreach loop by cycling through your comments and
generating the required markup Looking at the HTML output of wp_list_comments,
we get something like this:
<ol class="commentlist">
<li class="comment even thread-even depth-1" id="comment-1">
<div id="div-comment-1" class="comment-body">
<div class="comment-author vcard">
<img alt='' src='http://www.gravatar.com/avatar/' class='avatar avatar-32 photo avatar-default' height='32' width='32' />
<cite class="fn">
<a href='http://wordpress.org/' rel='external nofollow' class='url'>
Trang 3Mr WordPress</a></cite> <span class="says">says:</span>
</div>
<div class="comment-meta commentmetadata">
<a
href="http://localhost/283/2009/08/hello-world/comment-page-1/#comment-1">August 13, 2009 at 3:08 pm</a>
</div>
<p>Hi, this is a comment.<br />To delete a comment, just log in and view
the post's comments There you will have the option to edit or delete
them.</p>
<div class="reply"></div>
</div>
</li>
</ol>
As you can see, the default output for the new comments loop (via the wp_list_
comments tag), is an ordered list that contains a gravatar image, several divs, lots of
variable classes, author links, and the comment itself If this fits your theme’s design
and functionality, then you are good to go Nothing could be easier, and the host
of included classes and markup elements should be sufficient to get things looking
exactly how you want them
With the wp_list_comments method of displaying your comments, you have control
over the following parameters:
• avatar_size - an integer specifying the size, in pixels, of your gravatars The
default is 32
• style - a string specifying the type of markup used for your comments May be
either “div”, “ol”, or “ul” The default is “ul”, an unordered list Note that you
will still need to wrap your comments list with your markup element of choice
So, for example, if you are using an ordered list instead of an unordered list,
you would need to include the enclosing ”<ol>” tags like so:
Trang 4<ol class="commentlist">
<?php wp_list_comments(array('style' => 'ol')); ?>
</ol>
• type - a string that specifies the type of comments to display Either “all”,
“comment”, “trackback”, “pingback”, or “pings” “pings” is both “trackback” and
“pingback” together The default is “all”
• reply_text - text string specifying the text to display for the comment reply
link Default is “Reply”
• login_text - text to display when registration is required to comment Default
is “Log in to Reply”
• callback - a string specifying the name of a custom function for your comments
display Specifying your own function enables you to fashion your own comment-display loop Defaults to null
• Additional parameters may be available, see the codex: http://digwp.com/u/35 That’s quite a bit of control, but more customization may be necessary If you need more control over how your comments are displayed, you will need to tap into the comment loop itself, which may be included directly in the comments.php file
or tucked away neatly into your functions.php file In the next section, we’ll look
at how to include a custom comments loop via the functions.php file, then we’ll remind you how to do it old-school with the classic foreach comments loop
Utilizing a custom comments loop via functions.php
First, open your comments.php file and add the following code:
<ul class="commentlist">
<?php wp_list_comments('type=comment&callback=mytheme_comment'); ?>
</ul>
Trang 5Then, open your functions.php file and add the custom comments function:
<?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>
<?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
}
Trang 6Notice that we are not closing the <li> element
WordPress automatically generates the closing </li> depending on the markup generated for any nested comments
Once in place, the code placed into your comments.php file will call your custom comments-loop from your functions.php file and output the contents to the page This code may look like a lot, but it is easily chopped up and customized to suit your needs
The point here is that it is possible to get behind the scenes and legitimately customize your comments loop using the new wp_list_comments() template tag
Going “old-school” with the original comments loop
This makes it even easier to customize your comments display, but threaded comments and pagination are not possible without a plugin Simply replace the wp_ list_comments tag with the following foreach comments loop and customize with whatever markup and template tags you wish:
<?php foreach ($comments as $comment) : ?>
<?php comment_author_link(); ?>
<?php comment_text() ?>
<?php endforeach; ?>
And that’s all there is to it
Now that we know how to customize our comment loop, let’s dig in, have some fun, and explore some super-awesome tips and tricks for our WordPress
comment areas
Backwards-Compatible
Comment Display
If you want your theme to be backwards-compatible,
just check for the presence of the wp_list_comments()
function in your comments.php file:
<?php if (function_exists('wp_list_comments')) : ?>
<?php wp_list_comments(); ?>
<?php else : ?>
<?php foreach ($comments as $comment) : ?>
<?php comment_author_link(); ?>
<?php comment_text() ?>
<?php endforeach; ?>
<?php endif; ?>
Trang 77.3.3 Implementing Paged Comments
You just never know when you have some content on your site that will explode
and attract hundreds of comments What am I talking about? You guys are stars,
I’m sure that’s going to happen to you all the time! A Post with hundreds of
comments can have pretty crazy vertical scroll going on In general, we aren’t
afraid of vertical scroll on the web (unlike that nasty horizontal scroll), but there
are limits to anything A recent post on CSS-Tricks with 62 comments netted 17,827
pixels in height!
An excellent way to handle posts that receive millions of responses is to break the
comment thread into sections and display it across multiple pages This “Paged
Comments” feature was introduced in WordPress 2.7 and is extremely easy to
implement Go to Settings > Discussion in the Admin area to enable it:
And then in your comments.php file, insert these two template tags wherever you
would like the “Next” and “Previous” pagination buttons to appear:
<?php previous_comments_link(); ?>
<?php next_comments_link(); ?>
That set of tags will output the next/previous links for your comments area,
automatically appearing only when there is more than one page of comments If
there is only one page of comments, no links are displayed
Trang 8HEADS UP: There are some potential duplicate-content issues (an SEO problem)
with paged comments This is because there are multiple unique URLs generated for each page of comments Each of these URLs contains the exact same content as the original post For example:
http://yoursite.com/ghost-dad-rocked/
http://yoursite.com/ghost-dad-rocked/comments-page-1/
http://yoursite.com/ghost-dad-rocked/comments-page-2/
http://yoursite.com/ghost-dad-rocked/comments-page-3/
Content-wise, the only difference between these three pages is the comments To make matters worse, each of the comments has a datestamp that is a permalink
to that particular comment, which uses the paginated URL in the link So when a search bot wanders through, they’ll see lots and lots of links to the “ /comments-page-1/” version of your post – most likely many more links are pointing to the comment pages than the actual post URL
To prevent this duplicate content issue from happening, there are several possible solutions:
• Don’t use paged comments and party like it’s 2007
• Use meta tags to specify the canonical URL for each post
• Install the SEO for Paged Comments plugin – http://digwp.com/u/36
If your site is super-popular, or is getting to be that way, it is probably a good idea
to set some upper-limit for the number of comments that appear on a page and use a plugin to set the canonical URL for the post
If the number of comments for each post on your site is minimal, the easiest thing
to do is simply forego the paged comments and go “traditional” with each post including all of its comments on the same page
To actually change the way WordPress generates the comment pages, the SEO for Paged Comments plugin eliminates duplicate content by replacing your post
Canonical URLs
In 2009, the major search
engines adopted support for
canonical meta tags These
tags enable you to specify a
single, definitive URL for your
web pages, and thereby avoid
any duplicate content issues
Here is an example of usage:
<link rel="canonical"
href="http://domain.tld/
canonical/url/" />
For more information on the
use of canonical meta tags for
WordPress, see Chapter 8.2.5.
Trang 9content with excerpts on all comment pages other than the post page itself I use
this plugin on several of my sites and it works beautifully
7.3.4 Implementing Threaded Comments
Threaded comments enable people to write a comment that is a direct response to
an already existing comment, creating a more conversational flow to a comment
thread This approach is almost always ideal, assuming the design of your site can
support it Implementing threaded comments begins by enabling the option in the
WordPress Admin:
Assuming your theme supports threaded comments, activating this option in the
Admin will endow each of your comments with a “Reply” link that enables visitors
to reply directly to any comment on your post
Before the implementation of threaded comments in WordPress 2.7, any direct
replies to a comment required use of the infamous “@” symbol, as in
“@comment-author: blah blah blah.” Although this method of replying has become quite
common around the Web, it is no longer necessary on sites running WordPress
version 2.7 or better
Now, instead of “@ing” someone to address a previous comment, you can
simply click on the “Reply” link next to the comment itself Once submitted,
your comment will be displayed directly under the comment to which you were
Trang 10responding This functionality makes it possible for each comment to be the start of a new, tangential discussion, and greatly increases the usability of your comments area
If your theme does not provide threaded-comments functionality, here is an easy way to implement them within your comments.php file:
1 Backup your files, as usual (just in case you need to restore original files).
2 In the WordPress Admin, check the “Enable Threaded (nested) Comments” in
the Settings > Discussion page Also specify how many “levels deep” you would
like to nest your comments
3 Add the following code to your header.php file, directly above the wp_head() template tag:
<?php if (is_singular() AND comments_open() AND (get_option('thread_
comments') == 1)) wp_enqueue_script('comment-reply'); ?>
4 Add the following parameter to just before the closing “</form>” tag of your theme’s comment form:
<?php comment_id_fields(); ?>
5 Make sure that the <textarea> of your theme includes an attribute of id="comment"
6 Make sure that your entire comment form is enclosed within a <div> with an attribute of id="respond"
7 Add a “cancel-comment” link just above your comment form:
<div><?php cancel_comment_reply_link(); ?></div>
8 In your comments.php file, replace the old loop with the new hotness:
<?php if (have_comments()) : ?>
<ol class="commentlist">
<?php wp_list_comments(); ?>
Starter CSS
There are a lot of classes
in the HTML of threaded
comments that you need to
account for in CSS to make
the comments actually look
properly threaded It's often
easiest to start with a base set
of styles and adjust as needed.
http://digwp.com/u/468