Wordpress 循环 - 制作一张包含 4 种产品的新幻灯片

Question

我正在尝试使用 WP 循环和弹性滑块创建自定义产品滑块。我已经设法获得了一个带有产品的滑块，但目前，它每张幻灯片只显示 1 个，而不是我想要的每张幻灯片 4 个。

<div id="slider" class="flexslider">
  <ul class="slides">
    <?php
      $args = array( 'post_type' => 'product',
                                    'post_per_page' => 12              
                   );
      $loop = new WP_Query( $args );
      $counter = 0;
      while ( $loop->have_posts() ) : $loop->the_post(); global $product; 
      if($counter % 4 == 0) : ?>
        <li>
          <a id="id-<?php the_id(); ?>" href="<?php the_permalink(); ?>" title="<?php the_title(); ?>">
      <?php
        if (has_post_thumbnail( $loop->post->ID ))
          echo get_the_post_thumbnail($loop->post->ID, 'shop_catalog');
        else echo '<img src="'.woocommerce_placeholder_img_src().'" alt="Placeholder" width="65px" height="115px" class="attachment-woocommerce_thumbnail size-woocommerce_thumbnail"/>';
      ?>
      <span class="price">
        <h2 class="woocommerce-loop-product__title">
          <?php the_title(); ?>
        </h2>
      <span class="woocommerce-Price-amount amount">
        <span class="woocommerce-Price-currencySymbol"></span>
        <?php echo $product->get_price_html(); ?>
        <br />
      </span>
    </a>
  </span>
  <?php
    woocommerce_template_loop_add_to_cart( $loop->post, $product ); 
    endif;
    $counter++;
    endwhile; ?>
  </li>
  <?php wp_reset_query(); ?>
</ul>
</div>

我很接近，但我确定我错过了一些东西。我需要每个列表项中的 4 个产品。

Answer 1

我立即注意到的一件事是，您在"while"内打开li标签，在"while"之外关闭li标签，这可能很简单，也许检查html并查看是否还有其他内容。

好的，这里有一个简单的解决方法，你可以重构它以使其更整洁，但逻辑就在那里：

<?php
$counter = 0;
while ( $loop->have_posts() ) : $loop->the_post(); global $product;?>
    <?php if($counter % 4 == 0): echo '<li>'; endif; ?>
        <a href="#">WooCommerce Product</a>
    <?php if($counter % 4 == 4): echo '</li>'; endif; ?>
    <?php
    $counter++;
    if($counter === 4) : $counter = 0; endif;
endwhile;
?>