时间戳

首页 > 解决方案 > 如何在三列中显示 wordpress 帖子？

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

问题描述

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

我在引导程序中使用了这段代码，但我不能再这样做了，因为它以某种方式破坏了我页面的其他部分。我不得不改变它。

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

标签： phphtmlcsswordpress

解决方案

嘿，对于行，您可以使用 css 属性flex-flow: row wrap; 和子项目flex-basis: 33%;，并且您的帖子循环中的任何项目都将在 3 列中，并且您可以更改其他媒体查询的弹性基础以在移动设备上更改 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>

推荐阅读