时间戳

首页 > 解决方案 > 卡片布局自定义帖子设计wordpress

css - 卡片布局自定义帖子设计wordpress

问题描述

我正在尝试在 wordpress 中完成简约的网格/卡片布局。我是新开发人员和 wordpress 新手，所以我很难达到这样的结果： 期望的结果

当前状态： 当前外观

我尝试了使用卡片的 boostrap 方法，但没有运气（因为我想保持图像的一致性）。这是我到目前为止的代码（我使用了在堆栈上找到的代码）：

<?php





global $post;
    get_header();
    the_post();
    global $user_ID;
     ?>
    <section class="blog-header-container">
     <div class="container">
        <!-- blog header -->
        <div class="row">
            <div class="col-md-12 blog-classic-top">
                <h2><?php _e("Promotions",ET_DOMAIN) ?></h2>
                <form id="search-bar" action="<?php echo home_url() ?>">
                    <i class="fa fa-search"></i>
                    <input type="text" name="s" placeholder="<?php _e("Search by city",ET_DOMAIN) ?>">
                </form>
            </div>
        </div>
        <!--// blog header  -->
    </div>
</section>
<section >
    <?php query_posts('post_type=promotions&post_status=publish&posts_per_page=10&paged='. get_query_var('paged')); ?>

    <?php 
    // Get total posts
    $total = $wp_query->post_count;

    // Set indicator to 0;
    $i = 0;
    ?>

    <?php while( have_posts() ): the_post(); ?>

        <?php if ( $i == 0 ) echo '<div class="row container" style="margin-top:25px">'; ?>


        <div class="col-sm-3" style="margin:40px">

        <p class="text-align:center">
            <?php if ( has_post_thumbnail() ) : ?>
                <a href="<?php the_permalink(); ?>"><?php the_post_thumbnail( 'my-custom-size' ); ?></a>
            <?php endif; ?>
        </p>

        <strong><p><a style="color: black;font-size:12" href="<?php the_permalink(); ?>"><?php the_title(); ?></a></p></strong>

        <p>Location: <?php echo get_post_meta($post->ID, 'promo_location', true); ?></p>
      <p>Expires: <?php echo get_post_meta($post->ID, 'promo_expiration', true); ?></p>       
 <span class="avatar-author">

                                Offered By: <a style="color: black;" href="<?php echo get_author_posts_url($post->post_author ); ?>"><?php the_author();?></a>

                            </span>


        </div><!-- col -->

        <?php $i++; ?>

        <?php

        if ( $i == $total ) { 
            echo '</div>';
        } else {

            if ( $i % 3 == 0 ) {
                echo '</div><div class="row">';
            }
        }
        ?>

    <?php endwhile; ?>

</div><!-- container -->
</section>
<?php



get_footer();

?>

谢谢！

标签： csswordpressbootstrap-4customizationgrid-layout

解决方案

这是一种使用填充 flex 容器的图像标题创建相同高度的图块的方法。最棘手的位在容器上：

display: flex;
justify-content: space-between;
flex-wrap: wrap;

您只需要使用边距和填充设置即可获得所需的排水沟。

.tiles {
  padding: 0 20px;
  background: #eee;
  display: flex;
  justify-content: space-between;
  flex-wrap: wrap;
}

.tile {
  width: calc(33.3% - 20px);
  background: #fff;
  margin: 10px 0;
}

.tile__header-image {
  height: 150px;
  background-position: center;
  background-size: cover;
  background-color: #666;
}

.tile__content {
  padding: 10px;
}

.tile__content h5 {
  margin: 0 0 6px;
}

.tile__content ul {
  list-style: none;
  padding: 0;
  margin: 0;
}

.tile__content li {
  display: inline-block;
  font-size: .8em;
  color: #999;
}

.tile__content li::after {
  content: " - "
}

.tile__content li:last-child::after {
  content: "";
}
<div class="tiles-wrapper">
  <div class="tiles">
    <div class="tile">
      <div class="tile__header-image" style="background-image: url( https://loremflickr.com/320/240 );"></div>
      <div class="tile__content">
        <h5>My Title Here</h5>
        <ul>
          <li>Tag 1</li>
          <li>Tag 2</li>
          <li>Tag 3</li>
        </ul>
      </div>
    </div>

    <div class="tile">
      <div class="tile__header-image" style="background-image: url( https://loremflickr.com/320/242 );"></div>
      <div class="tile__content">
        <h5>My Title Here</h5>
        <ul>
          <li>Tag 1</li>
          <li>Tag 2</li>
          <li>Tag 3</li>
        </ul>
      </div>
    </div>

    <div class="tile">
       <div class="tile__header-image" style="background-image: url( https://loremflickr.com/320/243 );"></div>
      <div class="tile__content">
        <h5>My Title Here</h5>
        <ul>
          <li>Tag 1</li>
          <li>Tag 2</li>
          <li>Tag 3</li>
        </ul>
      </div>
    </div>

    <div class="tile">
      <div class="tile__header-image" style="background-image: url( https://loremflickr.com/320/244 );"></div>
      <div class="tile__content">
        <h5>My Title Here</h5>
        <ul>
          <li>Tag 1</li>
          <li>Tag 2</li>
          <li>Tag 3</li>
        </ul>
      </div>
    </div>

    <div class="tile">
      <div class="tile__header-image" style="background-image: url( https://loremflickr.com/320/245 );"></div>
      <div class="tile__content">
        <h5>My Title Here</h5>
        <ul>
          <li>Tag 1</li>
          <li>Tag 2</li>
          <li>Tag 3</li>
        </ul>
      </div>
    </div>

    <div class="tile">
       <div class="tile__header-image" style="background-image: url( https://loremflickr.com/320/246 );"></div>
      <div class="tile__content">
        <h5>My Title Here</h5>
        <ul>
          <li>Tag 1</li>
          <li>Tag 2</li>
          <li>Tag 3</li>
        </ul>
      </div>
    </div>

  </div>
</div>

推荐阅读