我目前正在使用 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 ，這將更新每個換行中顯示的文章，但這完全破壞了輪播。任何關于我所缺少的建議將不勝感激。
1 回答
慕田峪7331174
TA貢獻1828條經驗 獲得超13個贊
問題是：它不能像這樣使用模 % 。這是一種打開包裝 div 并在以交替方式打印恰好 2 個元素后關閉它的技術：
$i:
0: open, element 1
1: element 2, close
2: open, element 3,
3: element 4, close
對于 % 3，它將產生：
$i:
0: open, element 1
1: element 2, close
2: element 3, close
3: open, element 4
4: element 5, close
5: element 6, close
因此，關閉標簽的數量是打開標簽的兩倍<div>。
要解決此問題，您必須更改if條件，如下所示：
<div class="news-slider">
<?php
$i = 0;
$numItems = 3; // Change the number of items per slide here
?>
<?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 % $numItems == 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 + 1) % $numItems == 0 ) : ?>
</div>
<?php endif; ?>
<?php
$i++;
endwhile;
wp_reset_postdata();
?>
</div>
這是通過更改換行關閉 if 條件來實現的，以便它在$numItem打開后的每次迭代后觸發。您可以配置$numItems為任意正數的項目。
- 1 回答
- 0 關注
- 90 瀏覽
添加回答
舉報
0/150
提交
取消