WordPress不使用插件实现滚动自动无限分页

2022-06-30 0 714

正文：

WordPress 自动加载分页数据插件无限滚动。这个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:前一篇文章链接 CSS 样式名+一个标签(类选择器或 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;}

赏

微信扫一扫