标题起得有些拗口,不过博主们应该都懂啥意思。前一阵@fooleap 在文章留言中提到:
你这个分页,其实可以采用 Ajax 并 pushState() 更新 history 的方式。刚我想评论的时候想翻前页去看,一切页草稿没了=。=
既然读者有需求,自然应该实现,网上搜了一圈,有很多办法,但都比较复杂,以我这编程水平确实难为了自己,加上没有大腿可以抱,只能先搁置着。昨天p图,看着Adobe Bridge里几百张照片,妥妥的一篇长文,不可避免的又想起这茬来。找来找去,最后是在WordPress插件库里搜到一款4年没有更新的插件“Paged Post Slider”。不过作者声明以后再也不会更新了,有需要可以去Github自行下载:
NOTE: This plugin is no longer actively developed or supported. If anyone wants to fork it, check out the [github repository](https://github.com/spencejs/Paged-Post-Slider).
安装成功后测试,确实也能实现功能,但只有基本的“Previous”和“Next”标签,离我的需求差得比较远。最终以有限的水平修改了插件代码后终于实现了比较理想的Ajax无刷新长文章nextpage页码分页功能。主要修改之处如下:
1、插件php代码中,去掉了function paged_post_link_pages()
,将$args
功能放到wp_link_pages里。
$ppscontent .= wp_link_pages( array('before' => '<div class="fenye">', 'after' =>'', 'next_or_number' => 'next', 'previouspagelink' => '<span>上一页</span>', 'nextpagelink' => ''));
$ppscontent .= wp_link_pages( array('before' => '', 'after' => '', 'next_or_number'=> 'number', 'link_before' =>'<span>', 'link_after'=>'</span>'));
$ppscontent .= wp_link_pages( array('before' => '', 'after' => '</div>', 'next_or_number'=> 'next', 'previouspagelink' => '', 'nextpagelink' => ' <span>下一页</span>'));
2、自己用的permalink格式是https://siteurl/%post_id%形式,属于非标,会导致一个bug产生——无法点选第1页。在插件js代码中新增如下代码:
else if(address.split("/").length == 4) {
//Trailing Slash Permalink Structure
var ajaxNav = function(event) {
var url = this.href;
var parts = url.split("/");
var result = '/' + parts[parts.length-1];
if(typeof result != 'undefined' && result == 'pagination'){
var result = '';
}
event.preventDefault();
if(url.split("/").length == 4){
location.hash = '';
} else {
location.hash = result;
}
}
}
3、选页数后,将scrollTop设为250,直接跳到页首文章处而非页面顶部,但增加了一个判断函数,如果是文章第1页,则跳到页面顶部。
if (pps_options_object.scroll_up && (hash_value !== '')) {
$('html, body').animate({
scrollTop: 250
}, 500);
};
4、已知问题:与Enlighter、Syntax Highlighter、MapsMarker等插件冲突。无解,加入var query = jQuery.noConflict(true);
后原插件仍无法工作,策略是不同时使用…… 😀
5、由上述“Paged Post Slider”衍生而来的插件“jQuery Post Splitter”可完美解决上述兼容性问题。如喜欢轻量代码的,可考虑上文代码;如有插件冲突的,可考虑安装此插件并自行修订CSS。
翻了几篇 好像没看到应用
@木瓜园和两个插件有冲突,估计是js加载问题,暂时下线待查。 🙂
@木瓜园已更新。
最简单的做法是不分页啊 😎
@大致文章太长了啊。比如上文中@fooleap提到的那篇。
我看目前的效果,是不是考虑点击加载更多,而不是替换当前页面内容为第二页?
对比之前的分页,这种动态加载不利于 SEO,没法直接访问到第二页,也可以适当扩展实现 😳
文章太长主要是图片太多,导致:
1、一次性加载太多图片,费流量。
2、图片把网页撑得太高。
第一个问题,微信公众号文章貌似只是加了图片懒加载,我倒是觉得可以考虑这种做法,可以默认显示前几张。
第二个问题忽略 😛
@fooleap😥 又给我出难题啦。我有空再研究研究吧。
@fooleap我仔细考虑了一下你的建议,点击加载更多会导致整篇文章的页面更高,而且如何解决在哪里分页的问题?目前没找到说能在nextpage标签处可以load more的代码呀。
@S̆̈加载更多导致页面更高我决定没什么问题,毕竟访客已经阅读到加载更多那里,继续浏览下去即可。
很无奈 WordPress 的标签我已经忘了 ❗
@fooleap我其实对目前效果还算满意,但你说的seo问题确实没想到。你有什么好的建议吗?
@S̆̈我的想法是保留此前的翻页方式,翻页时动态加载,不刷新页面,或许 PJAX 可以了解一下。
@fooleapPjax我也看了。从头码代码我有困难,目前还是想找个插件修修补补。有好推荐吗?
@S̆̈😯 你目前貌似只是分段默认隐藏后面的,按钮控制隐藏和显示,并没有使用 Ajax 相关操作。
@fooleap你说的是上面的代码还是我最后用的插件?
@fooleap对了,这样说来岂非对SEO没影响?隐藏能用也行啊?
@S̆̈可能就是最后的插件,就是目前本页的效果。
@fooleap❗ 算了,我打算放弃高级的ajax了,用回原来的简单分页。
@S̆̈之前的分页是使用什么插件来着?我发现你其实很喜欢折腾的
@fooleap哪里是我喜欢折腾,不是你要求高吗? 😈 现在用的是“jQuery Post Splitter”。你帮我看一下呢。我只要好用+不影响计数+不影响SEO就行。
@fooleap之前用的是:「WordPress 插件库里搜到一款 4 年没有更新的插件 “Paged Post Slider”」,Master的下载地址在上文提到的Gitbub链接,我自己做了一定修改。
@S̆̈之前的分页挺好的,一篇文章好几个链接,也可以直接访问到第二页的内容。不知道是利于还是不利于 SEO。
缺点是上次我第一次没经验,点页码评论内容就没了。
目前这样搜索引擎一般会抓整篇文章的内容,缺点是长篇图文所有图片一次性加载。
最后我觉得还是自己爽就好。
@fooleap你说的是我没用ajax之前的代码吗?没用插件,是wp自带的wp_link_pages()。我马上关掉现在的插件你体验一下感觉好不好。
@S̆̈对,我说的之前,是写这篇文章之前的状态,原来那是自带的啊 ❗
@S̆̈应该是你自己感觉好不好,而不是我感觉好不好啊,我的感觉很奇葩的
@fooleap好吧,实话说我觉得如果有一款插件能让我最小代价部署+加载极快+不冲突+翻页不影响计数和SEO,我挺愿意用的……
@S̆̈Paged Post Slider 实现 AJAX 后,本来应该在文章内容加载后的执行 JS,在翻页后没有正常加载,该有的效果也就没有出来。
因那些 JS 你好些用的还是插件,改起来也就比较麻烦,鱼和熊掌不可兼得,说的大概就是这个吧。
@fooleap那我暂且用回默认函数,毕竟也有其优势。你之前的“需求”我暂时不解决了。 😆