Question

似乎是一个愚蠢的问题，但我无法在三列中显示帖子。

我在引导程序中使用了此代码，但由于它以某种方式破坏了页面的其他部分，我无法再这样做了。我必须更改它。

  wp.customize('link_visited_color', function(value) {
    value.bind(function(to) {
      $('a')
        .css({
          color: to
        });
    });
  });

它将完成工作，但由于这个原因，不再这样做。如何在没有引导的情况下以列显示我的帖子？仅供参考，我的内容通知是：

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

Answer 1

嘿，您可以使用css属性flex-flow: row wrap;和子项flex-basis: 33%;进行行操作，并且帖子循环中的任何项都将位于3列中，并且您可以为其他mediaquery更改flex基础例如，要在移动设备上进行更改，请检查！！

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

这将确保每个第三个元素都将清除，因此，如果其中一列较长或较短，则不会与布局混淆。

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

2 个答案: