Question

我想在两列而不是一列中显示我的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>

Answer 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;
}

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

在多列中显示WordPress发布内容

2 个答案: