如何将WordPress帖子水平显示为3列？ [英] How do I display WordPress posts into 3 columns horizontally?

问题描述

我将使用Bootstrap构建的主题集成到WordPress中，现在我面临着横向显示我的帖子而不是垂直显示的挑战。该设计使用3列。

I am integrating my theme built with Bootstrap into WordPress and I am now faced with the challenge of displaying my posts horizontally instead of vertically. The design uses 3 columns.

在此网站上发布的两个列的解决方案
（ http://perishablepress.com/two-column-horizo​​ntal-sequence-wordpress-post-order/ ）
是有帮助的，但它发布重复

The solution for two columns posted at this site (http://perishablepress.com/two-column-horizontal-sequence-wordpress-post-order/) was helpful but it posts repeats of previously displayed posts when used with 3 columns.

以下是我的代码：

    <div class="row">

    <?php if (have_posts()) : while(have_posts()) : $i++; if(($i % 2) == 0) : $wp_query->next_post(); else : the_post(); ?>

    <div class="col-sm-4">
    <img src="<?php the_field('home_page_slider_image'); ?>" class="img-responsive" >
    <h3><?php the_field( 'description' ); ?></h3>

    </div>

    <?php endif; endwhile; else: ?>
    <div>Alternate content</div>
    <?php endif; ?>

    <?php $i = 0; rewind_posts(); ?>

    <?php if (have_posts()) : while(have_posts()) : $i++; if(($i % 2) !== 0) : $wp_query->next_post(); else : the_post(); ?>

    <div class="col-sm-4">
    <img src="<?php the_field('home_page_slider_image'); ?>" class="img-responsive" >
    <h3><?php the_field( 'description' ); ?></h3>
    </div>

    <?php endif; endwhile; else: ?>
    <div>Alternate content</div>
    <?php endif; ?>


    <?php $i = 0; rewind_posts(); ?>

    <?php if (have_posts()) : while(have_posts()) : $i++; if(($i % 2) !== 0) : $wp_query->next_post(); else : the_post(); ?>

    <div class="col-sm-4">
    <img src="<?php the_field('home_page_slider_image'); ?>" class="img-responsive" >
    <h3><?php the_field( 'description' ); ?></h3>
    </div>

    <?php endif; endwhile; else: ?>
    <div>Alternate content</div>
    <?php endif; ?>



    </div>

任何帮助将不胜感激。

谢谢。

推荐答案

看看这个例子，它的工作方式像你想要的，并根据这个例子安排你的代码。

Take a look on this example, Its working like you want, and arrange your code according to this example.

$i = 1;
echo "<div class='row'>\n";
while( $i <= 10 ){

    echo "  <div class='col-lg-4'></div>\n";
    if( $i % 3 == 0 ) { echo "</div>\n<div class='row'>\n"; }

    $i++;
}
echo "</div>\n";

http://codepad.org/Qesw28Cw

这篇关于如何将WordPress帖子水平显示为3列？的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！