使用引导网格系统在Wordpress中将帖子内容分为2列

时间:2013-08-13 16:21:17

标签: php html css wordpress twitter-bootstrap

我正在尝试创建一个博客页面,我希望将帖子分成两列。我正在使用的当前设置是为每列使用类别。 “类别1”帖子将显示在左侧列中,“类别2”帖子将显示在右侧。

我目前有以下代码,我使用bootstrap框架提供的网格方法对两列进行划分。我被困的地方是wordpress一直显示一个列页面,如下所示:http://imgur.com/RLeZLVQ

为什么会发生这种情况?

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

2 个答案:

答案 0 :(得分:1)

解决方案是一个简单的'呃'。将代码放在single.php(单个帖子页面)而不是home.php(所有帖子都去了)中。无论如何,对于那些感兴趣的人来说,开场帖中提供的代码是有效的!

以下是您必须放在wordpress模板的home.php中的完整代码,用于2列页面。请注意,您必须在

中的'cat ='之后更改数字
<?php query_posts('cat=3&showposts=10'); ?>

您必须使用每列中要包含的帖子的类别ID更改数字。可以在帖子类别选项卡下的WP管理屏幕中找到类别ID。选择类别并检查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(); ?>

答案 1 :(得分:0)

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

是的,我很确定这就是这样做的

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

<?php endwhile;?>
</div>  <----