Question

我正在自定义主题，其中可以选择仅添加三个服务部分。我添加了更多的三个部分，并在我的HTML中得到了体现。 defacult正在创造这样的东西：

行> col1> col1> col1> col1> col1> col1

我要这样创建：

行> 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

您可以使用以下逻辑：

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

<?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; }
                               } ?>

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

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

也许您需要这样的东西

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 } ?>

如何在我的代码中的第3列之后创建新行

4 个答案: