Question

好的我正在创建一个投资组合页面。我希望投资组合的所有图像叠加在一起。＆安培;当访客将鼠标悬停在图像ll显示的任何标题中时。

为此我创建了这个循环：

<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>

你可以看到我的图片＆amp;标题在循环内。它打印出来像：first image＆amp;第一个标题，然后是第二个图像＆amp;第二个标题，第三个图像+第三个标题＆amp;所以继续...我想要的是先打印出所有图像＆amp;然后标题。喜欢：第一张图片，第二张图片，第三张图片＆amp;然后第一个冠军，第二个冠军，第三个冠军。基本上从我的代码中，投资组合项目的所有图像首先加载＆amp;然后是“投资组合框”。附上截图。 enter image description here

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>

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

2 个答案: