doucigua0278
2016-09-09 14:53
浏览 60
已采纳

如何使用Bootstrap在表格中显示WordPress帖子?

I want to display my recent blog posts in this specific layout in WordPress. Here it is below:

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

Here is my code so far.....

<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

                }
            }



             ?>

I want to use the WordPress loop display the last six posts going in chronological order and I have no idea how to create it and very confused. I have zero idea if I should be using HTML table or Bootstrap grids or both?

图片转代码服务由CSDN问答提供 功能建议

我想在WordPress中以此特定布局显示我最近的博文。 它位于下面:

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

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

 &lt; div class =“container post_container”&gt; 
&lt; div class =“row”  &gt; 
&lt; div class =“col-xs-12”&gt; 
&lt; h1&gt;最近的帖子&lt; / h1&gt; 
 
&lt;?php 
 
 $ recentPost = new WP_Query('type  = post&amp; posts_per_page = 6&amp; order = ASC&amp;'); 
 
 
 if(have_posts()){
 while($ recentPost-&gt; have_posts()){
 $ recentPost-&gt; the_post(  );  ?&n; 
 
 
&lt; br&gt; 
&lt; br&gt; 
 
&lt; div class =“posts_table”&gt; 
&lt;  - 将显示所有最近的帖子 - &gt;  
&lt; / div&gt; 
 
 
 
&lt;?php 
 
} 
} 
 
 
 
?&gt; 
   
  
 

我想使用WordPress循环显示按时间顺序排列的最后六个帖子,我不知道如何创建它并且非常困惑。 我不知道我是否应该使用HTML表格或Bootstrap网格或两者兼而有之?

  • 写回答
  • 关注问题
  • 收藏
  • 邀请回答

2条回答 默认 最新

  • dongyin8009 2016-09-09 15:37
    已采纳

    You could use the WP_Query argument as an array, it's much less confusing.

    Since you want to fetch the posts in a chronological order, order by date. Your instance of the class WP_Query becomes:

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

    Then I see you're using Bootstrap with rows and columns.

    First step, create everything around the while() loop:

    <?php 
    
    
        if(have_posts()) {
    
            // First, build parent DIV element outside the while() loop
            ?>
    
            <div class="row posts_table">
    
            <?php
    
            // Setup the counter
            $counter = 0;
    

    Second, build everything inside the while loop:

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

    This is the tricky part. After three posts, we're building a new row element. Why? Because Bootstrap was designed to use 12 columns in a row, no more.

    If you want to refactor this code later on, let's say you want 9/15 posts per page, you can easily update the posts_per_page value from the array inside WP_Query without manually putting in a break at 3, 6, 9 and so on.

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

    Finally, we only have to close our last .row.posts_table element.

            ?>
    
            </div>
            <!-- end of .row.posts_table -->
    
            <?php
        }
    
    
     ?>
    

    Also, check out the WordPress documentation on WP_Query, especially the WP_Query orderby part.

    I don't know if .posts_table has any meaning to the website, if not => it can be removed.

    已采纳该答案
    打赏 评论
  • doubi4531 2016-09-09 15:50

    I think you might be looking for something like this. Note that @Joachim has provided a more in depth answer but the below is a modified version of your original code that might be a good reference for you moving forward.

    <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
    
    
    
    
                 ?>
    
    打赏 评论

相关推荐 更多相似问题