Php 自动创建X列后的行WordPress

我用WordPress和Bootstrap在我的网站上创建“文章”页面。我正在寻找：所有3篇文章（列），一个新的“行”分隔一切。这将产生一行，第1条，第2条，第3条，行尾，新的行，第4条，第5条

我的主题是WordPress的起始主题：下划线

以下是生成文章摘要的代码（在content.php文件中）：

这工作得很完美，但内容是无休止地生成的（无限循环）

---

如果您总是要开始和停止包含3列组的新行，只需使用PHPs模运算符测试文章循环中的索引（或计数器），以确定它是否可被3整除

<?php if($i % 3 == 0)  { 
  // do something here like start and stop new rows 
} ?>

在上面的示例中，$i是循环中当前索引的编号（从1开始，而不是从0开始）。因此，如果您正在显示第3、6、9等文章，则可以添加代码以打开和关闭新行

然而，你不应该真的需要这样做。应允许引导列进行换行。将列分隔开，使每行始终有3个，这会扼杀bootstrap提供的响应元素

---

进一步阅读：

如果您总是要使用3列组开始和停止新行，只需使用PHPs模运算符测试文章循环中的索引（或计数器），以确定它是否可被3整除

<?php if($i % 3 == 0)  { 
  // do something here like start and stop new rows 
} ?>

在上面的示例中，$i是循环中当前索引的编号（从1开始，而不是从0开始）。因此，如果您正在显示第3、6、9等文章，则可以添加代码以打开和关闭新行

然而，你不应该真的需要这样做。应允许引导列进行换行。将列分隔开，使每行始终有3个，这会扼杀bootstrap提供的响应元素

---

进一步阅读：

您已经在使用bootstrap

col-xx-x

类，所以让它们为您做艰苦的工作吧

您在代码中使用的是

col-sm-4

，因此只需去掉循环即可

以下是您的代码的外观：

index.php-这是循环所在的位置，因此在while循环之外添加外部类（即

行

）

if ( have_posts() ) :

[... your header code here...]

<div class="row">  <?php /* ADD YOUR ROW CLASS HERE!! */ ?>

    <?php
    /* Start the Loop */
    while ( have_posts() ) : the_post();     
        get_template_part( 'template-parts/content', get_post_format() );
    endwhile;
    ?>

</div> <?php /* END ROW CLASS */

[...post navigation, etc here... ]

endif; ?>

我认为

行

类的名称让您感到困惑。。。听起来您可能需要将每3篇文章放入它们自己的

行

，但实际上这里的

行

类就像一个容器。根据您选择的大小

col

类别，Bootstrap将自动将该容器中的所有文章显示为行，每个行中包含适当数量的文章

---

这样做的好处是，您可以指定类似于

class=“col-sm-4 col-lg-3”

，这意味着Bootstrap将自动在大屏幕上连续放置4篇文章，而在小屏幕上仅放置3篇文章。

您已经使用了Bootstrap

col-xx-x

类，所以让它们为您做艰苦的工作吧

您在代码中使用的是

col-sm-4

，因此只需去掉循环即可

以下是您的代码的外观：

index.php-这是循环所在的位置，因此在while循环之外添加外部类（即

行

）

if ( have_posts() ) :

[... your header code here...]

<div class="row">  <?php /* ADD YOUR ROW CLASS HERE!! */ ?>

    <?php
    /* Start the Loop */
    while ( have_posts() ) : the_post();     
        get_template_part( 'template-parts/content', get_post_format() );
    endwhile;
    ?>

</div> <?php /* END ROW CLASS */

[...post navigation, etc here... ]

endif; ?>

我认为

行

类的名称让您感到困惑。。。听起来您可能需要将每3篇文章放入它们自己的

行

，但实际上这里的

行

类就像一个容器。根据您选择的大小

col

类别，Bootstrap将自动将该容器中的所有文章显示为行，每个行中包含适当数量的文章

---

---

这样做的好处是，您可以指定类似于

class=“col-sm-4 col-lg-3”

，这意味着Bootstrap将自动在大屏幕上连续放置4篇文章，在小屏幕上仅放置3篇文章。

您需要使用某种网格系统。看看Bootstrap和CSS网格。我在消息中指定了我使用Bootstrap:）那么，在您发布本文之前，请查阅使用它的文档：）希望您已经研究了您的问题，并尝试自己编写代码。您需要的所有信息都在引导文档中。试一试，如果你在某个特定的问题上遇到了困难，请回来并附上你所尝试的内容和相关代码的摘要。请阅读我更新了我的帖子，向您展示了我尝试过的，但不起作用的东西：无限循环：）您需要使用某种网格系统。看看Bootstrap和CSS网格。我在消息中指定了我使用Bootstrap:）那么，在您发布本文之前，请查阅使用它的文档：）希望您已经研究了您的问题，并尝试自己编写代码。您需要的所有信息都在引导文档中。试一试，如果你在某个特定的问题上遇到了困难，请回来并附上你所尝试的内容和相关代码的摘要。请阅读我更新了我的帖子，向您展示了我尝试过的内容，但没有效果：无限循环：）谢谢您的评论，我找到了尝试某些东西的灵感（我更新了我的消息），但生成的内容从未停止（无限循环）我没有看到任何错误消息，浏览器运行无休止。我有4篇虚构的文章，第一行是用其中的3篇文章创建的，第二行是用最后一篇文章创建的，然后用前3篇文章创建一个新行，用剩余的文章创建一个新行等等……如果删除条件行

，它会显示正确的项目数（虽然可能不是您喜欢的行格式）？如果我只是删除这一行，我不再有正确的格式，无限循环始终存在，我会给您发布一些屏幕快照无限循环是您如何迭代wordpress posts对象的一个问题，与wi无关

if ( have_posts() ) :

[... your header code here...]

<div class="row">  <?php /* ADD YOUR ROW CLASS HERE!! */ ?>

    <?php
    /* Start the Loop */
    while ( have_posts() ) : the_post();     
        get_template_part( 'template-parts/content', get_post_format() );
    endwhile;
    ?>

</div> <?php /* END ROW CLASS */

[...post navigation, etc here... ]

endif; ?>

<div class="col-sm-4 blog-resume">
    <article id="post-<?php the_ID(); ?>" <?php post_class(); ?>>
        <header>
            <a href="<?php echo get_permalink() ?>">
                <div class="featured-image-blog" style="background-image: url('<?php echo get_the_post_thumbnail_url() ?>')"></div>
            </a>
        </header>
        <div class="article-resume text-center">
            <h2><a href="<?php echo get_permalink() ?>"><?php echo get_the_title() ?></a></h2>
            <p class="posted-on">Posté le <?php echo the_date() ?></p>
            <p class="resume-article"><?php echo the_content() ?></p>
        </div>
    </article>
</div>

@media (min-width:768px) and (max-width: 991px) {
  .row > div:nth-child(2n+3) {
    clear: left;
  }
}
@media (min-width: 992px) and (max-width: 1199px) {
  .row > div:nth-child(3n+4) {
    clear: left;
  }  
}
@media (min-width: 1200px) {
  .row > div:nth-child(4n+5) {
    clear: left;
  }  
}