WordPress 单篇文章分页样式、AJAX 文章分页及 SEO
发布于
by
通常在以下场景时，我们会选择给一篇文章添加分页，如： a.文章过于长，让人滚动半天滚轮还到不了底； b.发布带…
通常在以下场景时，我们会选择给一篇文章添加分页，如：
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("u6587u7ae0u52a0u8f7du4e2dx2ex2ex2e");
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(); ?>" />类别：WordPress函数讲解、
本文收集自互联网，转载请注明来源。
如有侵权，请联系 wper_net@163.com 删除。
猜你喜欢GUESS YOU LIKE
还没有任何评论，赶紧来占个楼吧！