导语： 通常在以下场景时，我们会选择给一篇文章添加分页，如：a.文章过于长，让人滚动半天滚轮还到不了底；b.发布带图片的新闻资讯，或带标题和描述的图片文章时；c.等等...用 ajax 方式加载文章分页的话，可以无刷新浏览外，还可以直接请求改变的 URL 后也可以正常浏览。会在一定程度上提升用户体验，而且看起来也很酷！下面就分 2 个方面来讲怎么实现的。
通常在以下场景时，我们会选择给一篇文章添加分页，如：
a.文章过于长，让人滚动半天滚轮还到不了底；
b.发布带图片的新闻资讯，或带标题和描述的图片文章时；
c.等等...
用ajax方式加载文章分页的话，可以无刷新浏览外，还可以直接请求改变的 URL 后也可以正常浏览。会在一定程度上提升用户体验，而且看起来也很酷！下面就分 2 个方面来讲怎么实现的。
1 实现单篇文章分页
wordpress 有自带文章分页功能，使用方法是：
在文章中加入
<!--nextpage-->就可以实现分页了；
但是，想要启用这个功能还需要在主题的 single.php 中的<?php the_content(); ?>后面加入下面的代码时才能实现：
<?php wp_link_pages(); ?>然后为分页导航配上美化的样式：
将上述的<?php wp_link_pages(); ?>替换为：
<?php
wp_link_pages(array('before' => '<div class="pagenavi hentry" >分页阅读：', 'after' => '', 'next_or_number' => 'next', 'previouspagelink' => '<span class="page-numbers page-previous"></span>', 'nextpagelink' => ""));
wp_link_pages(array('before' => '', 'after' => '', 'next_or_number' => 'number', 'link_before' =>'<span class="page-numbers">', 'link_after'=>'</span>'));
wp_link_pages(array('before' => '', 'after' => '</div>', 'next_or_number' => 'next', 'previouspagelink' => '', 'nextpagelink' => '<span class="page-numbers page-next"></span>'));
?>然后随便在哪里插入如下 CSS 代码：
.page-numbers {
display: inline-block;
line-height: 48px;
padding: 0 14px;
font-size: 17px;
}
.page-previous,
.page-next {
font-size: 17px;
font-family: 'FontAwesome';
height: 48px;
line-height: 48px;
position: relative;
width: 48px;
}
.page-next::before {
content: "\f105";
}
.page-previous::before {
content: "\f104";
}
.pagenavi {
text-align:center; padding:6px;
}
.pagenavi > a {
color: #A0A0A0;
}最终效果如下图：
也可看看本站的样式：点我
2 实现 AJAX 文章分页
首先感谢@mufeng提供的技术支持。
大致代码如下，具体根据主题不同可以略微有差别，编辑 index.php，改成如下结构：
<?php
if(isset($_GET["action"]) && $_GET["action"] == "ajax_postsss"){
nocache_headers();?>
.....文章内容....
<?php }else{
get_header() ;
?>
.....文章内容....
<?php get_sidebar() ;?>
<?php get_footer() ;?>
<?php }?>在引用 JQ 库的前提下使用以下 JS 代码实现：
jQuery(document).ready(function(a) {
var n = null, H = false, i = document.title, t, h = window.opera ? document.compatMode == "CSS1Compat" ? a("html") :a("body") :a("html,body");
if (window.history && window.history.pushState) {
a(document).on("click", ".content-page a", function(b) {
b.preventDefault();
if (n == null) {
t = {
url:document.location.href,
title:document.title,
html:a("#content").html(),
top:h.scrollTop()
};
} else {
n.abort();
}
t.top = h.scrollTop();
var q = a(this).attr("href").replace("?action=ajax_postsss", "");
a(".content-page").text("\u6587\u7ae0\u52a0\u8f7d\u4e2d\x2e\x2e\x2e");
n = a.ajax({
url:q + "?action=ajax_postsss",
success:function(v) {
H = true;
var state = {
url:q,
title:i,
html:v
};
history.pushState(state, i, q);
document.title = i;
h.animate({
scrollTop: 0
},
0);
a("#content").html(v);
}
});
return false;
});
window.addEventListener("popstate", function(i) {
if (n == null) {
return;
} else {
if (i && i.state) {
H = true;
document.title = i.state.title;
a("#content").html(i.state.html);
} else {
H = false;
document.title = t.title;
a("#content").html(t.html);
h.animate({
scrollTop: t.top
},
0)
}
}
});
}
});其中：#content 标签要包含文章列表和翻页导航，.content-page a 是翻页标签。
3 评论分页和文章分页的 SEO
至此，实现 ajax 单篇文章分页了，接下来也说点 SEO，我对 SEO 基本不懂，只是搜索的时候发现很多文章都提到了：评论分页和文章分页导致的权重分散。
我的解决方法是：在代码<?php if ( is_singular() ){?>后面加上权重导向主页面的代码：
<link rel="canonical" href="<?php the_permalink(); ?>" />「点点赞赏，手留余香」
还没有人赞赏，快来当第一个赞赏的人吧！
声明：本文转载自网络，本文观点不代表龙笑天下立场，版权归原作者所有，欢迎分享本文，转载请保留出处！
