测试并让我知道:
将以下代码放入index.php
(或front-page.php
):
<?php if( have_posts() ) : ?>
<div class="col-full">
<?php for( $news = 0; $news < 1; $news++ ) { ?>
<?php the_post(); ?>
<h3 class="news-title"><?php the_title(); ?></h3>
<div class="news-excerpt"><?php the_excerpt(); ?></div>
<?php } ?>
</div>
<div class="place-for-ad"></div>
<?php // Start Two Column Support ?>
<?php $col_counter = 1; ?>
<?php // Controll the loop\'s max number (4 here) to echo the max number of news with 2 column ?>
<?php for( $news = 0; $news < 4; $news++ ) { ?>
<?php /* Two Column Support get class */ ?>
<?php $class = ( $counter % 2 ? \' one\' : \'\' ) ?>
<?php $first = ( $counter < 3 ? \' first\' : \'\' ) ?>
<?php /* Two Column output open the div class */ ?>
<div class="col-2<?php echo $class; echo $first; ?>">
<?php the_post(); ?>
<h3 class="news-title"><?php the_title(); ?></h3>
<div class="news-excerpt"><?php the_excerpt(); ?></div>
</div> <!-- End Two Column Support close div class -->
<?php $col_counter++; //Update Counter ?>
<?php } ?>
<?php endif; ?>
并将以下内容添加到样式表中(
style.css
):
.col-full{
width: 100%;
float: left;
position: relative;
}
.clear{
clear: both;
}
/* Common for all the column */
.col-2{
float: left;
position: relative;
width: 47%;
border-top: dashed 1px #ccc;
}
/* Loads only on first columns */
.one {
clear: both;
margin-right: 2%;
}
/* Loads on only the first 3 columns to make the top border into none */
.first {
border-top: none;
}