第一篇:单栏;其他文章:2栏

时间:2013-09-21 作者:Henrique Dias

我正在建立一个网站(使用Wordpress 3.6),希望将新闻/文章安排如下:

第一篇文章的大小最大(一列);

以下文章分为两列。

每页仅显示5或7篇文章。如何做到这一点?

1 个回复
最合适的回答,由SO网友:Mayeenul Islam 整理而成

测试并让我知道:

将以下代码放入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;
    }

结束

相关推荐

如何使用forloop和Register_侧边栏创建多个侧栏区域?

我试图使用一组页面模板(如日期、存档、标记等)创建8个侧边栏区域,然后在数组中循环,为每个值创建一个侧边栏。我认为应该这样做,但它只会为数组中的最后一个值创建一个侧栏:$widget_areas = array(\'single\',\'index\',\'category\',\'archive\',\'tag\',\'taxonomy\',\'author\',\'date\',\'search\',\'attachment\'); foreach($widget_areas as $area