Bootstrap Grid 中的 Wordpress 自定义查询

Question

我想请求一些帮助，以便在 Bootstrap 4 网格布局中添加 5 个最新帖子。我只是似乎没有得到正确的代码。

有人可以帮帮我吗

我已经发布了关于我正在尝试做的事情的图像和代码。

查看图片以了解我需要什么帮助

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

Answer 1

如果您使用的是 bootstrap 4 ...您可以将 4 的网格设置为col-6（我使用 md），因为它会自动运行到下一行而不会破坏布局。如果您使用的是引导程序 3，则必须使用计数器来增加行数。<div class="row">&nbsp; &nbsp; <!-- Real Data -->&nbsp; &nbsp; <?php&nbsp;&nbsp; &nbsp; &nbsp; &nbsp; $lastPagePosts = new WP_Query(&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; array('posts_per_page' => 1&nbsp; &nbsp; &nbsp; &nbsp; ));&nbsp; &nbsp; &nbsp; &nbsp; while ($lastPagePosts->have_posts()) {&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; $lastPagePosts->the_post(); ?>&nbsp; &nbsp; &nbsp; &nbsp; <div class="col-sm-12 col-lg-6 big-box">&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; <h2><?php the_title(); ?></h2>&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; <p><?php echo wp_trim_words( get_the_content() , 12 ) ?></p>&nbsp; &nbsp; &nbsp; &nbsp; </div>&nbsp; &nbsp; <?php } ?>&nbsp; &nbsp; <div class="col">&nbsp; &nbsp; &nbsp; &nbsp; <div class="row">&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; <?php&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; $topPagePosts = new WP_Query(&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; array('posts_per_page' => 4, 'offset' => 1&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; ));&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; while ($topPagePosts->have_posts()) {&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; $topPagePosts->the_post(); ?>&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; <div class="col-md-6">&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; <h2><?php echo wp_trim_words( get_the_title() , 6) ?></h2>&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; <p><?php echo wp_trim_words( get_the_content() , 9 ) ?></p>&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; </div>&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; <?php } ?>&nbsp; &nbsp; &nbsp; &nbsp; </div>&nbsp; &nbsp; </div>&nbsp; &nbsp; <!-- Dummy Data -->&nbsp; &nbsp; <div class="col-sm-12 col-lg-6 big-box">&nbsp; &nbsp; &nbsp; &nbsp; <h2>Latest News</h2>&nbsp; &nbsp; &nbsp; &nbsp; <p>The big bog will display the most resent post.</p>&nbsp; &nbsp; </div>&nbsp; &nbsp; <div class="col">&nbsp; &nbsp; &nbsp; &nbsp; <div class="row">&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; <div class="col mini-box">&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; <h2>Second</h2>&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; <p>The big bog will display the Second most resent post.</p>&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; </div>&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; <div class="col mini-box">&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; <h2>Third</h2>&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; <p>The big bog will display the Third most resent post.</p>&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; </div>&nbsp; &nbsp; &nbsp; &nbsp; </div>&nbsp; &nbsp; &nbsp; &nbsp; <div class="row">&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; <div class="col mini-box">&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; <h2>Fourth</h2>&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; <p>The big bog will display the Fourth most resent post.</p>&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; </div>&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; <div class="col mini-box">&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; <h2>Fifth</h2>&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; <p>The big bog will display the Fifth most resent post.</p>&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; </div>&nbsp; &nbsp; &nbsp; &nbsp; </div>&nbsp; &nbsp; </div></div>