gravatar头像龙笑天  1年前 (2015-11-20) 来源:网络 隐藏边栏 |   1 条评论  147 
文章评分 19 次,平均分 4.9
导语:通常在以下场景时,我们会选择给一篇文章添加分页,如:a.文章过于长,让人滚动半天滚轮还到不了底;b.发布带图片的新闻资讯,或带标题和描述的图片文章时;c.等等...用ajax方式加载文章分页的话,可以无刷新浏览外,还可以直接请求改变的URL后也可以正常浏览。会在一定程度上提升用户体验,而且看起来也很酷!下面就分2个方面来讲怎么实现的。

通常在以下场景时,我们会选择给一篇文章添加分页,如:

a.文章过于长,让人滚动半天滚轮还到不了底;
b.发布带图片的新闻资讯,或带标题和描述的图片文章时;
c.等等...

ajax方式加载文章分页的话,可以无刷新浏览外,还可以直接请求改变的URL后也可以正常浏览。会在一定程度上提升用户体验,而且看起来也很酷!下面就分2个方面来讲怎么实现的。

1 实现单篇文章分页

wordpress有自带文章分页功能,使用方法是:
在文章中加入

就可以实现分页了;

但是,想要启用这个功能还需要在主题的 single.php 中的后面加入下面的代码时才能实现:

然后为分页导航配上美化的样式:
将上述的替换为:

然后随便在哪里插入如下 CSS 代码:

最终效果如下图:

也可看看本站的样式:点我

2 实现AJAX文章分页

首先感谢@mufeng提供的技术支持。
大致代码如下,具体根据主题不同可以略微有差别,编辑index.php,改成如下结构:

在引用JQ库的前提下使用以下JS代码实现:

其中:#content 标签要包含文章列表和翻页导航,.content-page a 是翻页标签。

3 评论分页和文章分页的SEO

至此,实现ajax单篇文章分页了,接下来也说点SEO,我对SEO基本不懂,只是搜索的时候发现很多文章都提到了:评论分页和文章分页导致的权重分散。
我的解决方法是:在代码后面加上权重导向主页面的代码:

 

除特别注明外,本站所有文章均为龙笑天下原创,转载请注明出处来自http://www.ilxtx.com/wordpress-ajax-posts-pager.html

gravatar头像
龙笑天 最后编辑于:2016-06-11
互助分享,互联网本该如此!

发表评论

表情 链接 贴图 私信 格式 签到

  1. gravatar头像
    我爱动感单车网 评论达人 LV.2 来自天朝的朋友 谷歌浏览器 Windows XP 广西桂林市 电信

    还好,我所使用的主题有这个功能,虽然样式不是很好看和很方便用户翻页,聊胜于无吧!

    沙发 2016-08-28 23:37
    0 0 回复
切换注册

登录

忘记密码 ?

您也可以使用第三方帐号快捷登录。
快捷登录后,请完善资料中的电子邮件地址,可及时收到回复邮件通知和用于登录!

切换登录

注册

扫一扫二维码分享