WordPress 实现分页Ajax无限加载功能
要在 WordPress 中实现分页Ajax无限加载功能,您可以按照以下步骤进行操作:
第一步:准备主题文件
-
首先,确保您使用的主题支持Ajax加载更多功能。如果您的主题不支持,您可能需要自定义主题文件。
-
在您的主题文件夹中创建一个名为
functions.php
的文件,如果该文件已存在,则跳过此步骤。 -
打开
functions.php
文件,并添加以下代码来启用Ajax:
function load_more_scripts() {
wp_enqueue_script('jquery');
wp_enqueue_script('loadmore', get_stylesheet_directory_uri() . '/js/loadmore.js', array('jquery'), null, true);
wp_localize_script('loadmore', 'loadmore_params', array(
'ajaxurl' => admin_url('adminajax.php'),
'posts' => json_encode($wp_query>query_vars),
'current_page' => get_query_var('paged') ? get_query_var('paged') : 1,
'max_page' => $wp_query>max_num_pages
));
add_action('wp_enqueue_scripts', 'load_more_scripts');
}
第二步:创建Ajax加载更多脚本
-
在您的主题文件夹中创建一个名为
js
的文件夹,如果该文件夹已存在,则跳过此步骤。 -
在
js
文件夹中创建一个名为loadmore.js
的文件,然后添加以下代码:
jQuery(function($){
$('.loadmorebutton').click(function(){
var button = $(this),
data = {
'action': 'loadmore',
'query': loadmore_params.posts,
'page' : loadmore_params.current_page
};
$.ajax({
url : loadmore_params.ajaxurl,
data : data,
type : 'POST',
success : function( response ) {
if( response ) {
button.text( '加载更多' ).prev().before(response);
loadmore_params.current_page;
if ( loadmore_params.current_page == loadmore_params.max_page ) {
button.remove();
}
} else {
button.remove();
}
}
});
});
});
第三步:创建Ajax回调函数
- 打开
functions.php
文件,添加以下代码来创建Ajax回调函数:
function loadmore_ajax_handler(){
$query_vars = json_decode( stripslashes( $_POST['query'] ), true );
$query_vars['paged'] = $_POST['page'] 1;
$query_vars['post_status'] = 'publish';
query_posts( $query_vars );
if( have_posts() ) :
while( have_posts() ): the_post();
// 在这里输出您的文章内容
endwhile;
endif;
die;
}
add_action('wp_ajax_loadmore', 'loadmore_ajax_handler');
add_action('wp_ajax_nopriv_loadmore', 'loadmore_ajax_handler');
第四步:在文章循环中添加加载更多按钮
在您的文章循环(例如,博客页面或文章存档页面)中添加一个按钮,以便用户点击加载更多文章。您可以在您的主题文件中使用以下代码:
<div class="postscontainer">
<! 此处输出您的文章列表 >
</div>
<button class="loadmorebutton">加载更多</button>
确保在上述代码中的<! 此处输出您的文章列表 >
部分输出您的文章内容。
现在,您的WordPress网站应该具有分页Ajax无限加载功能。当用户点击“加载更多”按钮时,将通过Ajax加载更多文章,而无需刷新整个页面。
请注意,这只是一个基本示例,您可以根据您的主题和需求对其进行自定义。此外,确保在实现此功能之前备份您的主题文件和数据库,以防发生意外错误。
声明:本站所有文章资源内容,如无特殊说明或标注,均为采集网络资源。如若本站内容侵犯了原著者的合法权益,可联系本站删除。
仍然有问题? 我们要如何帮助您?