在多列中显示内容

时间:2016-09-04 作者:neeraj

我正在创建一个多行、两列的博客帖子,就像这样

Post #1   |   Post #4
Post #2   |   Post #5
Post #3   |   Post #6
我发现一些帖子很有用

https://digwp.com/2010/03/wordpress-post-content-multiple-columns/

根据这篇文章,我创建了如下代码

<?php

// Some sample styles for the images
echo "<style type=\'text/css\'>
div#left-column {
    width: 150px;
    float: left;
    clear: none;
    }
div#right-column {
    width: 150px;
    float: left;
    clear: none;
    }
</style>\\n";

?>


<div class="container">
    <div class="row">
        <div class="span6">
                <div class="span4">
           <?php if (have_posts()) : 
           while(have_posts()) : 
           $i++; ?>

           <?php if(($i % 2) !== 0) :?>

<div id="left-column" class="col-xs-6">
           <?php $wp_query->next_post();the_excerpt();?>
           </div>

<div id="right-column" class="col-xs-6">

           <?php else : the_post(); the_excerpt();?>
</div>                

<?php endif; endwhile; else: ?>
<?php endif; ?>

<?php $i = 0; rewind_posts(); ?>
</div>
</div>
但是这个代码给我的输出是

enter image description here

它要么发布奇数帖子,要么发布偶数帖子,并且以扭曲的方式。。。我尝试了很多方法,但都没能在水平方向上找到替代的帖子,要么是完全垂直,要么是水平方向。有人能告诉我我在说什么吗,任何建议都会有帮助的

2 个回复
SO网友:neeraj

找到了一个简单的解决方案。。我张贴完整的索引。php

<?php
/**
 * Description: Default Index template to display loop of blog posts
 *
 * @package WordPress
 * @subpackage BootstrapWP
 */
get_header(); ?>

<?php

// Some sample styles for the images
echo "<style type=\'text/css\'>

    .half {
    width: 50%;
    float: left;
}

.ng-row {
    clear: both;
}

</style>\\n";

?>

<div class="container">
    <div class="row">
        <div class="span6">
                <div class="span4">


<?php if (have_posts()) : while (have_posts()) : the_post(); ?>
<div class="half">
<?php the_excerpt()?>

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

    <?php get_sidebar(\'blog\'); ?>
    <?php get_footer(); ?>
另一个没有发现和修改偶/奇的干净且更精确的解决方案是

<?php if (have_posts()) : 

    while(have_posts()) :
    $i++; 

     the_post()?>


 <div class="row" style="width: 670px;">
 <div id="left-column">

 <?php the_content(); ?>
 </div>

<?php 
endwhile;
?>

<style>

 left-column {
width: 333px;
float: right;
clear: none;
}

</style>
希望这对您有所帮助

SO网友:ProxxiM

在查看示例中的代码时,我猜您试图复制digwp文章中的第5个选项。

第一次运行查询时,将拾取奇数帖子并将其放置在左列中。之后,他们使用rewind\\u posts();将查询重置为开头。然后,查询将再次运行,以拾取所有偶数帖子并将其放置在右侧列中。

您的代码确实会倒回帖子,但右栏应该在该操作之后用第二个查询填充,而不是之前。您只运行了一次查询。希望这有帮助!