Out of the box, WordPress provides a robust commenting and response system that enables any site to effectively integrate and expediently handle even large volumes of comments, pingbacks
Trang 17.1.1 Optimizing the WordPress
Comments Area
One of the most exciting things about WordPress is its highly flexible commenting
system There is so much that you can do to improve and optimize your site’s
comments area that the subject is worthy of an entire chapter of its own Out
of the box, WordPress provides a robust commenting and response system that
enables any site to effectively integrate and expediently handle even large
volumes of comments, pingbacks, and trackbacks As good as the default comment
system is, however, there is a great deal more that may be done to sharpen the
appearance, functionality, and security of your WordPress-powered comment area
7.1.2 Welcome to the WordPress Comments Area
The heart of the blogosphere is driven by its interactivity Publishing content
with dynamic technologies like WordPress make it easy for millions of people
to express themselves, share news, and produce many other types of content
But the interactivity enabled by WordPress’ powerful commenting and response
system connects users, authors, and machines to similar stories, related posts,
and associated information around the web The WordPress comments area is
powerful, and with the help of some custom techniques, a few plugins, and a bit of
knowledge, is easily transformed into a highly interactive content response system
This is fun, exciting stuff that will do wonders for the usability, likability, and
popularity of your site
Trang 27.1.3 About the WordPress Comment System Whenever you post an article on your site, WordPress makes it possible and even easy for readers to respond to your content in various ways Essentially, there are three different ways for your readers to respond to your post They may either leave a comment directly, set a trackback from an article on their site, or else simply write about your post on their blog As the response process unfolds on your site, there are many different aspects involved Here are the different parts of a typical response area:
7.1.4 Comments, Pingbacks, and Trackbacks
In WordPress, three different comment types are possible The most familiar type
of comment goes like this: a visitor arrives at your site, reads your post, and has something to say about it They find a form, usually located after the article They type in their name, email address, website URL, and then submit their comment That’s just called a “comment,” and it will show up along with any other comments
in your site’s comment area
The second type of comment is called a “pingback,” and is actually more of a response than a comment Let’s say that you write a post about bacon and the Food Network decides to tell their readers about your sizzling article They publish
a post on their site that includes a link to your article so their readers can go there and read about bacon In this scenario, WordPress would detect that incoming link
from the Food Network and reciprocate by automatically posting a link back to the
Food Network site This return link usually displays the title of the linking post as its anchor text
The third type of response that WordPress enables is called a “trackback,” which is also much more of a response than an actual comment To illustrate, let’s say that the Food Network mentions your bacon article but does not actually include a link
to your site If they create a trackback to your post (via the Post Edit screen in the WordPress Admin), your post will link back to the Food Network article Aside from the differing underlying technology, pingbacks and trackbacks function nearly identically The main difference is that an actual link is not required for trackbacks
Overly Confusing
The end result of a pingback
or trackback is the same thing,
a comment on your site linking
to another site that referenced
you The difference is in the
technology of how it works.
Pingbacks
Pingbacks require an actual
link to your post that comes
from some other site They
link to you, and if your theme
is set up for it, your site
automatically links back
to them.
Trackbacks
Trackbacks are very similar
to pingbacks, but don’t require
that the other site actually link
to your post All they need to
do is tell WordPress to send a
trackback to your post via the
Post Edit screen If trackbacks
are enabled on your site, your
post will then link back to the
other site.
Trang 3There is a great deal of fancy technology behind the functionality of pingbacks
and trackbacks, the scope of which is beyond this book What is most important to
know for now is the different types of responses and how they are made:
• Comments - left directly on your site by your visitors
• Pingbacks - a link from one blog post that is returned by another
• Trackbacks - a response (not necessarily a link) from one blog post that is linked
back from another
7.1.5 Anatomy of the WordPress
Comment Area
There are four fields and a button that make up your
garden-variety WordPress comment form: Name, Email,
Website, Comment, and Submit Seems easy enough, but
the HTML markup for such forms is some of the most
verbose and strange HTML imaginable Throw in a host
of special WordPress functions to enhance the comment
form’s functionality, and you have yourself a fairly complex
little chunk of code
The WordPress gods were aware of this complexity, and
have taken steps to make things as easy as possible For
example, all of the code required for the WordPress
comment system is contained within a single theme
template file named “comments.php.” Thus, to enable
comments, we need simply to include this file using the
following template tag:
<?php comments_template(); ?>
That tag will most commonly be found in the “single.php” file, but could also
Comment or Response?
Technically, pingbacks and trackbacks are not comments Yet many sites still lump together all types of responses
as “comments,” as in, “This post has 15 comments.” More accurately, we would say,
“This post has 15 responses.”
Trang 4be included in other types of template files For example, at the CSS-Tricks site, each video screencast is displayed with a custom Page template The regular Page template is used for things like the Contact page and thus doesn’t include comments, but the video screencast template does, because each screencast is open and welcome to viewer feedback
Now that we know where comments are used and how they are included, let’s go through the anatomy of a typical WordPress Comment Area:
A typical comments area should display older comments first Comments left
on a post are essentially a discussion, and discussion only makes sense if displayed in chronological order
Flipping the order and displaying newer comments first has potential uses, however, just make sure the purpose of the comment area isn’t discussion For example, you can fairly easily create a community news section with
a comment area Just turn the label 'name' into 'title', and 'comment' into 'description' and flip the order to display most recent comments first Presto-chango – a user contributed links area, with it’s own RSS feed, since every Page or Post has its own unique comment feed (see Chapter 6.2.4).
• The comment display area, or comment thread, may be configured to display
comments in chronological order (oldest comment displayed first) or in reverse chronological order (newest comment displayed first) via a setting in the Admin
Area (Settings > Discussion).
• Nested comments were integrated into
WordPress version 2.7 and enable your readers to respond directly to specific comments Such comments are then
“nested” within the area beneath the original comment This is the best way to enable true back-and-forth discussions
in comment threads Fortunately, as discussed later in the chapter, WordPress makes it fairly easy
Trang 5Smashing Magazine uses tabs to toggle between
comments and trackbacks/pingbacks.
If you use the standard wp_list_comments function
to display comments, eliminating comment metadata may come down to using display: none; in your CSS file Otherwise, a custom loop is in order.
Gravatars are connected to the author of the comment by their otherwise-hidden email address
In this screenshot, the bottom user does not have a Gravatar, either because they did not enter an email (wasn’t required), or because that email didn’t have
an associated Gravatar To avoid a missing icon, a
default graphic is shown instead Screenshot: sixrevisions.com.
• The comments display area displays three types
of responses: comments, trackbacks, and pingbacks
These may appear together or else segregated into
distinct areas
• Gravatars! These are small icons that are associated
with each comment author By default, WordPress
can be configured to display Gravatars, and can even
assign a random Gravatar for commentators that do
not have them
• Comment metadata includes things such as the
date and time the comment was left, the name and
URL of the commentator, and even the sitewide and/
or local comment number
Trang 6• The comment form is the where the action happens To leave a comment on
your post, readers must fill out admin-specified fields (such as the name and email-address fields) of your comment form
• The “Name” field of your comment form is where a commentator may specify
their name This field is usually “required,” meaning that the comment will not
be processed unless this field contains a value
• The “Email” field of your comment form is where a commentator may specify
their email address This field is usually “required,” meaning that the comment will not be processed unless this field contains a value
• The “URL” field of your comment form is where a commentator may specify
their website address This field is usually “optional” because not everyone has the luxury of having their own website
• The “Comment” field of your comment form is where the commentator writes
the comment This text field is obviously required because there would be nothing to post without it
• The “Submit” button is what the commentator must click in order for the
comment to be processed by the server and ultimately displayed (or not, depending on your comments policy) in the comment thread
The comment form on CSS-Tricks offers some reminders about what people can and can’t do in the comment area.
Trang 7Now that we have reviewed the basics, let’s dive into some great ways to improve
the functionality, usefulness and user-friendliness of your response area
7.2.1 Syndicating WordPress Comments
So you posted something that really has your readers
buzzing – you are getting tons of comments and even
a good number of trackbacks and pingbacks As the
conversation evolves, make it easy for your readers and
commentators to stay current with the response thread
by syndicating the discussion in feed format By default,
WordPress does this automatically by way of variously
formatted comment feeds Many themes provide links to
these built-in feeds for every post on the site
If your theme is not equipped with such links, you may add
them quite easily by using one (or more) of the URL formats
as described in the next couple of sections
7.2.2 WordPress Main Comments Feed
By default, WordPress creates an RSS feed of all the comments on your site
automatically This feed is available at any of the following three URLs:
http://domain.tld/comments/feed/ - Permalink format
http://domain.tld/wp-commentsrss2.php - Default format
http://domain.tld/?feed=commentsrss2 - Query-string format
Why have a feed for all of your comments? That’s a bit like asking why the sky is
blue It’s not obvious, but it’s mostly because WordPress is just trying to be cool and
syndicate the information for anyone who wants to consume it Perhaps you, as the
Feed Formats
For a more in-depth look at the different types of feeds and feed formats provided by WordPress, check out Chapter 6.3.1.
Trang 8site admin, prefer to read new comments on your site via your RSS reader rather than have them come to you via email Perhaps your super-fans want to make sure they keep up on every last comment posted on your site The feed is simply there
to serve any need that may arise Most likely, however, your readers would rather
tune in to conversations on specific posts That’s where post-specific comment feeds
come into play
7.2.3 Post-Specific Comment Feeds Sucking on a firehose of every comment a site generates is usually counterproductive Fortunately WordPress also produces RSS feeds specifically for each Post The URL structure is simple and easy to remember Just append “/feed/” onto the end of any Post’s permalink Here is an example:
• The Post - http://domain.tld/alligator-tacos/
• Post Comment Feed - http://domain.tld/alligator-tacos/feed/
Deliciously simple Such comment feeds make it easy for savvy visitors to subscribe
to the post to stay current with the conversation In fact, many themes include prominent links to their Post Comment Feed for easy access The nice thing about individual post feeds is that they are available to anyone at anytime, even if the subscriber has not commented on the post
Likewise, when using default (non-permalink) URLs, the post-specific comment feeds are available for each post via the following format:
http://domain.tld/?feed=rss2&p=123
…where “p=” references the post ID
A good place to display a feed button or link for your Post Comment Feeds is immediately before or after the comment form of each post By making the comment feed readily available next to the comment form, commentators will be reminded to grab the feed for future updates
Trang 9In addition to providing users a comments feed, you may also want to enable
them to subscribe to comments via email Often, receiving email notification
of new comments is way easier than the process of subscribing (and eventually
unsubscribing) to a new feed Currently, WordPress does not provide this
functionality by default, but until it does you can use Mark Jaquith’s Subscribe to
Comments plugin, which is readily available at http://digwp.com/u/34
The Subscribe to Comments plugin is easily configurable via the
WordPress Admin, and provides a complete set of configurational
options After the plugin is installed, a common place to display
the subscription option is directly beneath each post’s comment
form (see screenshot on this page)
7.3.1 Formatting the Comments Area
To code or not to code? Remember we said earlier how the Comments area can
be a bit complex and the WordPress gods have taken some steps to make it easier
for us? One of the big things we were talking about was a very specific WordPress
function That function is this:
<?php wp_list_comments(); ?>
As a visitor leaving a comment, you have a checkbox giving you the ability to subscribe to subsequent
comments on a post via email.
As an author, you are notified that you are already the author of the post (hence automatically receive new comment notifications) and are also given a link to manage subscriptions for the site.
Trang 10It looks so simple and innocent right there
on the page, doesn’t it? The fact is, wp_list_ comments is a powerhouse of functionality, able
to drastically simplify comment display in your theme This simplicity, however, comes at the cost of flexibility The wp_list_comments function literally creates and spits out all of the required HTML for all of the comments on any Post
Because this function generates all of the HTML automatically, you need to work with what it gives you This can be a problem For a theme designer, having HTML that you can’t get your hands on can be frustrating Don’t like the particular class names that are used? Too bad Don’t want Gravatars? Too bad, you’ll have to hide them with CSS So at this point you’ll have
to decide which route you want to take:
wp_list_comments
• Easy to use out of the box
• Built-in threaded comments
• Built-in comment pagination
• Default CSS classes for many comment properties