WordPress的博客文章循環與自舉網格佈局

Question

我有麻煩整合WordPress循環顯示每行2條和側邊欄旁邊他們。所以主要想法是，每行有2個帖子需要4 + 4的引導程序佈局，剩下的4個是用於側邊欄的？任何人都可以幫我解決這個問題嗎？這是代碼。

<?php 
get_header(); ?> 
<section class="feature-image feature-image-default" > 
    <h1 class="page-title">BLOGG</h1> 
    </section> 

    <!-- BLOG CONTENT --> 
<div class="container"> 
    <div class="row" id="primary"> 

      <?php 
      if (have_posts()) : 


       if (is_home() && ! is_front_page()) : ?> 
       <div class="col-sm-4" id="content" role="main"> 
        <header> 

         <h1 class="page-title screen-reader-text"><?php single_post_title(); ?></h1> 

        </header> 
       </div> 
       <?php 
       endif; 

       /* Start the Loop */ 
       while (have_posts()) : the_post(); 

        /* 
        * Include the Post-Format-specific template for the content. 
        * If you want to override this in a child theme, then include a file 
        * called content-___.php (where ___ is the Post Format name) and that will be used instead. 
        */ 
        get_template_part('template-parts/content', get_post_format()); 

       endwhile; 

       the_posts_navigation(); 

      else : 

       get_template_part('template-parts/content', 'none'); 

      endif; ?> 

     </main> <!--content --> 

     <!-- SIDEBAR --> 
     <aside class="col-sm-4"> 
      <?php get_sidebar(); ?> 
     </aside> 

    </div> <!--primary--> 
</div> <!--container--> 



<?php 

get_footer(); ?> 

Answer 1

我做了這樣的事情...
BTW：你可以嘗試跳過else : get_template_part('template-parts/content', 'none'); - 它應該工作。

不要忘了col-sm-4 -class在template-parts/content-*.php

<?php 
get_header(); ?> 
<section class="feature-image feature-image-default" > 
    <h1 class="page-title">BLOGG</h1> 
    </section> 

    <!-- BLOG CONTENT --> 
<div class="container"> 
    <div class="row" id="primary"> 

      <?php 
      if (have_posts()) : 

       $i = 0; //counter, set it to 0 BEFORE while loop 

       if (is_home() && ! is_front_page()) : ?> 
       <div class="col-sm-4" id="content" role="main"> 
        <header> 

         <h1 class="page-title screen-reader-text"><?php single_post_title(); ?></h1> 

        </header> 
       </div> 
       <?php 
       endif; 

       /* Start the Loop */ 
       while (have_posts()) : the_post(); 

        /* 
        * Include the Post-Format-specific template for the content. 
        * If you want to override this in a child theme, then include a file 
        * called content-___.php (where ___ is the Post Format name) and that will be used instead. 
        */ 

        /* 
         Check if it's our first post, to add. 
        */ 
        if ($i == 0) : 
         echo '<div class="row">' ; //open row for first 2 articles 
        endif; 
        /* 
         check if our post number is even 
        */ 
        if ($i % 2 == 0): 
         echo '</div> <div class="row">'; //close old row and open new, for next 2 articles 
        endif; 

        get_template_part('template-parts/content', get_post_format()); 
        $i++; //increment our counter 
       endwhile; 

       /* 
        after loop close our initial div 
       */ 

       echo '</div>'; 

       the_posts_navigation(); 

      else : 

       get_template_part('template-parts/content', 'none'); 

      endif; ?> 

     </main> <!--content --> 

     <!-- SIDEBAR --> 
     <aside class="col-sm-4"> 
      <?php get_sidebar(); ?> 
     </aside> 

    </div> <!--primary--> 
</div> <!--container--> 

<?php get_footer(); ?> 

添加到 div小號