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

PetitQ WordPress教程 2022-4-03 1.08K 0 0

前面云模板介绍过的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 默认“上一页、下一页”链接生效

```
<div class="pagenavi">
```

	<?php next_posts_link('下一页 &raquo; ') ?>

	<?php previous_posts_link('&laquo; 上一页') ?>

```
</div>
```

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

```
/*
```
```
加载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 选择器）

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

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

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

已有 270 人购买

永久更新：
演示数据：

立即购买

查看演示升级 VIP 立刻购买

炫酷企业建站作品展示WordPress中文模板

Supro - 极简电商网站模板WordPress汉化主题

Photon - 全屏摄影相册产品展示网站WordPress汉化主题

WordPress教程

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

实现步骤：

参数说明：

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

相关文章

WordPress添加自定义文章类型

WordPress后台页面里添加上传按钮

WordPress页面或文章手动添加或自定义相关文章

发表回复取消回复

热销模板

WordPress教程

实现步骤：

参数说明：

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

相关文章

发表回复 取消回复

热销模板

发表回复取消回复