如何使用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個帖子，則可以輕松地從posts_per_page內部的數組中更新posts_per_page值，而無需手動在WP_Query中斷。

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


 ?>

另外，請查看WP_Query上的WordPress文檔 ，尤其是WP_Query orderby部分 。

我不知道.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




             ?>