相信很多人做过很多的尝试，想通过几行代码把自己的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 2 3 4 |
<div class="pagenavi"> <?php next_posts_link('下一页 » ') ?> <?php previous_posts_link('« 上一页') ?> </div> |
3、在当前主题的functions.php文件中，添加以下代码：
代码中间包含了一个gif图像翻页效果的动态图，大家可以要的自己的喜欢，自行制作或是注释掉，这里大挖不再提供GIF图片
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 |
/* 加载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，可根据自己的喜欢修改对应代码）
|
1 2 3 |
.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;} |
