WordPress文章下拉自动无限翻页方式

最近给某个客户定制主题时需要实现无限下拉加载功能,想通过几行代码把自己的 wordpress 主题修改成文章自动无限下拉的形式,但是苦于功能不能实现,也不清楚是卡在哪个步骤了,今天给大家分享两个零距离的傻瓜版,来帮助大家完成这个功能。

方法一:

以下这个方法对于其它的教程优势在于,很明确的给到了翻页的代码,因为其它的教程都是以翻页的 js 及功能为例子,这里比较好的是提供了一个完整的翻页代码,可以直接应用,当然比较核心的步骤也同步给到了大家。希望这次大家可以操作成功。一共分三个步骤,复制粘贴,然后查找自己的每篇的文章样式 class,和包含文章的 class 样式替换即可。

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

  1. <script src="https://cdn.bootcss.com/jquery-infinitescroll/2.0b2.120520/jquery.infinitescroll.min.js"></script>

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

  1. <div class="pagenavi">
  2. 	<?php next_posts_link('下一页 » ') ?>
  3. 	<?php previous_posts_link('« 上一页') ?>
  4. </div>

3、在当前主题的 functions.php 文件中,添加以下代码:

代码中间包含了一个 gif 图像翻页效果的动态图,大家可以要的自己的喜欢,自行制作或是注释掉,这里大挖不再提供 GIF 图片:

  1. /*
  2. 加载infinite scroll插件脚本
  3. */
  4. function infinitescroll_js() {
  5.     wp_register_script('infinite_scroll', get_stylesheet_directory_uri() . 'https://img.2kss.com/js/jquery.infinitescroll.min.js', array('jquery'), null, true);
  6.     if (!is_singular()) {
  7.         wp_enqueue_script('infinite_scroll');
  8.     }
  9. }
  10. add_action('wp_enqueue_scripts', 'infinitescroll_js');
  11. /*
  12. 初始化infinite scroll插件配置参数
  13. */
  14. function infinite_scroll_js() {
  15.     if (!is_singular() ) {
  16.         ?>
  17.         <script type="text/javascript">
  18.         jQuery(document).ready(function(){
  19.             var infinite_scroll = {
  20.                 loading: {
  21.                     img: "<?php echo get_stylesheet_directory_uri(); ?>/images/ajax-loader.gif",
  22.                     msgText: "加载中...",
  23.                     finishedMsg: "已加载所有产品..."
  24.                 },
  25.                 nextSelector:".pagenavi a",
  26.                 navSelector:".pagenavi",
  27.                 itemSelector:".post",
  28.                 contentSelector:".main",
  29.             };
  30.             jQuery( infinite_scroll.contentSelector ).infinitescroll( infinite_scroll );
  31.         });
  32.         </script>
  33.         <?php
  34.     }
  35. }
  36. add_action('wp_footer', 'infinite_scroll_js', 100);

