Как отображать 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>

Это сделало бы работу, но не больше из-за этого.Как отобразить мои сообщения в столбцах без начальной загрузки?Просто для информации, мой контент-noticias:

<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

Проблема в вашем $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;
}

Это обеспечит очистку каждого третьего элемента, поэтому, если один из столбцов будет длиннее или короче, он не помешает макету.

Answer 2

Эй, мужик для строки, вы можете использовать свойство css flex-flow: row wrap; и для дочерних элементов flex-basis: 33%;, и любой из ваших элементов в вашем пост-цикле будет находиться в 3 столбцах, и вы можете изменить гибкую основу для других медиазапросов, чтобы изменить ее на например, для мобильных устройств!

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