我正在自定义主题, 其中可以选择仅添加三个服务部分。我添加了更多的三个部分, 并且在我的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>
#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; }
} ?>
......
......
#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 }
#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 }
to
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 }
#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 } ?>
评论前必须登录!
注册