分页加载中ajax,wordpress实现分页Ajax无限加载功能
时间: 2023-06-25 18:04:18 浏览: 85
要实现分页Ajax无限加载功能,可以按照以下步骤进行:
1. 在WordPress主题中创建一个新的页面模板,命名为“ajax-pagination.php”(或者其他你喜欢的名字)。
2. 在模板中添加需要分页的内容。
3. 在模板中添加一个按钮或链接,用于加载更多内容。
4. 使用jQuery编写Ajax代码,将按钮或链接与模板中的内容连接起来。
5. 在functions.php文件中添加一个新的函数,用于处理Ajax请求。
6. 编写一个新的WordPress查询,用于获取下一页的内容。
7. 将查询结果返回给Ajax请求,并将其添加到页面上。
以下是一个简单的示例代码,演示如何实现分页Ajax无限加载功能:
在ajax-pagination.php文件中,添加以下代码:
```
<div id="content">
<?php
$paged = (get_query_var('paged')) ? get_query_var('paged') : 1;
$args = array(
'post_type' => 'post',
'posts_per_page' => 3,
'paged' => $paged
);
$query = new WP_Query($args);
if ($query->have_posts()) :
while ($query->have_posts()) : $query->the_post();
// 输出文章内容
endwhile;
endif;
?>
</div>
<div id="load-more">
<a href="#">加载更多</a>
</div>
```
在JavaScript文件中,添加以下代码:
```
jQuery(document).ready(function($) {
$('#load-more a').click(function() {
var button = $(this),
data = {
'action': 'load_more',
'query': loadmore_params.posts,
'page': loadmore_params.current_page
};
$.ajax({
url: loadmore_params.ajaxurl,
data: data,
type: 'POST',
beforeSend: function(xhr) {
button.text('正在加载...');
},
success: function(data) {
if (data) {
button.text('加载更多').prev().before(data);
loadmore_params.current_page++;
if (loadmore_params.current_page == loadmore_params.max_page)
button.remove();
} else {
button.remove();
}
}
});
return false;
});
});
```
在functions.php文件中,添加以下代码:
```
add_action('wp_ajax_load_more', 'load_more');
add_action('wp_ajax_nopriv_load_more', 'load_more');
function load_more() {
$query = json_decode(stripslashes($_POST['query']), true);
$query['paged'] = $_POST['page'] + 1;
$posts = new WP_Query($query);
if ($posts->have_posts()) {
while ($posts->have_posts()) {
$posts->the_post();
// 输出文章内容
}
}
die;
}
```
以上代码仅仅是一个示例,你需要根据自己的实际情况进行修改和调整。但是,这个示例可以帮助你了解如何使用WordPress和Ajax来实现分页Ajax无限加载功能。