最近的文章在一栏，其他文章在两栏 - Wordpress: Most recent post in one column, other posts in two columns

Wordpress: Most recent post in one column, other posts in two columns

我的客户正在寻找改变她的主页，看起来类似于这个网站:http://www.eatliverun.com/其中，最近的一篇文章在一栏的顶部，其他文章在两栏的摘录中。

她想只显示一个最近的帖子，其余的以两列格式显示。我只是不确定如何正确地完成这一点。

她的网址是http://pamelastable.com/

将计数器集成到循环中可以轻松地帮助您实现这种布局。尝试如下(注意:'six columns'类代表12列网格中的2列布局):

<?php $count = 1; ?>
    <?php if ( have_posts() ) : while ( have_posts() ) : the_post(); ?>
        <?php if ($count == 1) { ?>
            <article>
                    <div>
                        <h2><a href="<?php the_permalink(); >"><?php the_title(); ?></a></h2>
                        <?php the_excerpt(); ?>
                    </div>
            </article>
            <?php $count++; ?>
            <?php } else { ?>
            <?php if($count % 2 == 0) { ?>  
            <div>
                <? } ?>
                <div class="six columns">
                    <article>
                        <div>
                            <h2><a href="<?php the_permalink(); ?>"><?php the_title(); ?></a></h2>
                            <?php the_excerpt(); ?>
                        </div>
                    </article>
                </div>
                <?php if($count % 2 == 1) { ?>
            </div>
            <? } ?>
            <?php $count++; ?>
        <? } ?>
    <?php endwhile; else: ?>
        <p><?php _e('Sorry, no posts matched your criteria.'); ?></p>
    <?php endif; ?>

只需在循环中添加计数器，并在第一次迭代中使用不同的html样式。

<?php $i = 0; while ( have_posts() ) : the_post(); //inside loop ?>
    <?php if ($i++ == 0) : ?>
        <div>First Post</div>
    <?php else: ?>
        <div>Other Posts</div>
    <?php endif; ?>
<?php endwhile; ?>

在您的index.php或其他模板文件^

使用计数器查看您在哪个帖子上。

<?php
if (have_posts()) {
    $i = 0;
    while (have_posts()) {
        the_post();
        if (++$i == 1) {
            echo '<div class="entry-large">';
        } else {
            echo '<div class="entry-small">';
        }
        the_content();
        echo '</div>'
    }
}