Как создать новую строку после 3 столбца в моем коде

Question

Я настраиваю тему, в которой была возможность добавить только три раздела служб.Я добавил еще три раздела, и теперь они отражаются в моем HTML.defacult создает что-то вроде этого:

row> col1> col1> col1> col1> col1> col1

Я хочу создать вот так:

row> col1>col1> col1 строка> col1> col1> col1

Пожалуйста, помогите мне с этим

<?php
/**
 * lessons Section
 * 
 * @package Preschool_and_Kindergarten
*/  
     $title        = get_theme_mod( 'preschool_and_kindergarten_lessons_section_title' );
     $description  = get_theme_mod( 'preschool_and_kindergarten_lessons_section_description' ); 
     $lesson_one   = get_theme_mod( 'preschool_and_kindergarten_lesson_post_one' );
     $lesson_two   = get_theme_mod( 'preschool_and_kindergarten_lesson_post_two' );
     $lesson_three = get_theme_mod( 'preschool_and_kindergarten_lesson_post_three' );
     $lesson_four = get_theme_mod( 'preschool_and_kindergarten_lesson_post_four' );
     $lesson_five = get_theme_mod( 'preschool_and_kindergarten_lesson_post_five' );
     $lesson_six = get_theme_mod( 'preschool_and_kindergarten_lesson_post_six' );
     $lessons_posts = array( $lesson_one, $lesson_two, $lesson_three, $lesson_four, $lesson_five, $lesson_six );
     $lessons_posts = array_diff( array_unique( $lessons_posts ), array('') );
?>  
<section class="section-2">
    <div class="container">
        <?php 
            preschool_and_kindergarten_get_section_header( $title, $description ); 

            if( $lessons_posts ):

                $lesson_qry = new WP_Query(array(
                    'post__in'   => $lessons_posts,
                    'orderby'   => 'post__in',
                    'posts_per_page' => -1,
                    'ignore_sticky_posts' => true
                    ));

                if( $lesson_qry->have_posts() ){ ?>
                    <div class="row">

                       <?php 
                        while( $lesson_qry->have_posts() ){ $lesson_qry->the_post(); ?>

                            <div class="col">

                                <?php 
                                    if( has_post_thumbnail() ){ ?>
                                        <div class="img-holder">
                                            <?php the_post_thumbnail( 'preschool-and-kindergarten-lesson-thumb', array( 'itemprop' => 'image' ) ); ?>
                                        </div>
                                <?php } ?>

                                <div class="text-holder">
                                    <h3 class="title"><?php the_title(); ?></h3>
                                    <?php the_content(); ?>
                                </div>

                            </div>      

                        <?php } ?>

                    </div>
                <?php } 
            wp_reset_postdata();
        endif; ?>
    </div>
</section>

Answer 1

Может быть, вам нужно что-то вроде этого

if( $lesson_qry->have_posts() ){ ?>
       <?php 
        $i = 0;
        while( $lesson_qry->have_posts() ){ $lesson_qry->the_post(); ?>

            <?php if( ($i % 3) == 0) {?>
                <div class="row">
            <?php } ?>
            <div class="col">
                <?php 
                    if( has_post_thumbnail() ){ ?>
                        <div class="img-holder">
                            <?php the_post_thumbnail( 'preschool-and-kindergarten-lesson-thumb', array( 'itemprop' => 'image' ) ); ?>
                        </div>
                <?php } ?>

                <div class="text-holder">
                    <h3 class="title"><?php the_title(); ?></h3>
                    <?php the_content(); ?>
                </div>

            </div>      
            <?php if( ($i % 3) == 0) { ?>
                </div>
            <?php
                }
           $i++;
        } ?>

    </div>
<?php } ?>

Answer 2

Очень грубое и простое решение будет включать счетчик и использовать оператор модуля для закрытия и повторного открытия строки div, как указано ниже:

if( $lesson_qry->have_posts() ){ 
  $counter = 0;
   ?>
                <div class="row">

                   <?php 
                    while( $lesson_qry->have_posts() ){ $lesson_qry->the_post();
                      if ($counter%3 == 0) {
                       ?>
                       </div>
                       <div class="row">
                      <?php }?>
                        <div class="col">

                            <?php 
                                if( has_post_thumbnail() ){ ?>
                                    <div class="img-holder">
                                        <?php the_post_thumbnail( 'preschool-and-kindergarten-lesson-thumb', array( 'itemprop' => 'image' ) ); ?>
                                    </div>
                            <?php } ?>

                            <div class="text-holder">
                                <h3 class="title"><?php the_title(); ?></h3>
                                <?php the_content(); ?>
                            </div>

                        </div>      

                    <?php 
                     $counter++;
                     } ?>

                </div>
            <?php } 

Answer 3

Изменение

                if( $lesson_qry->have_posts() ){ ?>
                <div class="row">

                   <?php 
                    while( $lesson_qry->have_posts() ){ $lesson_qry->the_post(); ?>

                        <div class="col">

                            <?php 
                                if( has_post_thumbnail() ){ ?>
                                    <div class="img-holder">
                                        <?php the_post_thumbnail( 'preschool-and-kindergarten-lesson-thumb', array( 'itemprop' => 'image' ) ); ?>
                                    </div>
                            <?php } ?>

                            <div class="text-holder">
                                <h3 class="title"><?php the_title(); ?></h3>
                                <?php the_content(); ?>
                            </div>

                        </div>      

                    <?php } ?>

                </div>
            <?php } 

до

            if( $lesson_qry->have_posts() ){ ?>
               <?php 
               $i=3;
                while( $lesson_qry->have_posts() ){ $lesson_qry->the_post(); ?>
                    <?php if($i%3==0) echo '<div class="row">';
                        <div class="col">
                            <?php 
                                if( has_post_thumbnail() ){ ?>
                                    <div class="img-holder">
                                        <?php the_post_thumbnail( 'preschool-and-kindergarten-lesson-thumb', array( 'itemprop' => 'image' ) ); ?>
                                    </div>
                            <?php } ?>
                            <div class="text-holder">
                                <h3 class="title"><?php the_title(); ?></h3>
                                <?php the_content(); ?>
                            </div>
                        </div>      
                    <?php $i++; if($i%3==0) echo '</div>';
                <?php }if($i%3!=0) echo '</div>'; ?>
            <?php } 

Answer 4

Вы можете использовать логику как:

......
......

<?php 

                            $col_count = 1;
                            while( $lesson_qry->have_posts() ){ $lesson_qry->the_post(); ?>


                                  <?php if($col_count==1){ ?>
                                    <div class="row"> 
                                  <?php } ?>                                

                                        <div class="col">

                                            <?php 
                                                if( has_post_thumbnail() ){ ?>
                                                    <div class="img-holder">
                                                        <?php the_post_thumbnail( 'preschool-and-kindergarten-lesson-thumb', array( 'itemprop' => 'image' ) ); ?>
                                                    </div>
                                            <?php } ?>

                                            <div class="text-holder">
                                                <h3 class="title"><?php the_title(); ?></h3>
                                                <?php the_content(); ?>
                                            </div>              

                                        </div>

                                  <?php if($col_count==1){ ?>
                                        </div>
                                  <?php } ?>        

                       <?php 
                                  $col_count++;
                                  if($col_count==4){ $col_count==1; }
                               } ?>

......
......