用一个循环将WordPress的最新帖子拆分成多列和多行

时间:2018-08-02 作者:Davva M

我有一个我正在尝试实施的布局-https://drive.google.com/file/d/1cP831xAM1F5CT3HEmedCBkINwiCC18Rb/view

我已经创建了一个新闻模板,但我需要让帖子像我的示例一样显示,第一个引导行显示3篇帖子,然后在下面显示4篇帖子。

这是否可能,我似乎找不到相关信息来实现这一目标。

真的希望有人能给我指出正确的方向,告诉我如何为这个布局编写模板。

非常感谢

这是我的当前代码

<div class="container">
    <div class="row">
    <?php
        while ( have_posts() ) {
            the_post(); 

            $class = \'col-md-4\';

            if( $counter < 3 ) {
                $class = \'col-md-3\';
            }

            ?>
            <div class="col-12 <?php echo $class; ?>">
                <?php the_post_thumbnail(\', \'); ?>
                <h3><a href="<?php the_permalink(); ?>" title="Read more"><?php the_title(); ?></a></h3>
            </div> <!-- .col-12 -->
            <?php

            $counter++;

        } // end while
    ?>
    </div><!-- .row -->
</div><!-- .container -->

2 个回复
SO网友:mrmadhat

您可以通过使用计数器,然后根据需要更新类来实现这一点。下面的代码将创建一个变量$counter 并将其分配给0 如果存在帖子。默认情况下a\'col-md-4\' 是必须的$class, 如果$counter 小于3 $class 将更新为\'col-md-3\' (使其填充4列而不是3列)。然后输出包含存储类的html。最后$counter 为下一个post项目做好了递增准备。

<?php 
if ( have_posts() ) {
    $counter = 0;

    ?>

    <div class="container">
        <div class="row">
        <?php
            while ( have_posts() ) {
                the_post(); 

                $class = \'col-md-4\';

                if( $counter < 3 ) {
                    $class = \'col-md-3\';
                }

                ?>
                <div class="col-12 <?php echo $class; ?>">
                    <?php // content etc here ?>
                </div> <!-- .col-12 -->
                <?php

                $counter++;

            } // end while
        ?>
        </div><!-- .row -->
    </div><!-- .container -->
<?php } else { // end if ?>
    <p>There are no posts to display</p>
<?php } ?>

结束

相关推荐

Generating a perfect loop

所以我现在已经在这里坐了大约三个小时了,我不得不让这件事过去几个小时来好好睡一觉,同时我希望能得到你的帮助。我已经能够使用$wpdb->get\\u results从数据库中获取内容,并且能够将它们放入一个数组中,但是我想使用这些信息在循环中运行一个新的查询,以获取列表中的多个项目。我使用了本指南的一个变体https://stackoverflow.com/questions/45848249/woocommerce-get-all-orders-for-a-product 获取订单ID。现在,我已