在Wordpress中使用bootstrap网格系统将帖子内容划分为两列


Dividing post content in 2 columns in Wordpress using bootstrap grid system

我正试图创建一个博客页面,将帖子分为两列。我目前使用的设置是对每一列使用类别。"类别1"的帖子将显示在左栏,"类别2"的帖子显示在右栏。

我目前有以下代码,其中我使用引导程序框架提供的网格方法来划分这两列。我陷入困境的地方是wordpress一直显示单列页面,如下所示:https://i.stack.imgur.com/TGue1.jpg

你知道为什么会这样吗?

<div class="container">
<div class="row">
    <div class="span6">
    <?php query_posts('cat=1&showposts=10'); ?>
    <?php if ( have_posts() ) : while ( have_posts() ) : the_post(); ?>
    <h2><a href="<?php the_permalink() ?>" rel="bookmark" title="Permanent Link to <?php the_title_attribute(); ?>"><?php the_title(); ?></a></h2>
     <!-- Display the date (November 16th, 2009 format) and a link to other posts by this posts author. -->
     <small><?php the_time('F jS, Y') ?> by <?php the_author_posts_link() ?></small>

     <!-- Display the Post's content in a div box. -->
     <div class="entry">
       <?php the_content(); ?>
     </div>

     <!-- Display a comma separated list of the Post's Categories. -->
     <p class="postmetadata">Posted in <?php the_category(', '); ?></p>
     </div> <!-- closes the first div box -->
    <?php endwhile; else: ?>
    <p><?php _e('Sorry, no posts matched your criteria.'); ?></p>
    <?php endif; ?>
    <?php endwhile;?>
    </div>
    <div class="span6">
    <?php query_posts('cat=2&showposts=10'); ?>
    <?php if ( have_posts() ) : while ( have_posts() ) : the_post(); ?>
    <h2><a href="<?php the_permalink() ?>" rel="bookmark" title="Permanent Link to <?php the_title_attribute(); ?>"><?php the_title(); ?></a></h2>
     <!-- Display the date (November 16th, 2009 format) and a link to other posts by this posts author. -->
     <small><?php the_time('F jS, Y') ?> by <?php the_author_posts_link() ?></small>

     <!-- Display the Post's content in a div box. -->
     <div class="entry">
       <?php the_content(); ?>
     </div>

     <!-- Display a comma separated list of the Post's Categories. -->
     <p class="postmetadata">Posted in <?php the_category(', '); ?></p>
     </div> <!-- closes the first div box -->
    <?php endwhile; else: ?>
    <p><?php _e('Sorry, no posts matched your criteria.'); ?></p>
    <?php endif; ?>
    <?php endwhile;?>
    </div>
</div>

解决方案是一个简单的"duh"。将代码放在single.php(singleposts页面)中,而不是home.php(所有帖子都放在那里)。不管怎样,对于那些感兴趣的人来说,开场白中的代码是有效的!

以下是完整的代码,您必须将其放置在2列页面的wordpress模板的home.php中。请注意,您必须更改中"cat="之后的数字

<?php query_posts('cat=3&showposts=10'); ?>

您必须使用要在每列中包含的帖子的类别ID来更改编号。类别ID可以在WP管理屏幕的帖子类别选项卡下找到。选择类别并检查ID的URL。

<?php get_header(); ?>
<div class="container">
<div class="row-fluid">
<div class="span6">
  <?php query_posts('cat=3&showposts=10'); ?>
    <?php if ( have_posts() ) : ?>
        <?php while ( have_posts() ) : the_post(); ?>
            <?php get_template_part( 'content', get_post_format() ); ?>
        <h2><a href="<?php the_permalink(); ?>"><?php the_title(); ?></h2></a>
        <p>Posted at <em><?php the_time('l, F jS, Y'); ?></em> by <?php the_author(); ?> </p>
        <?php the_content(); ?>
    <?php endwhile; else: ?>
        <p><?php _e('Sorry, this page does not exist.'); ?></p>
    <?php endif; ?>
  </div>
  <div class="span6">
  <?php query_posts('cat=4&showposts=10'); ?>
    <?php if ( have_posts() ) : ?>
        <?php while ( have_posts() ) : the_post(); ?>
            <?php get_template_part( 'content', get_post_format() ); ?>
        <h2><a href="<?php the_permalink(); ?>"><?php the_title(); ?></h2></a>
        <p>Posted at <em><?php the_time('l, F jS, Y'); ?></em> by <?php the_author(); ?> </p>
        <?php the_content(); ?>
    <?php endwhile; else: ?>
        <p><?php _e('Sorry, this page does not exist.'); ?></p>
    <?php endif; ?>
  </div>
</div>
</div>
<?php get_footer(); ?>

在第一个<?php endwhile;?>之后有一个额外的</div>,这将关闭该行

是的,我很确定这就是

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