Как реализовать разбиение на страницы на пользовательский WP_Query Ajax

Я хочу разбивать страницы WordPress в пользовательском цикле с помощью Ajax, поэтому, когда я нажимаю на загрузку, появятся новые сообщения о кнопках.

Мой код:

<?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, это будет стартовый код.

Пользовательский обработчик 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');