WordPress 滚动自动加载分页数据
如果你想为WordPress的文章或其他内容实现滚动自动加载分页数据(又称无限滚动),有很多方法可以达到这一目的。以下是一个简单的实施方案:
1. 使用插件
最简单的方式是使用专门为此设计的插件。例如,Ajax Load More
和 WP Infinite Scroll Posts
是两个受欢迎的插件,可以帮助你实现此功能。
2. 手动实施
如果你不想使用插件,也可以手动实施这个功能。以下是一个基础的步骤:
- 修改主题的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');
- 创建一个新的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;
}
});
}
});
});
- 在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'); // 如果是访客
注意:这只是一个简化的例子,并不考虑所有可能的边界条件和错误处理。你可能需要根据你的具体情况进行调整。
声明:本站所有文章资源内容,如无特殊说明或标注,均为采集网络资源。如若本站内容侵犯了原著者的合法权益,可联系本站删除。
仍然有问题? 我们要如何帮助您?