我想使用Ajax在自定义循环中对WordPress帖子进行分页,因此当我单击“加载”时,将出现更多按钮帖子。
我的代码:
<?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(); ?>
此代码不分页。有一个更好的方法吗?
该Load More按钮需要向ajax服务器发送请求,并且可以使用jQuery或纯JavaScript将返回的数据添加到现有内容中。假设您使用jQuery,这将是入门代码。
Load More
ajax
定制Ajax处理程序(客户端)
<a href="#">Load More</a>
改成:
<a id="more_posts" href="#">Load More</a>
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>
定制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');