WordPress列表文章下拉自动无限翻页效果（AJAX更换传统的翻页方式

文章目录隐藏

实现原理

通过引入 jQuery Infinite Scroll 插件，实现无限加载分页效果。

详细步骤

1. 检查是否引入 jQuery

首先确保你的主题中引入了 jQuery。如果没有，需要加载一个 jQuery 文件以及 Infinite Scroll 插件。

在 header.php 或 footer.php 中引入：

<script src="https://cdn.bootcss.com/jquery/3.5.1/jquery.min.js"></script>
<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 文件中添加以下代码，加载 Infinite Scroll 插件并初始化配置参数：

// 加载分页无限下拉
function infinitescroll_js() {
    wp_register_script('infinite_scroll', 'https://cdn.bootcss.com/jquery-infinitescroll/2.0b2.120520/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);

4. 添加 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 站点中实现了无限加载分页效果，增强了用户体验，且代码已经过整理和修正，确保没有错误。