如何创建第一篇文章，第五篇文章全角，三列中的其余内容，依此类推

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

如何创建第一篇文章/第五篇文章/第九篇文章全宽, 其余三列, 依此类推。

我尝试了这个, 但第一篇文章不再重复

<?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() ?>

在这里找到我的屏幕

#1

你的文字不是很清楚, 但我假设你想拥有1个大职位和3个小职位模式。

为此, 你需要告诉你的代码第一个, 或者当帖子编号除以4而其余为0时, 帖子应该很大。

代码如下：

<?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() ?>

#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() ?>