php - 想要在 WordPress 循环中先加载图像，然后加载标题

Question

好的，我正在创建一个作品集页面。我想要将作品集帖子的所有图像堆叠在一起。 &当访问者将鼠标悬停在任何标题上时，图像将显示。

为此我创建了这个循环:

<div class="main-interior portfolio" id="portfolio-big-pics" style="display: block;">
<?php $args = array( 'post_type' => 'portfolio', 'order' => 'ASC');
$loop = new WP_Query( $args );
while ( $loop->have_posts() ) : $loop->the_post(); ?>
<?php $extraLastClass = $loop->current_post + 1 === $loop->post_count ? ' main-image-porfolio-main' : '';?>
<?php the_post_thumbnail( "thumbnail", array( "class" => "main-image portfolio $extraLastClass" ) ); ?>

            <div class="portfolio-box">

                <h5>Portfolio</h5>
                <ul class="item-list" id="portfolio-list">
                <li><a href="<?php the_permalink(); ?>"><?php the_title(); ?></a>
                </li>               
                </ul>

            </div>

 <?php endwhile; ?>            
</div>

如您所见，我的图像和标题都在循环内。它打印出来的样子:第一张图像和第一个标题，然后第二张图像和第二个标题，第三张图像+第三个标题，依此类推...我想要的是先打印出所有图像，然后打印标题。例如:第一张图片、第​​二张图片、第​​三张图片，然后是第一个标题、第二个标题、第三个标题。基本上从我的代码来看，投资组合项目的所有图像都会首先加载，然后是“投资组合框”div。附截图。

Answer 1

使用<?php rewind_posts(); ?>

<?php $args = array( 'post_type' => 'portfolio', 'order' => 'ASC');
$loop = new WP_Query( $args );
while ( $loop->have_posts() ) : $loop->the_post(); ?>
<?php $extraLastClass = $loop->current_post + 1 === $loop->post_count ? ' main-image-porfolio-main' : '';?>
<?php the_post_thumbnail( "thumbnail", array( "class" => "main-image portfolio $extraLastClass" ) ); ?>
<?php endwhile; ?> 

<?php rewind_posts(); ?> 

<?php while ( $loop->have_posts() ) : $loop->the_post(); ?>
    <div class="portfolio-box">
        <h5>Portfolio</h5>
        <ul class="item-list" id="portfolio-list">
        <li><a href="<?php the_permalink(); ?>"><?php the_title(); ?></a>
        </li>               
        </ul>
    </div>
<?php endwhile; ?>