如何使用 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 参数用作数组，这样会更容易混淆。

由于您想按时间顺序获取帖子，请按date 排序。您的 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对网站有没有意义，如果没有=>可以去掉。

Answer 2

我想你可能正在寻找这样的东西。请注意，@Joachim 提供了更深入的答案，但以下是您的原始代码的修改版本，可能是您前进的一个很好的参考。

<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()) {
                // the wrapper div goes between the IF outside the while
                // added a '.row' class here ?>
                <div class="posts_table row">
                    <?php
                    while($recentPost->have_posts()) {
                        $recentPost->the_post(); 
                            // the column class is added below here inside the WHILE
                            // it needs to output on each loop ?>
                            <div class="col-xs-4">

                                <!-- post content comes here -->

                            </div>

                        <?php

                    } // end the WHILE
                // the .posts_table wrapper is closed here outside the WHILE inside the IF ?>
                </div>
            <?php
        } // end the IF




             ?>