在轮播容器中循环 3 篇 WordPress 文章

Question

 我目前正在使用 Slick Carousel 轮流浏览我网站主页上的文章。

目前，这可以通过使用以下代码来实现：

 <div class="news-slider">

        <?php $i = 0; ?>

        <?php $the_query = new WP_Query( 'cat=8,7,9&posts_per_page=6' ); ?>

        <?php while ($the_query -> have_posts()) : $the_query -> the_post(); ?>

        <?php $backgroundImg = wp_get_attachment_image_src( get_post_thumbnail_id($post->ID), 'full' );?>

        <?php if ( $i % 2 ==  0) : ?>

          <div class="wrap">

        <?php endif; ?>

          <div class="news-snippet">

            <div class="news-snippet-thumbnail" style="background: url('<?php echo $edTheDev = $backgroundImg[0] ? $backgroundImg[0] : '/wp-content/themes/quantinsight/assets/img/post-thumb.png'; ?>') no-repeat center; -webkit-background-size: cover; -moz-background-size: cover; -o-background-size: cover; background-size: cover;"></div>

            <div class="news-snippet-content">

              <h3 class="[ f-avenir-book-26 u-ColorBlue ]"><a href="<?php the_permalink() ?>"><?php the_title(); ?></a></h3>

              <p class="news-snippet-date"><?php echo the_time('d.m.y'); ?></p>

              <p class=""><a href="<?php the_permalink() ?>">Read More</a></p>

            </div>

          </div>

        <?php if ( $i % 2 != 0 ) : ?>

            </div>

        <?php endif; ?>

        <?php

        $i++;

        endwhile;

        wp_reset_postdata();

        ?>

      </div>

我现在想显示 3 篇文章，而不是在轮播中显示 2 篇文章。

我想如果我将 $i % 2 更改为 $i % 3 ，这将更新每个换行中显示的文章，但这完全破坏了轮播。

任何关于我所缺少的建议将不胜感激。

Answer 1

问题是：它不能像这样使用模 % 。这是一种打开包装 div 并在以交替方式打印恰好 2 个元素后关闭它的技术：$i:&nbsp;0: open, element 1&nbsp;1: element 2, close&nbsp;2: open,&nbsp; element 3,&nbsp;3: element 4, close对于 % 3，它将产生：$i:&nbsp;0: open, element 1&nbsp;1: element 2, close&nbsp;2: element 3, close&nbsp;3: open, element 4&nbsp;4: element 5, close&nbsp;5: element 6, close因此，关闭标签的数量是打开标签的两倍<div>。要解决此问题，您必须更改if条件，如下所示：&nbsp;<div class="news-slider">&nbsp; &nbsp; &nbsp; &nbsp; <?php&nbsp; &nbsp; &nbsp; &nbsp; $i = 0;&nbsp; &nbsp; &nbsp; &nbsp; $numItems = 3; // Change the number of items per slide here&nbsp;&nbsp; &nbsp; &nbsp; &nbsp; ?>&nbsp; &nbsp; &nbsp; &nbsp; <?php $the_query = new WP_Query( 'cat=8,7,9&posts_per_page=6' ); ?>&nbsp; &nbsp; &nbsp; &nbsp; <?php while ($the_query -> have_posts()) : $the_query -> the_post(); ?>&nbsp; &nbsp; &nbsp; &nbsp; <?php $backgroundImg = wp_get_attachment_image_src( get_post_thumbnail_id($post->ID), 'full' );?>&nbsp; &nbsp; &nbsp; &nbsp; <?php if ( $i % $numItems ==&nbsp; 0) : ?>&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; <div class="wrap">&nbsp; &nbsp; &nbsp; &nbsp; <?php endif; ?>&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; <div class="news-snippet">&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; <div class="news-snippet-thumbnail" style="background: url('<?php echo $edTheDev = $backgroundImg[0] ? $backgroundImg[0] : '/wp-content/themes/quantinsight/assets/img/post-thumb.png'; ?>') no-repeat center; -webkit-background-size: cover; -moz-background-size: cover; -o-background-size: cover; background-size: cover;"></div>&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; <div class="news-snippet-content">&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; <h3 class="[ f-avenir-book-26 u-ColorBlue ]"><a href="<?php the_permalink() ?>"><?php the_title(); ?></a></h3>&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; <p class="news-snippet-date"><?php echo the_time('d.m.y'); ?></p>&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; <p class=""><a href="<?php the_permalink() ?>">Read More</a></p>&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; </div>&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; </div>&nbsp; &nbsp; &nbsp; &nbsp; <?php if ( ($i + 1) % $numItems == 0 ) : ?>&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; </div>&nbsp; &nbsp; &nbsp; &nbsp; <?php endif; ?>&nbsp; &nbsp; &nbsp; &nbsp; <?php&nbsp; &nbsp; &nbsp; &nbsp; $i++;&nbsp; &nbsp; &nbsp; &nbsp; endwhile;&nbsp; &nbsp; &nbsp; &nbsp; wp_reset_postdata();&nbsp; &nbsp; &nbsp; &nbsp; ?>&nbsp; &nbsp; &nbsp; </div>这是通过更改换行关闭 if 条件来实现的，以便它在$numItem打开后的每次迭代后触发。您可以配置$numItems为任意正数的项目。