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

Posted 2023-05-09

【中文标题】根据带有加载更多按钮的自定义查询获取 WordPress 帖子

【英文标题】：Fetch WordPress Posts according to custom query with load more button

【发布时间】：2021-12-09 22:21:17

【问题描述】：

我在页面上有一个 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;那么帖子没有正确获取。

【问题讨论】：

这是在加载更多点击之前 - awesomescreenshot.com/image/… 在加载更多点击之后。 awesomescreenshot.com/image/… 未正确获取意味着一开始我使用posts_per_page = 5，在ajax 中，如果我使用5，那么它显示一列是空的。如果我使用 6，那么它将从 7number 帖子中获取。就像我有这些帖子 p1,p2,p3,p4,p5,p6,p7,p8,p9,p10 如果我使用 ppp = 6 那么在单击加载更多时它会从 p7 获取并跳过 p6 所以这是问题

你看到我的解决方案了吗？应该可以很好地解决您的问题。

【参考方案1】：

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

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

在下面提供的代码中查看我的 cmets。

这是带有循环和加载更多按钮的查询 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 的放置/附加，您需要调整脚本以适应。

但是，如果您遵循我的代码 cmets，这应该会让您走上正轨。

祝你好运！