使用Bootstrap在一列中显示Wordpress类别,在两列中显示帖子

时间:2017-07-02 10:42:12

标签: php wordpress twitter-bootstrap

我正在尝试在a中显示我的Wordpress帖子类别,然后在两列中显示我的帖子。

我是PHP的新手,我现在陷入困境并且有点卡住了!任何帮助都会非常有帮助。

以下是我尝试实现的内容的参考,其中类别显示在较小的列中,帖子分为两列:https://nmbw.com.au/works-and-projects/

<div class="container">

    <?php 
    // the query
    $wpb_all_query = new WP_Query(array('post_type'=>'post', 'post_status'=>'publish', 'posts_per_page'=>-1)); ?>

    <?php if ( $wpb_all_query->have_posts() ) : ?>

    <div class="row">
            <div class="col-lg-2">
                Categories
            </div>
        <!-- the loop -->
        <?php while ( $wpb_all_query->have_posts() ) : $wpb_all_query->the_post(); ?>
            <div class="col-lg-5">
                   <a href="<?php the_permalink(); ?>">
                    <?php the_post_thumbnail(); ?>
                <p><?php the_title(); ?></p>
                   </a>
            </div>
        <?php endwhile; ?>
        <!-- end of the loop -->
    </div>
</div>

    <?php wp_reset_postdata(); ?>

    <?php else : ?>
    <p><?php _e( 'Sorry, no posts matched your criteria.' ); ?></p>
    <?php endif; ?>     

1 个答案:

答案 0 :(得分:0)

您可以像这样嵌套列。

<div class="container">

<?php 
// the query
$wpb_all_query = new WP_Query(array('post_type'=>'post', 'post_status'=>'publish', 'posts_per_page'=>-1)); ?>

<?php if ( $wpb_all_query->have_posts() ) : ?>

<div class="row">
  <div class="col-lg-2">
    Categories
  </div>
  <div class="col-lg-10">
    <div class="row">
      <!-- the loop -->
      <?php while ( $wpb_all_query->have_posts() ) : $wpb_all_query->the_post(); ?>
        <div class="col-lg-5">
          <a href="<?php the_permalink(); ?>">
            <?php the_post_thumbnail(); ?>
            <p><?php the_title(); ?></p>
          </a>
        </div>
      <?php endwhile; ?>
      <!-- end of the loop -->
    </div>
  </div>
</div>

</div>

<?php wp_reset_postdata(); ?>

<?php else : ?>
<p><?php _e( 'Sorry, no posts matched your criteria.' ); ?></p>
<?php endif; ?>