在轮播容器中循环 3 篇 WordPress 文章
Looping 3 WordPress articles in a carousel container
我目前正在使用 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 这将更新每个包装中显示的文章,但这会完全破坏轮播。
如有任何关于我遗漏的建议,将不胜感激。
问题是:它不能像这样使用模 %。这是一种打开包装器 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>
这通过更改 wrap-closing if-condition 来实现,因此它会在每次 $numItem
迭代后触发。您可以将 $numItems
配置为您想要的任意正数项。
我目前正在使用 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 这将更新每个包装中显示的文章,但这会完全破坏轮播。
如有任何关于我遗漏的建议,将不胜感激。
问题是:它不能像这样使用模 %。这是一种打开包装器 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>
这通过更改 wrap-closing if-condition 来实现,因此它会在每次 $numItem
迭代后触发。您可以将 $numItems
配置为您想要的任意正数项。