Using AJAX to achieve a list of WordPress articles and comments paging function _javascript Skills

Article List page paging
A. Loading JQuery library
since it is jquery-driven Ajax, it is necessary to load the jquery library.

Two. Article List format
in your Article List page (home index.php, archive archive.php) you need to ensure that you have the following similar structure

<!--contains all articles of the container-->
<div id= "Content" >
  <!--articles containers-->
  <div class= "POST" ></div >
  <div class= "POST" ></div>
  <div class= "POST" ></div>
  <div class= "POST" ></div>
  <div class= "POST" ></div>
</div>

Three. Add default navigation
because Ajax paging gets the content of the next page each time, you just call the default navigation for WordPress. 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>

Four. Ajax Get next page
Add the following code to your theme JS file

Use Live () to make JS still valid for new content obtained via 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");
        Fade new content
        $ ("#content"). Append (Result.fadein);
        $ ("#pagination a"). Removeclass ("Loading"). Text ("LOAD more");
        if (nexthref!= undefined) {
          $ ("#pagination a"). attr ("href", nexthref);
        } else {
        //If there is no link, that is the last page, remove the navigation 
   $ ("#pagination"). Remove ();
        }
      }
    );
    return false;
  });

Five. Scroll Trigger page
If you want to scroll automatically when the mouse scrolls to the bottom of the page, you can change the code to the following style

Bind the browser window to the scroll event
$ (window). Bind ("scroll", function () {
//determine if the scroll bar of the window is close to the bottom of the page
if ($ (document). scrolltop () + $ (window). Height () > $ (document). Height ()-ten) {
  $ (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");
      Fade new content
      $ ("#content"). Append (Result.fadein);
      $ ("#pagination a"). Removeclass ("Loading"). Text ("LOAD more");
      if (nexthref!= undefined) {
        $ ("#pagination a"). attr ("href", nexthref);
      } else {
      //If there is no link, that is the last page, remove the navigation 
   $ ("#pagination"). Remove ();}}});

Six. Add Navigation CSS
to add a section of CSS to the navigation landscaping, you can also prepare a GIF to indicate that 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 Paging
I. Preparation
loading the JQuery library, this does not explain.

Two. Open WordPress comments Page
Open WordPress background-settings-discussion, in the "Other comment settings" Check the page to display comments, set the number of comments, the number of comments here only calculate the main comment, reply comment not to calculate. Here I've filled in a larger number (15), because the comments are too small to make it easier for users to read the previous comments.

After opening the comment page in the background, add the following code in the comments.php where you want the pager to be added (such as in the topic there is no need to add a similar code, another code in the nav tag for the HTML5 tag, if the theme is not used HTML5 there is a div instead. ）

<nav id= "Comments-navi" >
  <?php paginate_comments_links (' prev_text=?&next_text=? ');? >
</nav>

Three. Comments Page SEO
from the SEO point of view, the comments page will result in duplicate content (the content of the text are the same, and keywords and description are the same), so that a lot of comments on the blog is easy because of repeated content too much and down right, so need to do some processing in SEO, The most convenient and effective method is to use meta tags. Add the following code to your header.php original meta tag so that pagination pages will be banned from search engines to prevent duplication of 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"
  ;
}
? >

four. Ajax Review
according to the above, now the topic has been the comments page, to do Ajax comment paging, just JavaScript, but before this before the comments list to add an element, used to display a new list of comments when the list is loading. Suppose the theme template comments.php the comment module structure as follows:

<div class= "Comments" >
  
 
 

In your JS file, add the following JS code implementation comment paging

Comment Paging
$body = (window.opera)? ( document.compatmode== "Css1compat" $ (' HTML '): $ (' body '): $ (' html,body ');
Click the pager link to trigger page
$ (' #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}, (a);
    },
    dataType: "html",
    Success:function (out) {result
      = $ (out). Find ('. comment_list ');
      Nextlink = $ (out). Find (' #comments-navi ');
      $ (' #loading-comments '). Slideup (' fast ');
      $ (' #loading-comments '). After (Result.fadein);
      $ ('. Comment_list '). After (Nextlink);}});

CSS for the add-in (for reference only)

Copy Code code as follows:

#loading-comments {display:none; width:100% height:45px; background: #a0d536; text-align:center; color: #fff; font-si ze:22px; line-height:45px; }