要先加载图像，然后在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>

如您所见，我的图片和标题都在循环中。输出如下:第一个图像和第一个标题，然后第二个图像和第二个标题，第三个image+third标题&所以继续.我想要的是先打印出所有的图像，然后再打印标题。比如:第一个图像，第二个图像，第三个图像，然后是第一个标题，第二个标题，第三个标题。基本上，从我的代码中，项目组合项的所有图像将首先加载&然后是“portfolio”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; ?> 

Answer 2

你想要的太简单了。只需从循环中取出标题，然后再创建一个带有标题的循环。另一种方法是，如果您在1循环中将数据收集到数组中，并使用它显示图像和图片，那么您只需要运行一次查询。

<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();
        $extraLastClass = $loop->current_post + 1 === $loop->post_count ? ' main-image-porfolio-main' : '';
        the_post_thumbnail("thumbnail", array("class" => "main-image portfolio $extraLastClass"));
    endwhile;
    ?>
</div>
<!-- HERE COMES THE TITLE SECTION -->
<div class="portfolio-titles">
    <?php
    $args = array('post_type' => 'portfolio', 'order' => 'ASC');
    $loop = new WP_Query($args);
    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;
    ?>
</div>