Хотите, чтобы изображения загружались сначала, затем заголовок в петле WordPress

Question

ok Я создаю страницу портфолио. Я хочу, чтобы все изображения портфеля post stack вместе. &, когда посетители наводили указатель мыши на любой из названий, которые показывают изображение.

для этого я создал этот цикл:

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

, как вы можете увидеть мои изображения & названия внутри цикла. он печатает как: первое изображение & первое название, затем второе изображение & второе название, третье изображение + третье название & так что продолжайте ... то, что я хочу, распечатывает все изображения сначала &, затем заголовки. например: первое изображение, второе изображение, третье изображение &, затем первое название, второе название, третий заголовок. В основном из моего кода все образы элемента портфеля сначала загружаются &, затем «портфель-бокс». скриншот прилагается.

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>