WordPress网站下拉翻页无限加载下一页文章列表功能制作方法
在使用WordPress建网站时，如果后台文章比较多的情况下，会使用分页功能来制作分页按钮。除了这种常规的分页按钮之外，还有一种分页就是下拉无限加载下一页文章。效果如下图：
下面学做网站论坛就来介绍一下WordPress网站制作下拉无限加载下一页文章列表的方法。也可以将你网站原来的分页按钮转换成下拉加载。
方法/步骤
第一步：将文章列表循环代码使用以下的循环代码；如果本身就是这种循环代码，就不用替换；（这个循环适用于首页和分类页）
|
1 |
<div class="codecolorer-container php geshi" style="overflow:auto;white-space:nowrap;width:100%;"><div class="php codecolorer" style="white-space:nowrap"><span style="color: #000000; font-weight: bold;"><?php</span> <span style="color: #b1b100;">if</span> <span style="color: #009900;">(</span>have_posts<span style="color: #009900;">(</span><span style="color: #009900;">)</span><span style="color: #009900;">)</span> <span style="color: #339933;">:</span> <span style="color: #000000; font-weight: bold;">?></span><br><span style="color: #000000; font-weight: bold;"><?php</span> <span style="color: #b1b100;">while</span> <span style="color: #009900;">(</span>have_posts<span style="color: #009900;">(</span><span style="color: #009900;">)</span><span style="color: #009900;">)</span> <span style="color: #339933;">:</span> the_post<span style="color: #009900;">(</span><span style="color: #009900;">)</span><span style="color: #339933;">;</span> <span style="color: #000000; font-weight: bold;">?></span><br><br><span style="color: #000000; font-weight: bold;"><?php</span> <span style="color: #b1b100;">endwhile</span><span style="color: #339933;">;</span><span style="color: #000000; font-weight: bold;">?></span><br><span style="color: #000000; font-weight: bold;"><?php</span> <span style="color: #b1b100;">endif</span><span style="color: #339933;">;</span> <span style="color: #000000; font-weight: bold;">?></span></div></div> |
第二步：在文章列表所在的父HTML Div标签，添加一个class名为index001；
第三步：在循环中的底层模板加一个class名为excerpt-sticky；
第四步：在循环代码结束的下方，放在“加载更多”的按钮代码；
|
1 |
<div class="codecolorer-container php geshi" style="overflow:auto;white-space:nowrap;width:100%;"><div class="php codecolorer" style="white-space:nowrap"><span style="color: #339933;"><</span>div <span style="color: #000000; font-weight: bold;">class</span><span style="color: #339933;">=</span><span style="color: #0000ff;">"next-page"</span><span style="color: #339933;">></span> <span style="color: #000000; font-weight: bold;"><?php</span><br><span style="color: #000088;">$next_page</span> <span style="color: #339933;">=</span> get_next_posts_link<span style="color: #009900;">(</span><span style="color: #0000ff;">'加载更多'</span><span style="color: #009900;">)</span><span style="color: #339933;">;</span><br><span style="color: #b1b100;">if</span><span style="color: #009900;">(</span><span style="color: #000088;">$next_page</span><span style="color: #009900;">)</span> <span style="color: #b1b100;">echo</span> <span style="color: #000088;">$next_page</span><span style="color: #339933;">;</span><br><span style="color: #000000; font-weight: bold;">?></span><br><span style="color: #339933;"></</span>div<span style="color: #339933;">></span></div></div> |
第五步：在代码最下方，放上以下的JS代码，来获取下一页的文章列表，并且加载到上一页内容下面，以此类推。
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 |
<div class="codecolorer-container javascript geshi" style="overflow:auto;white-space:nowrap;width:100%;"><div class="javascript codecolorer" style="white-space:nowrap"><span style="color: #339933;"><</span>script<span style="color: #339933;">></span><br> $<span style="color: #009900;">(</span><span style="color: #3366CC;">'.next-page > a'</span><span style="color: #009900;">)</span>.<span style="color: #660066;">on</span><span style="color: #009900;">(</span><span style="color: #3366CC;">'click'</span><span style="color: #339933;">,</span><span style="color: #000066; font-weight: bold;">function</span><span style="color: #009900;">(</span><span style="color: #009900;">)</span><span style="color: #009900;">{</span> <span style="color: #006600; font-style: italic;">//这是点击实现加载更多</span><br><span style="color: #000066; font-weight: bold;">var</span> next_url <span style="color: #339933;">=</span> $<span style="color: #009900;">(</span><span style="color: #000066; font-weight: bold;">this</span><span style="color: #009900;">)</span>.<span style="color: #660066;">attr</span><span style="color: #009900;">(</span><span style="color: #3366CC;">"href"</span><span style="color: #009900;">)</span><span style="color: #339933;">;</span><br><span style="color: #000066; font-weight: bold;">var</span> next_text <span style="color: #339933;">=</span> $<span style="color: #009900;">(</span><span style="color: #000066; font-weight: bold;">this</span><span style="color: #009900;">)</span>.<span style="color: #660066;">text</span><span style="color: #009900;">(</span><span style="color: #009900;">)</span><span style="color: #339933;">;</span><br><span style="color: #000066; font-weight: bold;">if</span><span style="color: #009900;">(</span>next_text <span style="color: #339933;">==</span> <span style="color: #3366CC;">'加载更多'</span><span style="color: #009900;">)</span><span style="color: #009900;">{</span><br> $<span style="color: #009900;">(</span><span style="color: #000066; font-weight: bold;">this</span><span style="color: #009900;">)</span>.<span style="color: #660066;">text</span><span style="color: #009900;">(</span><span style="color: #3366CC;">'加载中...'</span><span style="color: #009900;">)</span><span style="color: #339933;">;</span><br> $.<span style="color: #660066;">ajax</span><span style="color: #009900;">(</span><span style="color: #009900;">{</span><br> type<span style="color: #339933;">:</span> <span style="color: #3366CC;">'get'</span><span style="color: #339933;">,</span><br> url<span style="color: #339933;">:</span> next_url <span style="color: #339933;">+</span> <span style="color: #3366CC;">'.index001'</span><span style="color: #339933;">,</span><br> success<span style="color: #339933;">:</span> <span style="color: #000066; font-weight: bold;">function</span><span style="color: #009900;">(</span>data<span style="color: #009900;">)</span><span style="color: #009900;">{</span><br> result <span style="color: #339933;">=</span> $<span style="color: #009900;">(</span>data<span style="color: #009900;">)</span>.<span style="color: #660066;">find</span><span style="color: #009900;">(</span><span style="color: #3366CC;">".index001 .excerpt-sticky"</span><span style="color: #009900;">)</span><span style="color: #339933;">;</span><br> next_link <span style="color: #339933;">=</span> $<span style="color: #009900;">(</span>data<span style="color: #009900;">)</span>.<span style="color: #660066;">find</span><span style="color: #009900;">(</span><span style="color: #3366CC;">".next-page > a"</span><span style="color: #009900;">)</span>.<span style="color: #660066;">attr</span><span style="color: #009900;">(</span><span style="color: #3366CC;">"href"</span><span style="color: #009900;">)</span><span style="color: #339933;">;</span><br><span style="color: #006600; font-style: italic;">//$(this).attr("href", next_url);</span><br><span style="color: #000066; font-weight: bold;">if</span> <span style="color: #009900;">(</span>next_link <span style="color: #339933;">!=</span> <span style="color: #003366; font-weight: bold;">undefined</span><span style="color: #009900;">)</span><span style="color: #009900;">{</span><br> $<span style="color: #009900;">(</span><span style="color: #3366CC;">'.next-page > a'</span><span style="color: #009900;">)</span>.<span style="color: #660066;">attr</span><span style="color: #009900;">(</span><span style="color: #3366CC;">"href"</span><span style="color: #339933;">,</span> next_link<span style="color: #009900;">)</span><span style="color: #339933;">;</span><br> $<span style="color: #009900;">(</span><span style="color: #3366CC;">'.next-page > a'</span><span style="color: #009900;">)</span>.<span style="color: #660066;">text</span><span style="color: #009900;">(</span><span style="color: #3366CC;">'加载更多'</span><span style="color: #009900;">)</span><span style="color: #339933;">;</span><br><span style="color: #009900;">}</span><span style="color: #000066; font-weight: bold;">else</span><span style="color: #009900;">{</span><br> $<span style="color: #009900;">(</span><span style="color: #3366CC;">".next-page"</span><span style="color: #009900;">)</span>.<span style="color: #660066;">remove</span><span style="color: #009900;">(</span><span style="color: #009900;">)</span><span style="color: #339933;">;</span><br><span style="color: #009900;">}</span><br><br> $<span style="color: #009900;">(</span><span style="color: #000066; font-weight: bold;">function</span><span style="color: #009900;">(</span><span style="color: #009900;">)</span> <span style="color: #009900;">{</span><br><span style="color: #000066; font-weight: bold;">if</span> <span style="color: #009900;">(</span>next_url.<span style="color: #660066;">indexOf</span><span style="color: #009900;">(</span><span style="color: #3366CC;">"page"</span><span style="color: #009900;">)</span> <span style="color: #339933;"><</span> <span style="color: #CC0000;">1</span><span style="color: #009900;">)</span> <span style="color: #009900;">{</span><br> $<span style="color: #009900;">(</span><span style="color: #3366CC;">".index001"</span><span style="color: #009900;">)</span>.<span style="color: #660066;">html</span><span style="color: #009900;">(</span><span style="color: #3366CC;">''</span><span style="color: #009900;">)</span><span style="color: #339933;">;</span><br><span style="color: #009900;">}</span><br> $<span style="color: #009900;">(</span><span style="color: #3366CC;">".index001"</span><span style="color: #009900;">)</span>.<span style="color: #660066;">append</span><span style="color: #009900;">(</span>result.<span style="color: #660066;">fadeIn</span><span style="color: #009900;">(</span><span style="color: #CC0000;">200</span><span style="color: #009900;">)</span><span style="color: #009900;">)</span><span style="color: #339933;">;</span><br><span style="color: #009900;">}</span><span style="color: #009900;">)</span><span style="color: #339933;">;</span><br><span style="color: #009900;">}</span><br><span style="color: #009900;">}</span><span style="color: #009900;">)</span><span style="color: #339933;">;</span><br><span style="color: #009900;">}</span><br><span style="color: #000066; font-weight: bold;">return</span> <span style="color: #003366; font-weight: bold;">false</span><span style="color: #339933;">;</span><br><span style="color: #009900;">}</span><span style="color: #009900;">)</span><span style="color: #339933;">;</span><br><span style="color: #339933;"></</span>script<span style="color: #339933;">></span></div></div> |
这样就可以在自己做网站时，制作出这样的无限点击加载翻页功能了。
如果你不会操作，可以下载WordPress+jquery 点击加载下一页翻页实例下载，对照使用。
由于网站搬家，部分链接失效，如无法下载，请联系站长！谢谢支持！
1. 带 [亲测] 说明源码已经被站长亲测过!
2. 下载后的源码请在24小时内删除,仅供学习用途！
3. 分享目的仅供大家学习和交流，请不要用于商业用途！
4. 本站资源售价只是赞助，收取费用仅维持本站的日常运营所需！
5. 本站所有资源来源于站长上传和网络，如有侵权请邮件联系站长！
6. 没带 [亲测] 代表站长时间紧促,站长会保持每天更新 [亲测] 源码 !
7. 盗版ripro用户购买ripro美化无担保,若设置不成功/不生效我们不支持退款!
8. 本站提供的源码、模板、插件等等其他资源，都不包含技术服务请大家谅解！
9. 如果你也有好源码或者教程，可以到审核区发布，分享有金币奖励和额外收入!
10.如果您购买了某个产品，而我们还没来得及更新，请联系站长或留言催更，谢谢理解 !
GG资源网 » WordPress网站下拉翻页无限加载下一页文章列表功能制作方法
1. 带 [亲测] 说明源码已经被站长亲测过!
2. 下载后的源码请在24小时内删除,仅供学习用途！
3. 分享目的仅供大家学习和交流，请不要用于商业用途！
4. 本站资源售价只是赞助，收取费用仅维持本站的日常运营所需！
5. 本站所有资源来源于站长上传和网络，如有侵权请邮件联系站长！
6. 没带 [亲测] 代表站长时间紧促,站长会保持每天更新 [亲测] 源码 !
7. 盗版ripro用户购买ripro美化无担保,若设置不成功/不生效我们不支持退款!
8. 本站提供的源码、模板、插件等等其他资源，都不包含技术服务请大家谅解！
9. 如果你也有好源码或者教程，可以到审核区发布，分享有金币奖励和额外收入!
10.如果您购买了某个产品，而我们还没来得及更新，请联系站长或留言催更，谢谢理解 !
GG资源网 » WordPress网站下拉翻页无限加载下一页文章列表功能制作方法
