WordPress文章下拉自动无限翻页方式
以下代码由PHP站长网 52php.cn收集自互联网现在PHP站长网小编把它分享给大家,仅供参考 最近给某个客户定制主题时需要实现无限下拉加载功能,想通过几行代码把自己的 wordpress 主题修改成文章自动无限下拉的形式,但是苦于功能不能实现,也不清楚是卡在哪个步骤了,今天给大家分享两个零距离的傻瓜版,来帮助大家完成这个功能。 方法一:以下这个方法对于其它的教程优势在于,很明确的给到了翻页的代码,因为其它的教程都是以翻页的 js 及功能为例子,这里比较好的是提供了一个完整的翻页代码,可以直接应用,当然比较核心的步骤也同步给到了大家。希望这次大家可以操作成功。一共分三个步骤,复制粘贴,然后查找自己的每篇的文章样式 class,和包含文章的 class 样式替换即可。 1、本功能主要应用了 jQuery 插件 jquery.infinitescroll.js,通过大挖给大家提供了 CDN 的链接,方便直接应用到 HEAD 内即可: <script src="https://cdn.bootcss.com/jquery-infinitescroll/2.0b2.120520/jquery.infinitescroll.min.js"></script> 2、替换分页代码:将以下分页的代码替换到当前分页位置上: <div class="pagenavi"> <?php next_posts_link('下一页 ? ') ?> <?php previous_posts_link('? 上一页') ?> </div> 3、在当前主题的 functions.php 文件中,添加以下代码: 代码中间包含了一个 gif 图像翻页效果的动态图,大家可以要的自己的喜欢,自行制作或是注释掉,这里大挖不再提供 GIF 图片: /* 加载infinite scroll插件脚本 */ function infinitescroll_js() { wp_register_script('infinite_scroll',get_stylesheet_directory_uri() . '/js/jquery.infinitescroll.min.js',array('jquery'),null,true); if (!is_singular()) { wp_enqueue_script('infinite_scroll'); } } add_action('wp_enqueue_scripts','infinitescroll_js'); /* 初始化infinite scroll插件配置参数 */ function infinite_scroll_js() { if (!is_singular() ) { ?> <script type="text/javascript"> jQuery(document).ready(function(){ var infinite_scroll = { loading: { img: "<?php echo get_stylesheet_directory_uri(); ?>/images/ajax-loader.gif", msgText: "加载中...", finishedMsg: "已加载所有产品..." }, nextSelector:".pagenavi a", navSelector:".pagenavi", itemSelector:".post", contentSelector:".main", }; jQuery( infinite_scroll.contentSelector ).infinitescroll( infinite_scroll ); }); </script> <?php } } 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,可根据自己的喜欢修改对应代码) .pagenavi,#infscr-loading {text-align:center; font-size:0.75em;} .pagenavi a {padding:6px 12px; background:#F04848; color:#fff; border:1px solid #dedede; border-right:none; overflow:hidden;} #infscr-loading img {display:block; margin:0 auto; text-align:center;} 方法二:以上都是用某个 js 插件来实现了,下面教大家一个不用插件实现的方法,首先在 php 里加上相关代码: <div class="article-list mobantu" id="article-list"> <?php $paged = (get_query_var('paged')) ? get_query_var('paged') : 1; $args = array( 'caller_get_posts' => 1, 'paged' => $paged ); query_posts($args); while ( have_posts() ) : the_post(); get_template_part( 'content',get_post_format() ); endwhile; wp_reset_query(); ?> </div> <?php $next_page = get_next_posts_link('加载更多'); if($next_page) echo '<div class="article-paging mobantu">'.$next_page.'</div>'; ?> 然后,在 js 里加上相关代码(前提需要加载了 jquery,且网站使用了伪静态分页): $('.article-paging > 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 + '#article-list', success: function(data){ result = $(data).find("#article-list .article-item"); next_link = $(data).find(".article-paging > a").attr("href"); //$(this).attr("href",next_url); if (next_link != undefined){ $('.article-paging > a').attr("href",next_link); $('.article-paging > a').text('加载更多'); }else{ $(".article-paging").remove(); } ? $(function(){ $("#article-list").append(result.fadeIn(300)); $('.thumb').lazyload({ data_attribute: 'src', placeholder: _BGJ.uri + '/static/img/thumbnail.png', threshold: 400 }); }); ? $(function() { if (next_url.indexOf("page") < 1) { $("#article-list").html(''); } $("#article-list").append(result.fadeIn(200)); }); } }); } return false; }); 以上内容由PHP站长网【52php.cn】收集整理供大家参考研究如果以上内容对您有帮助,欢迎收藏、点赞、推荐、分享。 (编辑:李大同) 【声明】本站内容均来自网络,其相关言论仅代表作者个人观点,不代表本站立场。若无意侵犯到您的权利,请及时与联系站长删除相关内容! |