利用AJAX实现WordPress中的文章列表及评论的分页功能
文章列表页分页
一.加载jQuery库
既然是jQuery驱动的Ajax，加载jQuery库是必须的。
二.文章列表格式
在你的文章列表页面（首页index.php、归档archive.php）需要确保有以下类似的结构
<!--包含所有文章的容器--> <divid="content"> <!--各文章的容器--> <divclass="post"></div> <divclass="post"></div> <divclass="post"></div> <divclass="post"></div> <divclass="post"></div> </div>
三.加入默认导航
因为Ajax分页每次获取的是下一页的内容，因此只需调用WordPress的默认导航。在你的index.php（或是其他文章列表页面）加入以下代码，生成默认的WordPress导航。
<divid="pagination"><?phpnext_posts_link(__('LOADMORE'));?></div>
四.Ajax获取下一页
在你的主题js文件里加入以下代码
//使用live()使js对通过Ajax获得的新内容仍有效
$("#paginationa").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("#paginationa").attr("href");
//渐显新内容
$("#content").append(result.fadeIn(300));
$("#paginationa").removeClass("loading").text("LOADMORE");
if(nextHref!=undefined){
$("#paginationa").attr("href",nextHref);
}else{
//若没有链接，即为最后一页，则移除导航
$("#pagination").remove();
}
}
});
returnfalse;
});
五.滚动触发翻页
如果想当鼠标滚动到接近页面底部时自动翻页，则可以把代码改成下面的样式
//给浏览器窗口绑定scroll事件
$(window).bind("scroll",function(){
//判断窗口的滚动条是否接近页面底部
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("#paginationa").attr("href");
//渐显新内容
$("#content").append(result.fadeIn(300));
$("#paginationa").removeClass("loading").text("LOADMORE");
if(nextHref!=undefined){
$("#paginationa").attr("href",nextHref);
}else{
//若没有链接，即为最后一页，则移除导航
$("#pagination").remove();
}
}
});
}
});
六.添加导航css
为导航添加一段css美化一下，另外还可以准备一张gif图来表示正在加载，下面是Melody的样式：
#pagination{padding:20px0030px;}
#pagination.nextpostslink{width:600px;color:#333;text-decoration:none;display:block;padding:9px0;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")240px9pxno-repeat;color:#555;}
#pagination.loading:hover{background-color:transparent;cursor:default;}
评论分页
一.准备
加载jQuery库，这个不解释了。
二.开启WordPress评论分页
打开WordPress后台-设置-讨论，在“其他评论设置”中勾选分页显示评论，设置一下评论数目，这里的评论数目仅计算主评论，回复评论不作计算。这里我填了比较大的数字（15），因为评论分页分得太细会使用户不便于阅读之前的评论。
在后台开启评论分页后，在comments.php中需要添加分页导航的地方加入以下代码（如主题中有类似代码则无须再添加，另外代码中的nav标签为HTML5标签，若主题没有使用HTML5则有div代替即可。）
<navid="comments-navi">
<?phppaginate_comments_links('prev_text=?&next_text=?');?>
</nav>
三.评论分页的SEO
从SEO的角度看，评论分页会造成重复内容（分页的内容正文都一样，并且keywords和description也相同），这样对于评论很多的博客很容易因为重复内容太多而降权，因此需要在SEO方面作出一些处理，最为方便有效的方法是使用meta标签。在你的header.php原有的meta标签下加入以下代码，这样分页的页面便会禁止被搜索引擎收录，防止内容重复。
<?phpif(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'<metaname="robots"content="noindex,nofollow"/>';
echo"\n";
}
}
?>
四.Ajax评论
根据上文所述，现在主题中已经有评论分页了，要做到Ajax的评论分页，只需JavaScript的配合，不过在这之前首先要在评论列表前加入一个元素，用于在显示新一页评论列表时表示列表正在加载。假设主题模板comments.php的评论模块结构如下：
<divclass="comments"> <h3id="comments-list-title">Comments</h3> <!--显示正在加载新评论--> <divid="loading-comments"><span>Loading...</span></div> <!--评论列表--> <olclass="comment_list"> <li>...</li> <li>...</li> <li>...</li> </ol> <!--评论分页导航--> <navid="comments-navi"> <aclass="prevpage-numbers"href="#">1</a> ... </nav> </div>
在你的js文件中加入以下js代码实现评论分页
//评论分页
$body=(window.opera)?(document.compatMode=="CSS1Compat"?$('html'):$('body')):$('html,body');
//点击分页导航链接时触发分页
$('#comments-navia').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（仅供参考）
#loading-comments{display:none;width:100%;height:45px;background:#a0d536;text-align:center;color:#fff;font-size:22px;line-height:45px;}