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

2021-05-22 0 1,499 百度已收录

最近给某个客户定制主题时需要实现无限下拉加载功效,想通过几行代码把自己的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() . '/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 + '/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.     });

收藏 (0) 打赏

感谢您的支持,我会继续努力的!

打开微信/支付宝扫一扫,即可进行扫码打赏哦,分享从这里开始,精彩与您同在
点赞 (0)

1. 本站所有资源来源于用户上传和网络,因此不包含技术服务请大家谅解!如有侵权请邮件联系客服!3308869544
2. 本站不保证所提供下载的资源的准确性、安全性和完整性,资源仅供下载学习之用!如有链接无法下载、失效或广告,请联系客服处理,有奖励!
3. 您必须在下载后的24个小时之内,从您的电脑中彻底删除上述内容资源!如用于商业或者非法用途,与本站无关,一切后果请用户自负!
4. 如果您也有好的资源或教程,您可以投稿发布,成功分享后有猫币奖励和额外收入!

主题镇 WP教程 WordPress文章下拉自动无限翻页方式 https://zhutizhen.com/14694.html

永远为用户服务的镇长!

常见问题
  • 本站所有资源版权均属于原作者所有,这里所提供资源均只能用于参考学习用,请勿直接商用。若由于商用引起版权纠纷,一切责任均由使用者承担。
查看详情
  • 最常见的情况是下载不完整: 可对比下载完压缩包的与网盘上的容量,若小于网盘提示的容量则是这个原因。这是浏览器下载的bug,建议用百度网盘软件或迅雷下载。若排除这种情况,可在对应资源底部留言,或联络我们。
查看详情

相关文章