也想出现在这里?联系我们

WordPress 滚动自动加载分页数据

2024.01.18 wordpress教程
  • 文章介绍
  • 升级版本
  • 评价&建议

如果你想为WordPress的文章或其他内容实现滚动自动加载分页数据(又称无限滚动),有很多方法可以达到这一目的。以下是一个简单的实施方案:

1. 使用插件

最简单的方式是使用专门为此设计的插件。例如,Ajax Load MoreWP Infinite Scroll Posts 是两个受欢迎的插件,可以帮助你实现此功能。

2. 手动实施

如果你不想使用插件,也可以手动实施这个功能。以下是一个基础的步骤:

  1. 修改主题的functions.php

首先,你需要在你的主题的 functions.php 文件中注册和排队你的JavaScript和CSS。

function enqueue_infinite_scroll_js() {
    if( is_home() || is_archive() ) {
        wp_enqueue_script('infinitescroll', get_template_directory_uri() . '/js/infinitescroll.js', array('jquery'), null, true );
    }
}
add_action('wp_enqueue_scripts', 'enqueue_infinite_scroll_js');
  1. 创建一个新的JavaScript文件

在你的主题的 /js/ 目录中创建一个 infinitescroll.js 文件。

jQuery(document).ready(function($) {
    var canBeLoaded = true,
        bottomOffset = 2000; // 剩余2000像素开始加载下一页

    $(window).scroll(function() {
        if( $(document).scrollTop() > ( $(document).height()  bottomOffset ) && canBeLoaded == true ){
            canBeLoaded = false;
            var data = {
                'action': 'loadmore'
            };
            $.post(ajaxurl, data, function(response) {
                if(response != '') {
                    $('.posts').append(response);
                    canBeLoaded = true;
                }
            });
        }
    });
});
  1. 在functions.php中添加AJAX处理程序

回到你的 functions.php 文件,然后添加以下代码:

function loadmore_ajax_handler(){
    $args = array(
        'posts_per_page' => 3, // 加载每次的帖子数量
        'offset' => isset($_POST['offset']) ? $_POST['offset'] : 0, // 从哪里开始
        'post_type' => 'post'
    );
    $query = new WP_Query( $args );

    if( $query>have_posts() ) :
        while( $query>have_posts() ): $query>the_post();
            get_template_part( 'templateparts/post/content', get_post_format() );
        endwhile;
    endif;
    die;
}

add_action('wp_ajax_loadmore', 'loadmore_ajax_handler'); // 如果是已登录用户
add_action('wp_ajax_nopriv_loadmore', 'loadmore_ajax_handler'); // 如果是访客

注意:这只是一个简化的例子,并不考虑所有可能的边界条件和错误处理。你可能需要根据你的具体情况进行调整。

有用0
  • 2024.01.18初次和大家见面了!

等待您对该主题的建议

发表评论

还能输入240个字

Hi, 欢迎加入Wordpress技术交流群,带你装逼带你飞!

我要入群
也想出现在这里?联系我们
wordpress加速

我来推荐一个更牛逼的给你看看?

  • 猛戳我吧