在wordpress网站上无限滚动

<div id="content">
    <!-- 此处为已加载的内容 -->
</div>
<div id="load-more">
    <a href="#" id="load-more-button">加载更多</a>
</div>

<script>
    var page = 2; // 初始化页码
    var loading = false; // 防止重复加载的标志

    function loadMorePosts() {
        if (!loading) {
            loading = true;
            $('#load-more-button').text('加载中...');

            $.ajax({
                url: '<?php echo admin_url("admin-ajax.php"); ?>',
                type: 'POST',
                data: {
                    action: 'load_more_posts',
                    page: page
                },
                success: function(response) {
                    if (response) {
                        $('#content').append(response);
                        $('#load-more-button').text('加载更多');
                        page++;
                        loading = false;
                    } else {
                        $('#load-more-button').text('没有更多内容');
                    }
                }
            });
        }
    }

    $(document).ready(function() {
        $('#load-more-button').click(function(e) {
            e.preventDefault();
            loadMorePosts();
        });
    });
</script>

function load_more_posts() {
    $page = $_POST['page'];

    // 根据页码获取更多的文章内容，可以使用WP_Query或get_posts函数

    // 循环输出文章内容
    if (have_posts()) {
        while (have_posts()) {
            the_post();
            // 输出文章内容的HTML结构
        }
    }

    wp_die();
}
add_action('wp_ajax_load_more_posts', 'load_more_posts');
add_action('wp_ajax_nopriv_load_more_posts', 'load_more_posts');