Implementation of Ajax comment paging in WordPress

I. Preparations
Load the jQuery library. This is not explained.

2. Enable the WordPress comment page

Open the WordPress background-settings-discussion, select "Display Comments by page" in "other comments settings", and set the number of comments. The number of comments here is only calculated for the primary comments, and the number of comments replied is not calculated. Here Kayo fills in a relatively large number (15), because the comment page is too detailed, making it difficult for users to read the previous comment.

After the comment page is enabled in the background, go to comments. add the following code to the page navigation area in php (if there is similar code in the topic, you do not need to add it again. In addition, the nav tag in the code is the HTML5 tag, if the topic does not use HTML5, use div instead.

The code is as follows:	Copy code
<Nav id = "comments-navi"> <? Php paginate_comments_links ('prev _ text = & laquo; & next_text = & raquo; ');?> </Nav>

3. SEO of comment pages

From the SEO perspective, comments are paginated to produce duplicate content (both the content and the keywords and description are the same ), in this way, it is easy for many blogs to comment on the content because there are too many duplicate content and the permission is downgraded. Therefore, some SEO operations are required. The most convenient and effective method is to use the meta tag. In your header. add the following code under the original meta tag of php, so that pages on the page will not be indexed by seo/seo.html "target =" _ blank "> search engines to prevent repeated content.

The code is as follows:	Copy code
<? Php if (is_single () | is_page ()){ If (function_exists ('Get _ query_var ')){ $ Cpage = intval (get_query_var ('cpage ')); $ CommentPage = intval (get_query_var ('comment-page '));     } If (! Empty ($ cpage) |! Empty ($ commentPage )){ Echo '<meta name = "robots" content = "noindex, nofollow"/> '; Echo "n ";     } } ?>

IV. Ajax comments page

According to the above, there is now a comment page in the topic. To achieve Ajax comments page, you only need JavaScript. Before that, you must add an element before the comment list, when a new comment list is displayed, the list is being loaded. Assume that the comment module structure of the topic template comments. php is as follows:

The code is as follows:

Copy code

<Div class = "comments"> <H3 id = "comments-list-title"> Comments <! -- Display loading new comment --> <Div id = "loading-comments"> <span> Loading... </span> </div> <! -- Comment list --> <Ol class = "comment_list"> <Li>... </li> <Li>... </li> <Li>... </li> </Ol> <! -- Comment pagination navigation --> <Nav id = "comments-navi"> <A class = "prev page-numbers" href = "#"> 1 </a> ... </Nav> </Div>

Add the following js code to your js file to implement comments pagination

The code is as follows:

Copy code

// Comment page $ Body = (window. opera )? (Document. compatMode = "CSS1Compat "? $ ('HTML '): $ ('body'): $ ('HTML, body '); // Trigger paging when you click the paging navigation link $ ('# Comments-navi a'). live ('click', function (e ){ E. preventDefault (); $. Ajax ({ Type: "GET ", Url: $ (this). attr ('href '), BeforeSend: function (){ $ ('# Comments-navi'). remove (); $ ('. Comment_list'). remove (); $ ('# Loading-comments'). slideDown (); $ Body. animate ({scrollTop: $ ('# comments-list-title'). offset (). top-65}, 800 ); }, DataType: "html ", Success: function (out ){ Result = $ (out). find ('. comment_list '); Nextlink = $ (out). find ('# comments-Navi '); $ ('# Loading-comments'). slideUp ('Fast '); $ ('# Loading-comments'). after (result. fadeIn (500 )); $ ('. Comment_list'). after (nextlink );         } }); });

Loading css (for reference only)

The code is as follows:	Copy code
# Loading-comments {display: none; width: 100%; height: 45px; background: # a0d536; text-align: center; color: # fff; font-size: 22px; line-height: 45px ;}

If you think this is very troublesome, we can use the pagination plug-in AJAX Comment Pager for example.

AJAX Comment Pager plug-in introduction:
The Comment paging function of the AJAX Comment Pager Plug-In adds the AJAX processing function, which does not rely on any JavaScript framework. If you want to use this plug-in, make sure the following conditions are met:

1. You are using WordPress 2.7 or later (including beta)
2. The topic you are using defines a custom comment display method. (This method is basically defined if nested reply is supported)
Install the AJAX Comment Pager plug-in:

1. Download the AJAX Comment Pager plug-in and decompress the package to the "/wp-content/plugins/" directory.
2. Go to the WordPress background's "Plugins" page to activate the plug-in.
3. Go to the "Settings-> AJAX Comment Pager" page in the WordPress background, enter the relevant information and save the Settings, as shown in the figure below:

4. InIn the "comments. php" file, "<span id =" cp_post_id "> <? Php echo $ post-> ID;?> </Span> "append to" <? Php paginate_comments_links () ;?> .
If a file named "ajax-comment-pager.css" exists under the theme directory, the plug-in loads it to the page as a style file, if the file does not exist, the theme uses the built-in plug-in as the default style file and loads it to the page.