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

如何使用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?

  • 写回答

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.

    本回答被题主选为最佳回答 , 对您是否有帮助呢?
    评论
查看更多回答(1条)

报告相同问题?

悬赏问题

  • ¥15 求差集那个函数有问题,有无佬可以解决
  • ¥15 【提问】基于Invest的水源涵养
  • ¥20 微信网友居然可以通过vx号找到我绑的手机号
  • ¥15 寻一个支付宝扫码远程授权登录的软件助手app
  • ¥15 解riccati方程组
  • ¥15 display:none;样式在嵌套结构中的已设置了display样式的元素上不起作用?
  • ¥15 使用rabbitMQ 消息队列作为url源进行多线程爬取时,总有几个url没有处理的问题。
  • ¥15 Ubuntu在安装序列比对软件STAR时出现报错如何解决
  • ¥50 树莓派安卓APK系统签名
  • ¥65 汇编语言除法溢出问题