[英]How to implement pagination on a custom WP_Query Ajax
I want to paginate my WordPress posts in a custom loop with Ajax, so when I click on load more button posts will appear. 我想用Ajax在自定义循环中对我的WordPress帖子进行分页,所以当我点击加载时会出现更多按钮帖子。
My code: 我的代码:
<?php
$postsPerPage = 3;
$args = array(
'post_type' => 'post',
'posts_per_page' => $postsPerPage,
'cat' => 1
);
$loop = new WP_Query($args);
while ($loop->have_posts()) : $loop->the_post();
?>
<h1><?php the_title(); ?></h1>
<p>
<?php the_content(); ?>
</p>
<?php
endwhile;
echo '<a href="#">Load More</a>';
wp_reset_postdata();
?>
This code does not paginate. 此代码不分页。 Is there a better way to do this? 有一个更好的方法吗?
The Load More
button needs to send a ajax
request to the server and the returned data can be added to the existent content using jQuery or plain javascript. “ Load More
按钮需要向服务器发送ajax
请求,并且可以使用jQuery或纯JavaScript将返回的数据添加到现有内容中。 Assuming your using jQuery this would starter code. 假设您使用jQuery,这将启动代码。
Custom Ajax Handler (Client-side) 自定义Ajax处理程序(客户端)
<a href="#">Load More</a>
Change to: 改成:
<a id="more_posts" href="#">Load More</a>
Javascript: - Put this at the bottom of the file. Javascript: - 把它放在文件的底部。
//</script type="text/javascript">
var ajaxUrl = "<?php echo admin_url('admin-ajax.php')?>";
var page = 1; // What page we are on.
var ppp = 3; // Post per page
$("#more_posts").on("click",function(){ // When btn is pressed.
$("#more_posts").attr("disabled",true); // Disable the button, temp.
$.post(ajaxUrl, {
action:"more_post_ajax",
offset: (page * ppp) + 1,
ppp: ppp
}).success(function(posts){
page++;
$(".name_of_posts_class").append(posts); // CHANGE THIS!
$("#more_posts").attr("disabled",false);
});
});
//</script>
Custom Ajax Handler (Server-side) PHP - Put this in the functions.php file. 自定义Ajax处理程序(服务器端) PHP - 将它放在functions.php文件中。
function more_post_ajax(){
$offset = $_POST["offset"];
$ppp = $_POST["ppp"];
header("Content-Type: text/html");
$args = array(
'post_type' => 'post',
'posts_per_page' => $ppp,
'cat' => 1,
'offset' => $offset,
);
$loop = new WP_Query($args);
while ($loop->have_posts()) { $loop->the_post();
the_content();
}
exit;
}
add_action('wp_ajax_nopriv_more_post_ajax', 'more_post_ajax');
add_action('wp_ajax_more_post_ajax', 'more_post_ajax');
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.