如何在三列中显示wordpress帖子？

Question

似乎是一个愚蠢的问题，但我无法在三列中显示帖子。我在引导程序中使用此代码，但我不能再使用了，因为它以某种方式破坏了我页面的其他部分。我不得不改变它。<div class="row" style="margin-top:-30px">    <?php         $count=0;         query_posts('posts_per_page=9');         while (have_posts()) : the_post();     ?>    <div class="col-sm-4 blog-post thumb">        <?php get_template_part('content-noticias', get_post_format()); ?>    </div>    <?php         $count++;         if($count == 3 || $count == 6 ) echo '</div><div class="row">';        endwhile;    ?></div>它可以完成这项工作，但不再是因为这个。如何在没有引导程序的情况下在列中显示我的帖子？仅供参考，我的内容通知是：<div class="noticias">    <a href="<?php the_permalink(); ?>"> <?the_post_thumbnail();?> </a>    <h1 style="margin-top:-30px"><a href="<?php the_permalink(); ?>" title="<?php the_title_attribute(); ?>"><?php the_title(); ?></a></h1>    <div><p><?php echo wp_trim_words( get_the_content(), 50 ); ?></p></div>  </div></div>

Answer 1

嘿伙计，您可以使用 css 属性flex-flow: row wrap; 和子项，flex-basis: 33%;并且您的 post 循环中的任何项都将在 3 列中，并且您可以更改其他 mediaquery 的 flex 基础以在移动设备上更改 sie，例如，检查一下！

.container {

  max-width: 1335px;

  margin: 0 auto;

}

.grid-row {

  display: flex;

  flex-flow: row wrap;

  justify-content: flex-start;

}

.grid-item {

  height: 250px;

  flex-basis: 33%;

  -ms-flex: auto;

  width: 250px;

  position: relative;

  padding: 10px;

  box-sizing: border-box;

  background-color: #ededed;

  border: 1px solid white;

}

@media(max-width: 1333px) {

  .grid-item {

    flex-basis: 33.33%;

  }

}

@media(max-width: 1073px) {

   .grid-item {

    flex-basis: 33.33%;

  }

}

@media(max-width: 815px) {

  .grid-item {

    flex-basis: 33%;

  }

}

@media(max-width: 555px) {

  .grid-item {

    flex-basis: 100%;

  }

}

<div class='container'>

    <div class='grid-row'>

        <div class='grid-item'>

            <div class="noticias">

                <a href="<?php the_permalink(); ?>">

                    <?the_post_thumbnail();?>

                </a>

                <h1 style="margin-top:-30px"><a href="<?php the_permalink(); ?>" title="<?php the_title_attribute(); ?>"><?php the_title(); ?></a></h1>

                <div>

                    <p>

                        <?php echo wp_trim_words( get_the_content(), 50 ); ?>

                    </p>

                </div>

            </div>

        </div>

        <div class='grid-item'>

            <div class="noticias">

                <a href="<?php the_permalink(); ?>">

                    <?the_post_thumbnail();?>

                </a>

                <h1 style="margin-top:-30px"><a href="<?php the_permalink(); ?>" title="<?php the_title_attribute(); ?>"><?php the_title(); ?></a></h1>

                <div>

                    <p>

                        <?php echo wp_trim_words( get_the_content(), 50 ); ?>

                    </p>

                </div>

            </div>

        </div>

        <div class='grid-item'>

            <div class="noticias">

                <a href="<?php the_permalink(); ?>">

                    <?the_post_thumbnail();?>

                </a>

                <h1 style="margin-top:-30px"><a href="<?php the_permalink(); ?>" title="<?php the_title_attribute(); ?>"><?php the_title(); ?></a></h1>

                <div>

                    <p>

                        <?php echo wp_trim_words( get_the_content(), 50 ); ?>

                    </p>

                </div>

            </div>

        </div>

        <div class='grid-item'>

            <div class="noticias">

                <a href="<?php the_permalink(); ?>">

                    <?the_post_thumbnail();?>

                </a>

                <h1 style="margin-top:-30px"><a href="<?php the_permalink(); ?>" title="<?php the_title_attribute(); ?>"><?php the_title(); ?></a></h1>

                <div>

                    <p>

                        <?php echo wp_trim_words( get_the_content(), 50 ); ?>

                    </p>

                </div>

            </div>

        </div>

        <div class='grid-item'>

            <div class="noticias">

                <a href="<?php the_permalink(); ?>">

                    <?the_post_thumbnail();?>

                </a>

                <h1 style="margin-top:-30px"><a href="<?php the_permalink(); ?>" title="<?php the_title_attribute(); ?>"><?php the_title(); ?></a></h1>

                <div>

                    <p>

                        <?php echo wp_trim_words( get_the_content(), 50 ); ?>

                    </p>

                </div>

            </div>

        </div>

        <div class='grid-item'>

            <div class="noticias">

                <a href="<?php the_permalink(); ?>">

                    <?the_post_thumbnail();?>

                </a>

                <h1 style="margin-top:-30px"><a href="<?php the_permalink(); ?>" title="<?php the_title_attribute(); ?>"><?php the_title(); ?></a></h1>

                <div>

                    <p>

                        <?php echo wp_trim_words( get_the_content(), 50 ); ?>

                    </p>

                </div>

            </div>

        </div>

    </div>

</div>

Answer 2

问题出在你的$count if陈述中：

if($count == 3 || $count == 6 ) echo '</div><div class="row">'; <-- THIS WILL NEVER CLOSE

你可以做的是：

<div class="row" style="margin-top:-30px">

    <?php 

        query_posts('posts_per_page=9'); 

        while (have_posts()) : the_post(); 

    ?>

    <div class="col-sm-4 blog-post thumb">

        <?php get_template_part('content-noticias', get_post_format()); ?>

    </div>

    <?php endwhile;?>

</div>

然后你可以使用 CSS 来确保你的列保持完整：

.row .blog-post:nth-child(3n+1) {

    clear: left;

}

这将确保每第三个元素都会被清除，因此如果其中一列更长或更短，它不会弄乱布局。