在多列中显示 WordPress 帖子内容答案

【问题标题】：Display WordPress Post Content in Multiple Columns在多列中显示 WordPress 帖子内容
【发布时间】：2017-12-04 06:04:37
【问题描述】：

我想在两列而不是一列中显示我的 Wordpress 帖子。

我正在使用 Bootstrap 和高级自定义字段。我有什么作品，但帖子在两个 col-lg-5 div 中重复。

    <div class="container">
    <?php // Display blog posts on any page @ https://m0n.co/l
    $temp = $wp_query; $wp_quersy= null;
    $wp_query = new WP_Query(); $wp_query->query('posts_per_page=-1' . '&paged='.$paged);
    while ($wp_query->have_posts()) : $wp_query->the_post(); ?>


        <div class="row">
            <div class="col-lg-2">
                <?php the_category(', '); ?>
            </div>

            <div class="col-lg-5 left">
               <?php the_post_thumbnail(); ?>
            <p><?php the_title(); ?></p>
            </div>

            <div class="col-lg-5">
                <?php the_post_thumbnail(); ?>
            <p><?php the_title(); ?></p>
            </div>
        </div>


    <?php endwhile; ?>

    <?php if ($paged > 1) { ?>

    <?php } else { ?>

    <?php } ?>

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

【问题讨论】：

当然是这样，因为您将它们输出到每一列中......整个方法没有什么意义，因为如果您希望在 row 中有多个帖子 i>，然后在循环内为每个帖子生成一个 row 元素显然不会实现。
对不起，我应该说我是这个@CBroe 的新手
首先，您想要达到的实际最终结果是什么 - 您是否想要一行具有左列和右列（其中每一列都将然后包含一半的帖子）；或者您想为每两个帖子创建一个新行？最终结果的外观主要取决于此，因为可能并非所有帖子都以相同的高度呈现；所以你要么有两列，帖子之间没有额外的空间（但可能在“较短”列的末尾有一个较长的可用空间），[...]
[...] 或者有两个帖子，每个帖子从相同的垂直位置开始，然后在这两个帖子中较短的一个下方留出空间，然后下一行有两个帖子开始。

标签： wordpress twitter-bootstrap advanced-custom-fields

【解决方案1】：

您需要做的是在 CSS 中使用列。

删除 PHP 文件中的附加列。

应用以下 CSS

.container {
    -moz-column-count: 2;
    -webkit-column-count: 2;
    column-count: 2;
    -moz-column-gap: 20px;
    -webkit-column-gap: 20px;
    column-gap: 20px;
}

.col-lg-5 {
    padding-bottom: 20px;
    width: auto;
    -webkit-column-break-inside: avoid;
    -moz-column-break-inside: avoid;
    -moz-page-break-inside: avoid;
    page-break-inside: avoid;
    break-inside: avoid-column;
}

【讨论】：

【解决方案2】：

您可以尝试以下方法：

<div class="container">
  <div class="row">
  <?php // Display blog posts on any page @ https://m0n.co/l
  $temp = $wp_query; $wp_quersy= null;
  $wp_query = new WP_Query(); $wp_query->query('posts_per_page=-1' . '&paged='.$paged);
  while ($wp_query->have_posts()) : $wp_query->the_post(); ?>



        <div class="col-lg-2">
            <?php the_category(', '); ?>
        </div>

        <div class="col-lg-5">
            <?php the_post_thumbnail(); ?>
        <p><?php the_title(); ?></p>
        </div>



  <?php endwhile; ?>
  </div>
<?php if ($paged > 1) { ?>

<?php } else { ?>

<?php } ?>

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

【讨论】：