在使用 WordPress 建网站时，如果后台文章比较多的情况下，会使用分页功能来制作分页按钮。除了这种常规的分页按钮之外，还有一种分页就是下拉无限加载下一页文章。效果如下图：
下面就来介绍一下 WordPress 网站点击加载下一页文章列表的方法。也可以将你网站原来的分页按钮转换成下拉加载。
方法/步骤
第一步：将文章列表循环代码使用以下的循环代码；如果本身就是这种循环代码，就不用替换；（这个循环适用于首页和分类页）
- <?php if (have_posts()) : ?>
- <?php while (have_posts()) : the_post(); ?>
- <?php endwhile;?>
- <?php endif; ?>
如果要在某个 PAGE 单页中加载指定分类的文章列表，需要用以下的循环代码：
- <?php
- $paged = (get_query_var('paged')) ? get_query_var('paged') : 1;
- $args = array(
- 'caller_get_posts' => 1,
- 'paged' => $paged,
- 'cat' => 'ID号',
- );
- query_posts($args);
- while ( have_posts() ) : the_post();?>
- <?php endwhile; wp_reset_query(); ?>
第二步：在文章列表所在的父 HTML Div 标签，添加一个 class 名为 index001；
第三步：在循环中的底层模板加一个 class 名为 excerpt-sticky；
第四步：在循环代码结束的下方，放在“加载更多”的按钮代码；
- <div class="next-page"> <?php
- $next_page = get_next_posts_link('加载更多');
- if($next_page) echo $next_page;
- ?>
- </div>
第五步：将以下的 CSS 样式添加到自己网站模板的 style.css 中；
- .next-page{text-align:center}
- .next-page a{ margin: 10px auto;display: inline-block;padding: 5px 25px;background-color: #ddd;color: #666;border-radius: 2px;opacity: .88;font-size: 14px;}
- .next-page a:hover{color:#d9534f;}
第五步：在代码最下方，放上以下的 JS 代码，来获取下一页的文章列表，并且加载到上一页内容下面，以此类推。
- <script>
- $('.next-page > a').on('click',function(){ //这是点击实现加载更多
- var next_url = $(this).attr("href");
- var next_text = $(this).text();
- if(next_text == '加载更多'){
- $(this).text('加载中...');
- $.ajax({
- type: 'get',
- url: next_url,
- success: function(data){
- result = $(data).find(".index001 .excerpt-sticky");
- next_link = $(data).find(".next-page > a").attr("href");
- //$(this).attr("href", next_url);
- if (next_link != undefined){
- $('.next-page > a').attr("href", next_link);
- $('.next-page > a').text('加载更多');
- }else{
- $(".next-page").remove();
- }
- $(function() {
- if (next_url.indexOf("page") < 1) {
- $(".index001").html('');
- }
- $(".index001").append(result.fadeIn(200));
- });
- }
- });
- }
- return false;
- });
- </script>
这样就可以在自己做网站时，制作出这样的无限点击加载翻页功能了。
文章連結：https://www.wuyanshuo.cn/1303.html
更新時間：2022年9月12日
1、本站所有資源均不添加推廣檔案或浮水印，壓縮包內若有廣告檔案和浮水印請勿輕易相信。
2、本站資源均為兩層壓縮，第一層7z（尾碼若為wys，請自行修改為7z）有解壓密碼； 第二層zip或cbz，無解壓密碼，可直接使用漫畫類軟件程式查看； 詳情可參攷解壓教程。
3、本站大部分內容均收集於網絡！ 若內容侵犯到您的權益，請發送郵件至：admin#wysacg.top我們將第一時間處理！ 資源所需價格並非資源售賣價格，是收集、整理、編輯詳情以及本站運營的適當補貼，並且本站不提供任何免費技術支援。 所有資源僅限於參攷和學習，版權歸原作者所有！
