WordPress教程

WordPress 非插件实现滚动自动无限分页

阿里云

前面云模板介绍过的wordpress 滚动自动加载分页数据插件 Infinite Scroll,该 WP 插件是把 jQuery 插件 jquery.infinitescroll.js 制作成 wordpress 插件,而且现在介绍的是直接把 jquery.infinitescroll.js 集成到主题中,减少 wordpress 插件的使用。

实现步骤:

1、下载 jQuery 插件 jquery.infinitescroll.js,解压后,把根目录的 jquery.infinitescroll.min.js 文件上传至当前主题的 js 文件夹;

也想出现在这里?联系我们
创客主机

2、下载动态图片(把鼠标移动图片上,右击,图片另存为),把该图片上传至当前主题的 images 文件夹;

非 wordpress 插件实现滚动自动无限分页

3、分页代码:该方法只对 wordpress 默认“上一页、下一页”链接生效

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

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

  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 选择器)

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

5、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;}

WordPress 非插件实现滚动自动无限分页

已有 353 人购买
查看演示升级 VIP立刻购买

收藏
(0)

发表回复

热销模板

Ashade - 作品展示摄影相册WordPress汉化主题
LensNews

本站承接 WordPress / PbootCMS / DedeCMS 等
系统建站、仿站、开发、定制等业务!