如何创建第一个 post、第五个 post 全宽、其余三列等等

Question

我是wordpress开发的新手，我正在学习如何从头开始制作主题。我不想使用任何插件来实现这一点。

如何创建第一个post/第五个post/第九个post全宽，其余三列等等

我试过了，但首先 post 没有重复

<?php get_header() ?>
<div class="container-fluid">
 <div class="row">
  <?php $i = 0; while ( have_posts() ) : the_post();  ?>
  <?php if ($i++ == 0) : ?>
  <div class="col-sm-12 blog">
   <div class="row">
    <div class="col-sm-8 p-0">
     <?php the_post_thumbnail()?>
    </div>
    
    <div class="col-sm-4 align-self-center">
     <div><h3><?php the_title()?></h3></div>
     <div><?php the_excerpt()?></div>
    </div>
   </div>
  </div>
  <?php else: ?>
  <div class="col-sm-4 blog py-3">
   <?php the_post_thumbnail()?>
   <div><h3><?php the_title()?></h3></div>
   <div><?php the_excerpt()?></div>
  </div>
  <?php endif; ?>
  <?php endwhile ?>
 </div>
</div>
<?php get_footer() ?>

find my screen here

Answer 1

你的文字不是很清楚，但我假设你想要 1 个大的 post 和 3 个小的 posts 图案。

要实现这一点，您需要告诉您的代码，第一个或 post 数字除以 4 余数为 0 时，post 应该很大。

代码：

<?php get_header() ?>
<div class="container-fluid">
    <div class="row">
        <?php $i = 0; while ( have_posts() ) : the_post();  ?>
        <?php if ($i == 0 || $i % 4 == 0) : ?>
        <div class="col-sm-12 blog">
            <div class="row">
                <div class="col-sm-8 p-0">
                    <?php the_post_thumbnail()?>
                </div>

                <div class="col-sm-4 align-self-center">
                    <div><h3><?php the_title()?></h3></div>
                    <div><?php the_excerpt()?></div>
                </div>
            </div>
        </div>
        <?php else: ?>
        <div class="col-sm-4 blog py-3">
            <?php the_post_thumbnail()?>
            <div><h3><?php the_title()?></h3></div>
            <div><?php the_excerpt()?></div>
        </div>
        <?php endif; ?>
        <?php $i++;endwhile ?>
    </div>
</div>
<?php get_footer() ?>

Answer 2

希望对您有所帮助。

<?php get_header() ?>
<div class="container-fluid">
    <div class="row">
        <?php $i = 0; while ( have_posts() ) : the_post();  ?>
        <?php if ($i % 4 == 0) : ?>
        <div class="col-sm-12 blog">
            <div class="row">
                <div class="col-sm-8 p-0">
                    <?php the_post_thumbnail()?>
                </div>

                <div class="col-sm-4 align-self-center">
                    <div><h3><?php the_title()?></h3></div>
                    <div><?php the_excerpt()?></div>
                </div>
            </div>
        </div>
        <?php else: ?>
        <div class="col-sm-4 blog py-3">
            <?php the_post_thumbnail()?>
            <div><h3><?php the_title()?></h3></div>
            <div><?php the_excerpt()?></div>
        </div>
        <?php endif; ?>
        <?php 
        $i++;
        endwhile ?>
    </div>
</div>
<?php get_footer() ?>

如何创建第一个 post、第五个 post 全宽、其余三列等等

How to create first post, fifth post full width, rest in three columns and so on

php

wordpress

loops

wordpress-theming

bootstrap-4