我有一个循环用于大图像,我需要同样的循环用于小图像(缩略图)。这就是我被困的地方。
Use case: 我正在尝试用WordPress实现弹性图像幻灯片jQuery插件this tutorial.
到目前为止,我能够获得较大的图像,但我不知道如何管理缩略图导航。
这是我目前使用的代码。实际上,我不知道如何使用相同的查询管理两个缩略图,一个用于主图像,另一个用于导航图像。
<div id="ei-slider" class="ei-slider">
<ul class="ei-slider-large">
<?php
query_posts(array(\'category_name\' => \'featured\', \'posts_per_page\' => 3));
if(have_posts()) :
while(have_posts()) : the_post();
?>
<li>
<?php the_post_thumbnail(); ?>
<div class="ei-title"><h2> <?php the_title_attribute(); ?> </h2><h3><?php the_excerpt(); ?></h3></div>
</li>
<?php
endwhile;
endif;
wp_reset_query();
?>
</ul>
<ul class="ei-slider-thumbs">
<?php
// I need the thumbnails here.
?>
<li class="ei-slider-element">Current</li>
<li>
<a href="#">Slide 1</a>
<img src="images/thumbs/1.jpg" alt="thumb01" />
</li>
<li> <a href="#">Slide 2</a>
<img src="images/thumbs/2.jpg" alt="thumb02" /></li>
</ul>
</div>
也许我在找
this? 此主题使用WordPress实现了滑块。
最合适的回答,由SO网友:fuxia 整理而成
您不需要第二个循环。只需在第一个循环中保存稍后需要的所有数据。
示例代码,未测试,只是一个提示:
<ul class="ei-slider-large">
<?php
// Here we store the data.
$second_loop = array();
// Main loop
$main_query = new WP_Query(
array(
\'category_name\' => \'featured\',
\'posts_per_page\' => 3
)
);
if( $main_query->have_posts() ):
while( $main_query->have_posts() ):
$main_query->the_post();
?>
<li>
<?php the_post_thumbnail(); ?>
<div class="ei-title">
<h2><?php the_title_attribute(); ?></h2>
<h3><?php the_excerpt(); ?></h3></div>
</li>
<?php
// collect data, adjust the image size!
$second_loop[ $post->ID] = get_the_post_thumbnail( $post->ID, \'preview-size\' );
endwhile;
endif;
wp_reset_query();
?>
</ul>
在第二个循环中,您不需要另一个查询。只需使用阵列
$second_loop
.
<ul class="ei-slider-thumbs">
<?php
foreach ( $second_loop as $post_id => $thumbnail )
{
?>
<li class="ei-slider-element">Current</li>
<li>
<a href="#">Slide 1</a>
<?php echo $thumbnail; ?>
</li>
<?php
}
?>
</ul>
或者,您可以将缩略图URL另存为属性
data-thumb
在
li
并在JavaScript中创建第二个列表。
另请阅读When should you use WP_Query vs query_posts() vs get_posts()?. query_posts()
经常有一些奇怪的副作用。