1. Trang chủ
  2. » Công Nghệ Thông Tin

Tìm Hiểu về Wordpress - part 26 docx

10 258 0
Tài liệu đã được kiểm tra trùng lặp

Đang tải... (xem toàn văn)

THÔNG TIN TÀI LIỆU

Thông tin cơ bản

Định dạng
Số trang 10
Dung lượng 1,05 MB

Các công cụ chuyển đổi và chỉnh sửa cho tài liệu này

Nội dung

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 1

Custom 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 2

and 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 3

Mr 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&#039;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 5

Then, 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 6

Notice 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 7

7.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 8

HEADS 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 9

content 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 10

responding 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

Ngày đăng: 04/07/2014, 21:20

w