如何做WordPress的Bootstrap Gird自定义文章类型循环？

Question

我已经创建了一个名为'portfolio'的自定义帖子类型，并且正在创建2列和3列的循环，并且还使用高级自定义字段上传图片，但我不确定要添加到下面的代码中做到这一点。

我的脚步

第一：我想生成从投资组合页面未来自定义后的类型。

二：当用户上传他们以前的项目到投资组合页面。我只想循环8个以前的样本到主页。

第三：2列网格我想只显示最前面的帖子。但3列网格我想只显示较少的前一篇文章。我正确地做了bootstrap 4网格。

下面是目前不为我工作的代码。当我将图片上传到投资组合页面时，并未出现在主页上。

<!-- recent work --> 
    <div class="old-portfolio recent_work"> 
     <div class="container-fluid text-center"> 
      <div class="row"> 
       <?php 
        $alter_args = new WP_Query(array('numberposts' => 8,'orderby' => 'post_date','post_type' => 'portfolio','suppress_filters' => true)); 
        if ($alter_args->have_posts()) : while ($alter_args->have_posts()) : $alter_args->the_post(); ?> 

       <div class="portfolio-work col-xs-12 col-md-6 col-lg-12"> 
        <a href="<?php the_field('portfolio_image'); ?>" data-lightbox="placeholder-image"> 
         <img class="" src="<?php the_field('portfolio_image'); ?>"/> 
        </a> 

        <li class="portfolio-item"> 
         <h3><?php the_title(); ?></h3> 
        </li> 
       </div> 
      </div> 

      <div class="row"> 
       <div class="portfolio-work col-md-4"> 
        <a href="<?php the_field('portfolio_image'); ?>" data-lightbox="placeholder-image"> 
        <img class="" src="<?php the_field('portfolio_image'); ?>"/> 
        </a> 

        <li class="portfolio-item"> 
        <h3><?php the_title(); ?></h> 
        </li> 
       <?php endwhile; ?> 
       </div> 
      <?php endif; ?> 
      </div> 
     </div> 
    </div> 
    <!-- recent work --> 

Answer 1

您需要在循环的开始处启动计数器（通过设置变量）为循环中的每个项目分配一个数字。您可以通过添加$i == 0;并在循环结束时执行此操作，您需要将该变量增加一个$i++;，以便该数字在每个项目后都会更改。这样做后，您可以通过在循环中编写if/else语句轻松更改项目的处理方式。在你的榜样，你要设置的第2项有col-md-6类，其余有col-md-4类，所以你加入<?php if($i < 2){echo "6";} else {echo "4";} ?>

<?php 
    $alter_args = new WP_Query(array('numberposts' => 8,'orderby' => 'post_date','post_type' => 'portfolio','suppress_filters' => true)); 
    if ($alter_args->have_posts()) : ?> 
<?php $i == 0; //Start a counter by setting a variable ?> 
<?php while ($alter_args->have_posts()) : $alter_args->the_post(); ?> 

    <div class="portfolio-work col-xs-12 col-md-<?php if($i < 2){echo "6";} else {echo "4";} //For the first 2 items in the loop echo 6 else echo 4 ?> col-lg-12"> 
     <a href="<?php the_field('portfolio_image'); ?>" data-lightbox="placeholder-image"> 
     <img class="" src="<?php the_field('portfolio_image'); ?>"/> 
       </a> 
       <li class="portfolio-item"> 
        <h3><?php the_title(); ?></h3> 
       </li> 
      </div> 
     </div> 
       <?php $i++; //this will increase the counter by 1 at the end of each item in the loop ?> 
      <?php endwhile; ?> 
     <?php endif; ?>