If your theme does not include such functionality, open your comments.php file and follow one of the following tutorials, depending on your comment-loop configuration: For single comment
Trang 1Because global numbering would appear as shown in the left screenshot, and local
numbering would appear as shown in the right screenshot:
Ahh, yes Much better A good rule of thumb is to keep our comments numbered
locally in the comment display area, and numbered globally in the source code
Indeed, implementing locally numbered comments is straightforward If your
theme does not include such functionality, open your comments.php file and follow
one of the following tutorials, depending on your comment-loop configuration:
For single comments loop (i.e., no separation of comments and ping/trackbacks)
Global Comment Numbering
is nice in that every single comment has
a unique code and link, but doesn’t make
much sense in this visual context.
Local Comment Numbering
makes more sense in the context of a conversation, and the links are still unique.
Trang 22 Then, within the comment loop, add the following line to the location where
you would like to display each comment’s number:
<p class="comment-count"><a href="#comment-<?php comment_ID(); ?>">#<?php echo $commentcount++; ?></a></p>
For double comments loop (i.e., separation of comments and ping/trackbacks)
1 In your comments.php file, add the following line above your comment loop:
<?php $commentcount = 1; // number of first comment ?>
<?php $pingbackcount = 1; // number of first pingback ?>
2 Then, within the loop that displays comments, add the following line:
<p class="comment-count"><a href="#comment-<?php comment_ID(); ?>">#<?php echo $commentcount++; ?></a></p>
3 Finally, within the loop that displays ping/trackbacks, add the following line:
<p class="pingback-count"><a href="#comment-<?php comment_ID(); ?>">#<?php echo $pingbackcount++; ?></a></p>
And that’s all there is to it Notice that we have also implemented global comment numbers within this method Thus, once in place, this code will display a link for each comment that shows local comment numbers on the web page and global comment numbers in the source code Nice
Once your comments are numbered locally, you can enjoy the best of both worlds
by including something like this along with the display of each comment:
<a href="<?php the_permalink(); ?>#comment-<?php comment_ID(); ?>"
id="comment-<?php comment_ID(); ?>" title="Permalink for comment #<?php echo $comment_count; ?>">Comment #<?php echo $comment_count; ?></a>
Trang 3Once in place, this code will output the following information on the web page:
…and the following markup in the source code:
Count Comments Only
To display the number of comments only, place the following
code into your functions.php file:
function countComments($count) {
What we’re doing here is filtering WordPress’ comments_number
function to output only the number of comments Normally
the function counts all comments, pingbacks, and trackbacks, but with this function in place, only comments will be counted
Trang 47.4.3 Alternating Comment Styles
Another way to improve the usability and overall stylishness
of your comments-display area is to alternate the appearance
of every other comment, as seen in the left-hand screenshot of Stephen Cronin’s site, scratch99.com
Depending on your particular theme design, this method of distinguishing between odd and even comments may greatly facilitate comment readability on your site, thereby making it easier for readers to follow the conversation and perhaps feel motivated to participate
The process of styling alternating comments differently
involves determining which comments are oddly numbered and which are evenly numbered In WordPress 2.7 and better,
comments automagically include “odd” and “even” classes for odd- and even-numbered comments, respectively This makes
it a snap to implement your own custom CSS styles for each of these classes Perhaps something like this:
.odd { background: white;
color: black;
} even { background: black;
color: white;
}
Well, maybe not that extreme, but you get the idea :)
Take it Easy…
Just because you can pimp out some serious alternating comment styles doesn’t give you license to go crazy
In this screenshot (at left) from scratch99.com, Stephen Cronin alternates comment styles in subtle fashion, letting the content speak for itself.
Trang 57.4.4 Custom Styles for Authors
and Members
Similar to the technique of styling alternate comments is the fine art
of styling unique author and member comments As with alternating
comment styles, unique author and registered-member styles is a
great way to improve readability, usability, and all-around sleekness of
your WordPress comments area And the good news is that WordPress
2.7 automagically includes CSS classes for both types of comments
For the author of the blog post, WordPress includes a class named
“bypostauthor” For registered users who are logged in to your site, a
class named “byuser” is included in that user’s comments These classes
enable you to easily apply custom CSS styles to these types
of comments
For older versions of WordPress, some additional code is required to
implement custom styles for authors The following code will check the
comment author to see if it is the same as the post author If it is, a CSS
class named “comment-author” will be source code output Thus, place
the following code into the HTML element of your choice:
<?php if ($comment->user_id == $post->post_author) { echo '
class="comment-author"'; } ?>
Using a basic comments loop, here is how we could use this code:
<?php foreach ($comments as $comment) : ?>
<div<?php if ($comment->user_id == $post->post_author) {
echo ' class="comment-author"'; } ?>>
Trang 6Once in place, this code will enable you to apply CSS styles such as the following:
.comment-author { font-weight: bold;
color: red;
}
The cool thing about this snippet is that it will output the “comment-author”
class for any post author on your site Unfortunately, because the CSS class is the
same for all post authors, it is not possible to style author comments differently according to specific authors
Fortunately, there is always more than one way to get things done with WordPress Here is an alternate “author-highlight” method that will enable you to target specific post authors directly:
<?php if ($comment->comment_author_email == "chris@digwp.com") echo 'class="author-chris"'; ?>
With that snippet in place, any comment left specifically by Chris may be styled by
an echoed CSS class named “author-chris” Likewise, to output unique class names for multiple authors, we can use something like this:
<?php if ($comment->comment_author_email == "chris@digwp.com") echo 'class="author-chris"'; elseif ($comment->comment_author_email == "jeff@ digwp.com") echo 'class="author-jeff"'; ?>
By adding additional “elseif()” statements, we may target as many specific authors as needed
Trang 77.4.5 Styling Comments with Gravatars
As many of you know, gravatars are globally recognized avatars that appear next
to your comments and other content on supportive sites around the Web So
instead of just leaving your name and website, you can show a thumbnail-size
image of yourself to help improve branding and site-promotion
To get your own Gravatar, simply go to the free signup page at the Gravatar
website http://digwp.com/u/190 and provide the required information, which is
basically just a valid email address After signing up, you get to upload your own
image and customize your profile Within moments, your new gravatar will begin
to appear on gravatar-enabled websites
To display gravatars on your WordPress site, log in to your Admin area and visit the
Settings > Discussion page There, you will be able to specify your preferences for
the following:
• Whether or not you want to display gravatars
• Acceptable rating of your displayed gravatars
• The default gravatar that will be displayed
Once you have set these options, click save and open your theme’s comments.php
file In the location where you want the gravatars to display, add the following line
to your comments loop:
<?php if(function_exists('get_avatar')) { echo get_avatar($comment, $size =
'50', $default = 'http://domain.tld/default.png'); } ?>
Then, specify the size of the gravatar, which may be anything up to 96 pixels
(square), and also the default image to use in case the user does not have a
Twitter Avatars
You can also display Twitter avatars with comments by grabbing the free script at:
http://digwp.com/u/191
Add the script to your functions.php file and display the avatars in your theme like so:
<?php twittar('50', 'http://digwp.com/path/ default.png', '#ffffff', 'twitavatars', 1, 'G'); ?>
Trang 8<img alt="" src="http://domain.tld/default.png" class="avatar avatar-50 avatar-default" height="50" width="50" />
You may then customize the image with additional markup, CSS styles, or whatever
you wish It’s that easy – if you are using WordPress 2.5 or better If you are using
an older version of WordPress, you may use the same code as above, but you will need to either install a gravatar plugin or else include the required code manually Here are a couple of the best gravatar plugins:
• Gravatars2 - http://digwp.com/u/192
• WP-Gravatar - http://digwp.com/u/193
To get gravatars working on older versions of WordPress, you may also skip the plugin and code it yourself Open your theme’s comments.php file and add the following to the location where you would like the gravatars to appear within the comments loop:
<?php // gravatars for WordPress < 2.5
$gravatar_size = "50";
$gravatar_default = "http://domain.tld/default.png";
$gravatar_email = get_comment_author_email();
$gravatar_url = "http://www.gravatar.com/avatar.php?gravatar_
id=".md5($gravatar_email)."&default=".urlencode($gravatar_
default)."&size=".$gravatar_size;
echo '<img alt="" src="'.$gravatar_url.'" class="gravatar" />';
?>
Before using this code, remember to edit the “$gravatar_size” and “$gravatar_ default” variables with the display size and default image, respectively Once
in place, this code will display a gravatar for each comment author who has a gravatar, or else it will display the specified default image
Trang 9Finally, if you are developing a theme that needs to ensure
backwards-compatibility with older (pre-2.5) versions of WordPress, you may combine the
default, built-in method with the backwards-compatible fallback To do this, we
employ a simple bit of PHP logic, like so:
<?php // backwards-compatible gravatars
if (function_exists('get_avatar')) {
// gravatars for WordPress 2.5 +
echo get_avatar($comment, $size = '50', $default = 'http://domain.tld/
default.png');
} else {
// gravatars for WordPress < 2.5
$gravatar_size = "50";
$gravatar_default = "http://domain.tld/default.png";
$gravatar_email = get_comment_author_email();
$gravatar_url = "http://www.gravatar.com/avatar.php?gravatar_
id=".md5($gravatar_email)."&default=".urlencode($gravatar_
default)."&size=".$gravatar_size;
echo '<img alt="" src="'.$gravatar_url.'" class="gravatar" />';
} ?>
As with the previous two methods, place this code within the comments loop and
you are good to go You will want to edit the “$gravatar_size” and “$gravatar_
default” variables with the display size and default image, respectively
Gravatars in Posts!
Gravatars aren’t only for comments – they also look great when used to display a thumbnail image of the post author All you need to do is include the following code within the post loop of your single.php template file:
<?php $author_email = get_ the_author_email(); echo get_avatar($author_email, '96'); ?>
Trang 107.4.6 Add a "Your comment is awaiting moderation" Message
When moderating comments on your WordPress site, it is very helpful to commentators to let them know if their submitted comment is waiting in the moderation queue By default, WordPress will display moderated comments to their authors but not to other visitors Thus, it may be confusing for someone who leaves a comment and sees it appear in the comment thread, only to watch as it
is completely ignored by everyone else For this reason, including some sort of an
“awaiting moderation” message is extremely important for improving the usability
of your comments area
The good news is that, if you are using the wp_list_comments method to display your comments, you don’t need to do anything – a comment moderation message
is already built-in If you are using a custom loop via functions.php, simply add the following snippet of code to your function:
<?php if ($comment->comment_approved == '0') : ?>
<p class="moderation">Your comment is awaiting moderation.</p>
<?php endif; ?>
And, if you are using the old-school foreach comments loop, adding a comment-moderation message is just as simple:
1 Locate the comments loop, which should open and close with the
following code:
<?php foreach ($comments as $comment) : ?>
<! this is the comments loop! >
<?php endforeach; ?>
2 Within the comments loop, add the following code:
<?php if ($comment->comment_approved == '0') : ?>
<p class="moderation">Your comment is awaiting moderation.</p>
<?php endif; ?>
Forget?
For more information on using
either a custom loop or the
wp_list_comments method of
displaying comments, check out
section 7.3.2 in this chapter.