Пользовательский запрос Wordpress в сетке Bootstrap

Question

Я хотел бы попросить некоторую помощь в добавлении 5 последних постов в макете Bootstrap 4 Grid. Кажется, я не совсем правильно понял код.

Может кто-нибудь, пожалуйста, помогите мне

Я разместил сообщение и изображение и код на том, что я пытаюсь сделать. * Просмотр изображения, чтобы получить представление о том, что мне нужно помочь с

<?php
get_template_part('content-wrapper'); ?>
<div class="row">
    <!-- Real Data -->
    <?php 
        $lastPagePosts = new WP_Query(
            array('posts_per_page' => 1
        ));
        while ($lastPagePosts->have_posts()) {
            $lastPagePosts->the_post(); ?>
        <div class="col-sm-12 col-lg-6 big-box">
            <h2><?php the_title(); ?></h2>
            <p><?php echo wp_trim_words( get_the_content() , 12 ) ?></p>
        </div>
    <?php } ?>
    <div class="col">
        <div class="row">
            <?php
                $topPagePosts = new WP_Query(
                    array('posts_per_page' => 4, 'offset' => 1 <!-- Updated this line -->
                ));
                while ($topPagePosts->have_posts()) {
                    $topPagePosts->the_post(); ?>
                <div class="col mini-box">
                    <h2><?php echo wp_trim_words( get_the_title() , 6) ?></h2>
                    <p><?php echo wp_trim_words( get_the_content() , 9 ) ?></p>
                </div>
            <?php } ?>
        </div>
    </div>

    <!-- Dummy Data -->

    <div class="col-sm-12 col-lg-6 big-box">
        <h2>Latest News</h2>
        <p>The big bog will display the most resent post.</p>
    </div>

    <div class="col">
        <div class="row">
            <div class="col mini-box">
                <h2>Second</h2>
                <p>The big bog will display the Second most resent post.</p>
            </div>
            <div class="col mini-box">
                <h2>Third</h2>
                <p>The big bog will display the Third most resent post.</p>
            </div>
        </div>
        <div class="row">
            <div class="col mini-box">
                <h2>Fourth</h2>
                <p>The big bog will display the Fourth most resent post.</p>
            </div>
            <div class="col mini-box">
                <h2>Fifth</h2>
                <p>The big bog will display the Fifth most resent post.</p>
            </div>
        </div>
    </div>
</div>
<?php

.mini-box {
    margin: 2px;
    font-size: 1.5em;
}

Answer 1

Если вы используете bootstrap 4 ... вы можете просто сделать вашу сетку 4 равной col-6 (я использовал md), поскольку она будет автоматически переходить к следующей строке, не разрушая компоновку. Если вы используете bootstrap 3, вы должны использовать счетчик для увеличения строк.

<div class="row">
    <!-- Real Data -->
    <?php 
        $lastPagePosts = new WP_Query(
            array('posts_per_page' => 1
        ));
        while ($lastPagePosts->have_posts()) {
            $lastPagePosts->the_post(); ?>
        <div class="col-sm-12 col-lg-6 big-box">
            <h2><?php the_title(); ?></h2>
            <p><?php echo wp_trim_words( get_the_content() , 12 ) ?></p>
        </div>
    <?php } ?>
    <div class="col">
        <div class="row">
            <?php
                $topPagePosts = new WP_Query(
                    array('posts_per_page' => 4, 'offset' => 1
                ));
                while ($topPagePosts->have_posts()) {
                    $topPagePosts->the_post(); ?>
                <div class="col-md-6">
                    <h2><?php echo wp_trim_words( get_the_title() , 6) ?></h2>
                    <p><?php echo wp_trim_words( get_the_content() , 9 ) ?></p>
                </div>
            <?php } ?>
        </div>
    </div>

    <!-- Dummy Data -->

    <div class="col-sm-12 col-lg-6 big-box">
        <h2>Latest News</h2>
        <p>The big bog will display the most resent post.</p>
    </div>

    <div class="col">
        <div class="row">
            <div class="col mini-box">
                <h2>Second</h2>
                <p>The big bog will display the Second most resent post.</p>
            </div>
            <div class="col mini-box">
                <h2>Third</h2>
                <p>The big bog will display the Third most resent post.</p>
            </div>
        </div>
        <div class="row">
            <div class="col mini-box">
                <h2>Fourth</h2>
                <p>The big bog will display the Fourth most resent post.</p>
            </div>
            <div class="col mini-box">
                <h2>Fifth</h2>
                <p>The big bog will display the Fifth most resent post.</p>
            </div>
        </div>
    </div>
</div>