WordPress blog Ajax comments pagination tutorial

The following describes in detail the implementation process of Ajax comments pagination using non-plug-ins.

Load the jQuery library

The jQuery library is loaded. Generally, the jQuery library is loaded for the topic. If you do not have one, add the following code before the header. Php file of the topic (/head) (replace () with <>:

<Script src = "// ajax.googleapis.com/ajax/libs/jquery/1.10.2/jquery.min.js"> </script>
Enable 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. I entered 20. One is that my blog posts are close to this number, and too many of them affect the length of the entire article.

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

<Nav class = "commentnav">
<? Php paginate_comments_links ('prev _ text = previous page & next_text = next page ');?>
</Nav>

SEO for 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. Add the following code under the original meta tag of your header. php, so that the pages on the page will not be indexed by the search engine to prevent repeated content.

 

<? 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 ";
    }
}
?>

Ajax comments

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:

 

<Div class = "commentshow">
<Div class = "comments-loading"> Loading... </div>
<Ul class = "commentlist">
<? Php wp_list_comments ('Type = comment & callback = devecomment & max_depth = 10000 ');?>
</Ul>
 
<Nav class = "commentnav">
<? Php paginate_comments_links ('prev _ text = previous page & next_text = next page ');?>
</Nav>
</Div>

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

 

// Comment page
JQuery (document). ready (function ($ ){
$ Body = (window. opera )? (Document. compatMode = "CSS1Compat "? $ ('HTML '): $ ('body'): $ ('HTML, body'); // commentnav ajax
$ (Document). on ('click', '. commentnav A', function (e ){
E. preventDefault ();
$. Ajax ({
Type: "GET ",
Url: $ (this). attr ('href '),
BeforeSend: function (){
$ ('. Commentnav'). remove ();
$ ('. Commentlist'). remove ();
$ ('. Comments-loading'). slideDown ();
},
DataType: "html ",
Success: function (out ){
Result = $ (out). find ('. Commentlist ');
Nextlink = $ (out). find ('. commentnav ');
$ ('. Comments-loading'). slideUp (550 );
$ ('. Comments-loading'). after (result. fadeIn (800 ));
$ ('. Commentlist'). after (nextlink );
 
            }
});
});
});

Load the css of the bar (this blog css is for reference only)

. Comments-loading {display: none; background: none! Important; height: 50px; text-align: center; margin-bottom: 20px ;}
Refer: