根据自定义查询加载更多按钮获取WordPress帖子

Question

我在页面上有一个2行(3-3列)的部分。因此，在前5个帖子中显示，其中一个是广告图像。

所以在第一行中，2个帖子显示了广告图像。在第二行，3个帖子显示

我的代码是-

$args = array(  
'post_type' => 'products',
'post_status' => 'publish',
'posts_per_page' => 5,
'orderby' => 'ID',
'order' => 'DESC',
);
$posts = new WP_Query( $args );

所以从这个代码中，我显示了5个帖子和1个广告图像，它工作得很好。

但是当我点击加载更多的按钮，然后我需要获取6个帖子，每次2行(一行3个帖子)将被添加。

JS代码是

var page = 2;
var ppp = 5;
jQuery("body").on("click", ".btnLoadMoreblog", function(){
var ajaxUrl = document.location.origin + '/';
var ajaxurla = ajaxUrl + "wp-admin/admin-ajax.php";
jQuery('.loading-image img').css('display', 'block');
jQuery.post(ajaxurla, {
action: "loadmoreblog",
ppp: ppp,
page: page,
})
.done(function (postsa) {
jQuery('.viewmore-btn').before(postsa);
page++;
})
});

在动作中，这是代码

$ppp = $_POST["ppp"];
$page = $_POST["page"];
$args = array(  
'post_type' => 'products',
'post_status' => 'publish',
'posts_per_page' => $ppp,
'paged' => $page,
'orderby' => 'ID',
'order' => 'DESC',
);
$posts = new WP_Query( $args );

帖子正在正确抓取，因为我在ppp变量中传递5，但问题是一列是空的。

我想在ajax加载上一次获取6个帖子。如果我传入var ppp = 6;那么帖子不能正确抓取

Answer 1

这是我如何使用现有的自定义WP_Query()加载新帖子到同一页面。

此方法也适用于修改WP_Query()的自定义url变量。

请参阅下面提供的代码中的注释。

这里是查询php与循环和加载更多的按钮…

<?php 
// exclude post id's (default false)
$excludePosts = isset($_REQUEST['excludePosts']) ? $_REQUEST['excludePosts'] : false;
// posts per page and load more posts to add
$postsPerPage = 20;
// products query args
$args = [
'post_type'      => 'products',
'post_status'    => 'publish',
'orderby'        => 'ID',
'order'          => 'DESC',
'posts_per_page' => $postsPerPage,
// here is the trick, exclude current posts from query when using jQuery $.post()
'post__not_in'   => $excludePosts
];
// products query
$products = new WP_Query($args);
?>
<?php // we need this, a parent container for products ?>
<div id="products_archive">
<?php // if we have query results ?>
<?php if( $products->have_posts() ): ?>
<?php // loop our query results (products) ?>
<?php while( $products->have_posts()): $products->the_post() ?>
<?php // your product with a data-product attribute and ID as the value ?>
<?php // we need data-product to find all the currently loaded product ID's ?>
<article data-product="<?=get_the_id()?>">
<?php the_title(); ?>
<?php the_content(); ?>
</article>
<?php endwhile; ?>

<?php // if we have more posts to load based on current query, then show button ?>
<?php if( $products->max_num_pages > 1 ): ?>
<button id="load_more_products">
Load more products
</button>
<?php endif; ?>
<?php // if we have no query results ?>
<?php else: ?>
Sorry no products found.

<?php endif; ?>
</div>
<?php // we need this, to pass the posts per page value to external jQuery script ?>
<script>
window.postsPerPage = '<?=$postsPerPage?>';
</script>

这是使用$.post()的jQuery脚本来重新加载当前页面查询，不包括已经加载的产品。

// load more products button click event
$(document).on('click', '#load_more_products', function() {
// our click button
let $btn = $(this);
// disable button (you can add spinner to button here too)
$btn.prop('disabled', true);
// set current products empty array
let currentProducts = [];
// loop thought trough all products in products in archive
$('[data-product]', '#products_archive').each( function(key, elem) {
// current product push elements to current products array
currentProducts.push( $(elem).data('product') );
});
// re post current page running the query again
$.post('', {
// pass this data to our php var $excludePosts to modify the page WP_Query
excludePosts: currentProducts
// html param passed data is full html of our reloaded page
}, function(html) {
// find all the product article elements via data-product attribute in html 
let $newProducts = $('#products_archive [data-product]', html);
// if new products length is less than our window.postsPerPage variable value
if( $newProducts.length < postsPerPage ) {
// then hide the load more button
$btn.hide();
}
// insert new products after last current data-product article
$newProducts.insertAfter( $('[data-product]', '#products_archive').last() );
})
// once our new products have been inserted
.done(function() {
// do stuff here to lazy load images etc...
// re-enable button (and stop button spinner if you have one)
$btn.prop('disabled', false);
});
});

根据当前HTML的结构和新获取的产品HTML的位置/附件，您需要调整脚本以适应。

但是如果你遵循我的代码注释，这应该会让你走上正确的轨道。

祝你好运!