Bootstrap Grid 中的 Wordpress 自定义查询

Question

我想请求一些帮助，以便在 Bootstrap 4 网格布局中添加 5 个最新帖子。我只是似乎没有得到正确的代码。有人可以帮帮我吗我已经发布了关于我正在尝试做的事情的图像和代码。查看图片以了解我需要什么帮助<?phpget_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">

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