繁体   English   中英

WordPress:一列中最新发布,两列中其他发布

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

我的客户希望将其主页更改为类似于以下站点: http : //www.eatliverun.com/ ,其中最新的帖子在一栏内排在第一位,而其他帖子则在两栏内。

她希望只显示一个最近的帖子,其余的显示为两列。 我只是不确定如何正确完成此操作。

她的网站位于http://pamelastable.com/

将计数器集成到循环中可以轻松帮助您实现此布局。 请尝试以下操作(注意:“六列”类表示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>'
    }
}

暂无
暂无

声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.

 
粤ICP备18138465号  © 2020-2024 STACKOOM.COM