Wordpressのホーム記事を3列に表示しますか？

Question

私はBootsrapベースのスターターテーマ "Understrap"を使用しています。これはブートスラップをアンダースコアに取り入れています。

私の目標は、そう、水平方向に3列にフロントページの私の最新の記事を表示するには、次のようになります。

1 2 3 
4 5 6 
7 8 9 
... 

私は初心者ですので、私はアプローチする方法を考え出す苦労していますこれはUnderstrapで

私のIndex.phpコードを以下に示します。どんな助けでも大歓迎です！

<?php 
/** 
* The main template file. 
* 
* This is the most generic template file in a WordPress theme 
* and one of the two required files for a theme (the other being style.css). 
* It is used to display a page when nothing more specific matches a query. 
* E.g., it puts together the home page when no home.php file exists. 
* Learn more: http://codex.wordpress.org/Template_Hierarchy 
* 
* @package understrap 
*/ 

get_header(); 

$container = get_theme_mod('understrap_container_type'); 
$sidebar_pos = get_theme_mod('understrap_sidebar_position'); 
?> 

<?php if (is_front_page() && is_home()) : ?> 
    <?php get_template_part('global-templates/hero', 'none'); ?> 
<?php endif; ?> 

<div class="wrapper" id="wrapper-index"> 

    <div class="<?php echo esc_html($container); ?>" id="content" tabindex="-1"> 

     <div class="row"> 

      <!-- Do the left sidebar check and opens the primary div --> 
      <?php get_template_part('global-templates/left-sidebar-check', 'none'); ?> 

      <main class="site-main" id="main"> 

       <?php if (have_posts()) : ?> 

        <?php /* Start the Loop */ ?> 

        <?php while (have_posts()) : the_post(); ?> 

         <?php 

         /* 
         * 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('loop-templates/content', get_post_format()); 
         ?> 

        <?php endwhile; ?> 

       <?php else : ?> 

        <?php get_template_part('loop-templates/content', 'none'); ?> 

       <?php endif; ?> 

      </main><!-- #main --> 

      <!-- The pagination component --> 
      <?php understrap_pagination(); ?> 

     </div><!-- #primary --> 

     <!-- Do the right sidebar check --> 
     <?php if ('right' === $sidebar_pos || 'both' === $sidebar_pos) : ?> 

      <?php get_sidebar('right'); ?> 

     <?php endif; ?> 

    </div><!-- .row --> 

</div><!-- Container end --> 

</div><!-- Wrapper end --> 

<?php get_footer(); ?> 

Answer 1

ブートストラップの行/列クラスとカウンタ（$ i）を使用して、3列後に行を再開できます。あなたのコードに基づいた変更の考え方は次のとおりです。

<?php 
/** 
* The main template file. 
* 
* This is the most generic template file in a WordPress theme 
* and one of the two required files for a theme (the other being style.css). 
* It is used to display a page when nothing more specific matches a query. 
* E.g., it puts together the home page when no home.php file exists. 
* Learn more: http://codex.wordpress.org/Template_Hierarchy 
* 
* @package understrap 
*/ 

get_header(); 

$container = get_theme_mod('understrap_container_type'); 
$sidebar_pos = get_theme_mod('understrap_sidebar_position'); 
?> 

<?php if (is_front_page() && is_home()) : ?> 
    <?php get_template_part('global-templates/hero', 'none'); ?> 
<?php endif; ?> 

<div class="wrapper" id="wrapper-index"> 

    <div class="<?php echo esc_html($container); ?>" id="content" tabindex="-1"> 

     <div class="row"> 

      <!-- Do the left sidebar check and opens the primary div --> 
      <?php get_template_part('global-templates/left-sidebar-check', 'none'); ?> 

      <main class="site-main" id="main"> 

       <?php if (have_posts()) : ?> 

        <?php $i = 1; ?> 

        <div class="row"> 

        <?php /* Start the Loop */ ?> 

        <?php while (have_posts()) : the_post(); ?> 

         <div class="col-sm-4"> 

         <?php 
         /* 
         * 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('loop-templates/content', get_post_format()); 
         ?> 

         </div><!-- /.col --> 

         <?php 
         if($i == 3){ 
         echo '</div><div class="row">'; 
         $i = 0; 
         } 
         $i++; 
         ?> 

        <?php endwhile; ?> 

        </div><!-- /.row --> 

       <?php else : ?> 

        <?php get_template_part('loop-templates/content', 'none'); ?> 

       <?php endif; ?> 

      </main><!-- #main --> 

      <!-- The pagination component --> 
      <?php understrap_pagination(); ?> 

     </div><!-- #primary --> 

     <!-- Do the right sidebar check --> 
     <?php if ('right' === $sidebar_pos || 'both' === $sidebar_pos) : ?> 

      <?php get_sidebar('right'); ?> 

     <?php endif; ?> 

    </div><!-- .row --> 

</div><!-- Container end --> 

</div><!-- Wrapper end --> 

<?php get_footer(); ?> 

希望します！