首页 > wordpress主题 > [亲测]wordpress文章下拉自动无限翻页方式
摘要:相信很多人做过很多的尝试,想通过几行代码把自己的wordpress主题修改成文章自动无限下拉的形式,但是苦于功能不能实现...

相信很多人做过很多的尝试,想通过几行代码把自己的wordpress主题修改成文章自动无限下拉的形式,但是苦于功能不能实现,也不清楚是卡在哪个步骤了,今天大挖给大家提供一个零距离的傻瓜版,来帮助大家完成这个功能,以下这个方法对于其它的教程优势在于,很明确的给到了翻页的代码,因为其它的教程都是以翻页的js及功能为例子,这里比较好的是提供了一个完整的翻页代码,可以直接应用,当然比较核心的步骤也同步给到了大家。希望这次大家可以操作成功。

实现步骤:
一共分三个步骤,复制粘贴,然后查找自己的每篇的文章样式class,和包含文章的class样式替换即可。

1、本功能主要应用了jQuery插件jquery.infinitescroll.js,通过大挖给大家提供了CDN的链接,方便直接应用到HEAD内即可;

2、替换分页代码:将以下分页的代码替换到当前分页位置上

3、在当前主题的functions.php文件中,添加以下代码:
代码中间包含了一个gif图像翻页效果的动态图,大家可以要的自己的喜欢,自行制作或是注释掉,这里大挖不再提供GIF图片

重要参数说明:

img: 等待加载时显示的动态图片URL路径

nextSelector: 下一页(Previous Post)链接CSS样式名称 + a标签(类选择器或ID选择器)

navSelector: 包含上一页/下一页链接的样式名称(类选择器或ID选择器)

itemSelector: 包含每篇文章内容的样式名称(类选择器或ID选择器)

contentSelector: 包含所有文章的样式名称(类选择器或ID选择器)

提醒:如果按上面方法没有生效,请检查样式是否选择错。

4、CSS样式代码:(把下面的CSS代码添加到当前主题的样式文件中,一般是style.css,可根据自己的喜欢修改对应代码)

分享到:
赞(0) 打赏

作者: 大挖酱

挖主题团队自2014年开始专注于WordPress企业主题设计开发,致力于为更多用户打造出更漂亮、更易用、更专业的网站。距今已累计开发近50款WP主题,付费客户超过5千人。挖主题,是您可以长期信赖的合作伙伴。

付款后联系作者QQ 8413708

支付宝扫一扫

微信扫一扫