如何做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; ?>