Как создать первый пост, пятый пост на всю ширину, остальные три колонки и т. Д.

Question

Я новичок в разработке 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() ?>

найти мой экран здесь

Answer 1

Надеюсь, это поможет вам.

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

Answer 2

Ваш текст не очень четкий, но я предполагаю, что вы хотите иметь 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() ?>