php - 如何使用 Bootstrap 在表格中显示 WordPress 帖子？

Question

我想在 WordPress 中以这种特定布局显示我最近的博客文章。如下:

1|2|3
-----
4|5|6

这是到目前为止我的代码......

<div class="container post_container">
    <div class="row">
        <div class="col-xs-12">
        <h1>Recent Posts</h1>

            <?php 

            $recentPost = new WP_Query('type=post&posts_per_page=6&order=ASC&');


            if(have_posts()) {
                while($recentPost->have_posts()) {
                    $recentPost->the_post(); ?>


        <br>
        <br>

        <div class="posts_table">
            <--Where all recent posts will be displayed-->
        </div>



                    <?php

                }
            }



             ?>

我想使用 WordPress 循环按时间顺序显示最后六篇文章，但我不知道如何创建它并且非常困惑。我不知道是否应该使用 HTML 表格或 Bootstrap 网格或两者都使用？

Answer 1

您可以将 WP_Query 参数用作数组，这样就不会那么困惑。

由于您想按时间顺序获取帖子，因此请按日期排序。您的 WP_Query 类实例变为:

$recentPost = new WP_Query(
    array(
        'type'           => 'post',
        'posts_per_page' => 6,
        'order'          => 'ASC',
        'orderby'        => 'date' // Order by date!
    )
);

然后我看到您正在使用带有行和列的 Bootstrap。

第一步，围绕 while() 循环创建所有内容:

<?php 


    if(have_posts()) {

        // First, build parent DIV element outside the while() loop
        ?>

        <div class="row posts_table">

        <?php

        // Setup the counter
        $counter = 0;

其次，在 while 循环内构建所有内容:

        // Iterate over the posts
        while($recentPost->have_posts()) {

            // Get next
            $recentPost->the_post();

            // Render post content here
            // Bootstrap uses 12 columns, we want 3 blocks. 12/3 = 4 thus use cols-xs-4.
            ?>

            <div class="cols-xs-4">
                <?php the_title(); ?>
            </div>

这是棘手的部分。三篇文章之后，我们正在构建一个新的行元素。为什么？因为 Bootstrap 被设计为连续使用 12 列，仅此而已。

如果您想稍后重构此代码，假设您希望每页有 9/15 个帖子，您可以轻松地从 WP_Query 内的数组更新 posts_per_page 值无需在 3、6、9 等位置手动设置休息时间。

            <?php

            // Increment for next post
            $counter++;

            // Use the modulo to break a Bootstrap row and start a new one
            // The HTML inside this control flow will be printed every third post (every third iteration).
            if($counter % 3 == 0){
                ?>
                </div>
                <div class="row posts_table">
                <?php
            }

        }

最后，我们只需关闭最后一个 .row.posts_table 元素即可。

        ?>

        </div>
        <!-- end of .row.posts_table -->

        <?php
    }


 ?>

此外，请查看 WordPress documentation on WP_Query ，尤其是WP_Query orderby part .

我不知道.posts_table对网站是否有任何意义，如果没有=>它可以被删除。