参数说明:

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

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

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

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

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

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

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

  1. .pagenavi,#infscr-loading {text-align:center; font-size:0.75em;}
  2. .pagenavi a {padding:6px 12px; background:#F04848; color:#fff; border:1px solid #dedede; border-right:none; overflow:hidden;}
  3. #infscr-loading img {display:block; margin:0 auto; text-align:center;}

方法二:

以上都是用某个 js 插件来实现了,下面教大家一个不用插件实现的方法,首先在 php 里加上相关代码:

  1.     <div class="article-list mobantu" id="article-list">
  2.     <?php
  3.     $paged = (get_query_var('paged')) ? get_query_var('paged') : 1;
  4.     $args = array(
  5.     'caller_get_posts' => 1,
  6.     'paged' => $paged
  7.     );
  8.     query_posts($args);
  9.     while ( have_posts() ) : the_post();
  10.     get_template_part( 'content', get_post_format() );
  11.     endwhile; wp_reset_query();
  12.     ?>
  13.     </div>
  14.     <?php
  15.     $next_page = get_next_posts_link('加载更多');
  16.     if($next_page) echo '<div class="article-paging mobantu">'.$next_page.'</div>';
  17.     ?>

然后,在 js 里加上相关代码(前提需要加载了 jquery,且网站使用了伪静态分页):

  1.     $('.article-paging > a').on('click',function(){ //点击实现加载更多,你可以根据自己需要改成下拉自动加载
  2.     var next_url = $(this).attr("href");
  3.     var next_text = $(this).text();
  4.     if(next_text == '加载更多'){
  5.     $(this).text('加载中...');
  6.     $.ajax({
  7.     type: 'get',
  8.     url: next_url + '#article-list',
  9.     success: function(data){
  10.     result = $(data).find("#article-list .article-item");
  11.     next_link = $(data).find(".article-paging > a").attr("href");
  12.     //$(this).attr("href", next_url);
  13.     if (next_link != undefined){
  14.     $('.article-paging > a').attr("href", next_link);
  15.     $('.article-paging > a').text('加载更多');
  16.     }else{
  17.     $(".article-paging").remove();
  18.     }
  19. 
    
  20.     $(function(){
  21.     $("#article-list").append(result.fadeIn(300));
  22.     $('.thumb').lazyload({
  23.     data_attribute: 'src',
  24.     placeholder: _BGJ.uri + 'https://img.2kss.com/static/img/thumbnail.png',
  25.     threshold: 400
  26.     });
  27.     });
  28. 
    
  29.     $(function() {
  30.     if (next_url.indexOf("page") < 1) {
  31.     $("#article-list").HTML('');
  32.     }
  33.     $("#article-list").append(result.fadeIn(200));
  34.     });
  35.     }
  36.     });
  37.     }
  38.     return false;
  39.     });

原创文章,作者:DavidWu,如若转载,请注明出处:https://www.davidwu.net/archives/89013

WordPress安全防护插件
服务项目 服务内容 收费标准(元)
开发定制 WordPress主题/插件开发定制 (以最终需求为准)
主题/插件汉化 汉化团队WordPress主题/插件,翻译率95% (以标的主题/插件的句子数量为准)
服务器环境配置 基于您现有服务器,搭建配置网站运行环境,结合我们多年来实战经验,可完美支持WordPress等PHP程序运行,并配置伪静态规则、优化目录权限等问题。服务器我们强烈推荐使用Linux系统。 100元/次
网站托管 若贵站目前尚无技术人员,无法完成服务器环境配置,可选择我们的网站托管服务,直接交付正常运行的WordPress站点,并且无需担心服务器的后续维护工作,一切都由我们来帮您完成。 标配套餐:1000元/年/站点 高配套餐:联系客服获取
网站加速优化 从服务器后端配置优化到WordPress数据库缓存、前端页面缓存、JS和CSS压缩合并,全方位优化网站加载速度,实现秒开。(此服务仅针对(云)服务器/VPS) 500元/次(仅站内优化200元/次)
主题配置 本站所有主题均支持,可快速实现,若有任何问题可以咨询客服解决,若您希望我们提供配置服务,可选购此服务。 英文主题安装 60元/次 汉化主题安装 30元/次
HTTPS配置 HTTPS已经不断普及,并且有着更高的安全性以及SEO上的优待。该服务收取的为服务费,SSL证书产生的费用请自行承担。 100元/次
网站搬家 迁移网站所有文件和数据库信息、网站相关配置的调整、以及迁移中的疑难问题故障排除。 标准收费:500元/次 若网站数据量大,需协商
网站运维 提供整站的运维服务,保证网站正常运行。包含:网站故障定位及排除、网站数据备份和恢复、网站攻击及木马等问题的处理等 标准收费:2000元/年 IP 5000以上需协商

发表评论

电子邮件地址不会被公开。 必填项已用*标注

51建站客服微信二维码
点击这里购买