Article list page pagination
1. Load the jQuery library
Since it is a jQuery-driven Ajax, loading the jQuery library is a must.
2. Article list format
On your article list page (home page index.php, archive.php) you need to ensure that there is a similar structure as follows
<!-- Container containing all articles--><div id="content"> <!-- Container for each article--> <div></div> <div></div> <div></div> <div></div> <div></div> <div></div> <div></div>
3. Add to default navigation
Because Ajax paging each time gets the content of the next page, you only need to call WordPress's default navigation. Add the following code to your index.php (or other article list page) to generate the default WordPress navigation.
<div id="pagination"><?php next_posts_link(__('LOAD MORE')); ?></div>4.Ajax Get the next page
Add the following code to your topic js file
// Use live() to make js still valid for new content obtained through Ajax$("#pagination a").live("click", function(){ $(this).addClass("loading").text("LOADING..."); $.ajax({ type: "POST", url: $(this).attr("href") + "#content", success: function(data){ result = $(data).find("#content .post"); nextHref = $(data).find("#pagination a").attr("href"); // Show new content in progress $("#content").append(result.fadeIn(300)); $("#pagination a").removeClass("loading").text("LOAD MORE"); if ( nextHref != undefined ) { $("#pagination a").attr("href", nextHref); } else { // If there is no link, it is the last page, remove the navigation $("#pagination").remove(); } } }); return false; });5. Scroll triggers page turn
If you want to automatically turn the page when the mouse scrolls to the bottom of the page, you can change the code to the following style
// Bind scroll event $(window).bind("scroll",function(){// Determine whether the scrollbar of the window is close to the bottom of the page if( $(document).scrollTop() + $(window).height() > $(document).height() - 10 ) { $(this).addClass('loading').text('LOADING...'); $.ajax({ type: "POST", url: $(this).attr("href") + "#content", success: function(data){ result = $(data).find("#content .post"); nextHref = $(data).find("#pagination a").attr("href"); // Show new content in a bit $("#content").append(result.fadeIn(300)); $("#pagination a").removeClass("loading").text("LOAD MORE"); if ( nextHref != undefined ) { $("#pagination a").attr("href", nextHref); } else { // If there is no link, it is the last page, remove the navigation $("#pagination").remove(); } } });}});6. Add navigation css
Add a css section to the navigation to beautify it. You can also prepare a gif diagram to indicate that it is loading. The following is the style of Melody:
#pagination {padding: 20px 0 0 30px; }#pagination .nextpostslink {width: 600px; color: #333; text-decoration: none; display: block; padding: 9px 0; text-align: center; font-size: 14px; }#pagination .nextpostslink:hover {background-color: #cccccc; text-decoration: none; border-radius: 5px; -moz-border-radius: 5px; -webkit-border-radius: 5px; }#pagination .loading {background: url("images/loading.gif") 240px 9px no-repeat; color: #555; }#pagination .loading:hover {background-color: transparent; cursor: default; }Comment pagination
1. Prepare
Loading the jQuery library, this is not explained.
2. Open WordPress comment pagination
Open WordPress backend - Settings - Discussion, check the page to display comments in "Other Comments Settings", set the number of comments. The number of comments here is only calculated for the main comments, and reply to comments will not be calculated. Here I filled in a larger number (15), because the comment paging is too detailed and will make it inconvenient for users to read previous comments.
After opening comment paging in the background, add the following code to where you need to add paging navigation in comments.php (if there is similar code in the topic, you don’t need to add it again. In addition, the nav tag in the code is HTML5 tag. If the topic does not use HTML5, div will be used instead.)
<nav id="comments-navi"> <?php paginate_comments_links('prev_text=?&next_text=?');?></nav>3. SEO of comment paging
From the perspective of SEO, comment paging will cause duplicate content (the content of the paging is the same, and keywords and description are the same), so it is easy for blogs with many comments to downgrade their rights because they are too much duplicate content. Therefore, some treatments are required in SEO. The most convenient and effective way is to use meta tags. Add the following code under the original meta tag of your header.php, so that the pages that are paging will be prohibited from being included by search engines and prevent content from being duplicated.
<?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"; }}?>4.Ajax Comments
According to the above, there are comment paging in the topic. To achieve comment paging in Ajax, you only need JavaScript to cooperate. However, before this, you must first add an element before the comment list to indicate that the list is loading when displaying a new page comment list. Assume that the comment module structure of the topic template comments.php is as follows:
<div> <h3 id="comments-list-title">Comments</h3> <!-- Show new comments loading--> <div id="loading-comments"><span>Loading...</span></div> <!-- Comments List--> <ol> <li>...</li> <li>...</li> <li>...</li> </ol> <!-- Comments Pagination Navigation--> <nav id="comments-navi"> <a href="#">1</a> ... </nav></div>
Add the following js code to your js file to implement comment pagination
// Comment paging $body=(window.opera)?(document.compatMode=="CSS1Compat"?$('html'):$('body')):$('html,body');// Trigger the paging when clicking 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); } });});CSS for loading bar (for reference only)
The code copy is as follows:
#loading-comments {display: none; width: 100%; height: 45px; background: #a0d536; text-align: center; color: #fff; font-size: 22px; line-height: 45px; }