时间戳

首页 > 解决方案 > 使用 php 循环 WordPress 的响应框布局

javascript - 使用 php 循环 WordPress 的响应框布局

问题描述

我在一行中显示 4 张优惠券。有些优惠券没有描述、有效期等，但我需要所有优惠券的尺寸相同。

我尝试应用不同的 CSS 片段，但无法使它们具有相同的大小。我也玩过 PHP 代码脚本，但运气不好。

function clipmydeals_display_grid_coupon($id) {
<article id="coupon-grid-<?php echo $id; ?>"<?php post_class('card '.get_post_meta($id, 'cmd_type', true)); ?>>

<div class="card-body" style="z-index:2;">
<?php if(!empty(get_post_meta($id, 'cmd_valid_till', true)))
 { ?>

<div class="badge badge-<?php echo $validity_color; ?>">
 <?php 
echo __('Ends ','clipmydeals').' '.date("jS F Y",strtotime(get_post_meta($id, 'cmd_valid_till', true))); ?>

</div>
<?php } ?>



    <div>
    <?php
    if ( is_single($id) or get_theme_mod('coupon_page','yes')=='no') :
    ?>
    <h3 class="card-title text-center mt-0 pb-0">
     <?php echo get_the_title($id); ?></h3>
    <?php
    else :
    ?>

    <h3 class="card-title text-center mt-0 pb-0">
   <a href="<?php echo esc_url( get_permalink($id) ); ?>" rel="bookmark">
   <?php echo get_the_title($id); ?>
   </a>
      </h3>

      </div>

    <div class="text-center">
    <?php
    // BUTTON
        clipmydeals_button($id, 'grid', $store_slug, $store_custom_fields);
    ?>
    </div>


       <div class="card-text mt-4"><?php the_content(); ?></div>

      <div class="small mt-0 mb-1">
    <?php
    $sep = '';
    if(!is_tax('stores')) { echo get_the_term_list( $id, 'stores','',', ',''); $sep = ','; } // stores
          ?>
       </div> 


       <?php
    if(get_theme_mod('location_taxonomy',false) and get_theme_mod('show_coupon_locations','all') != 'no') 
      {$location_html = array();
    $terms = get_the_terms( $id, 'locations'); // locations
    if($terms and !is_wp_error($terms)) {
    foreach($terms as $term) {
                            if(get_theme_mod('location_taxonomy',false) and get_theme_mod('show_coupon_locations','all')=='all' or $term->parent == 0) {
                                $location_html[] = ' <a href="'.get_term_link($term).'">'.$term->name.'</a>';
    }
    }
    }
    if(!empty($location_html)) {
         ?>

     <div class="small mt-0 mb-1">
<i class="fa fa-map-marker"></i><?php echo implode(', ',$location_html); ?>
    </div>

             <?php
        }
        }
        ?>


        <?php
        if(!empty(get_post_meta($id, 'cmd_verified_on', true))
                    or
            (comments_open($id) and 
                     get_theme_mod('coupon_page','yes')=='yes')
            ) {
        ?>
        <div>




            <?php if(comments_open($id) and get_theme_mod('coupon_page','yes')=='yes') { ?><div class="float-right">
<a class="card-link" href="<?php echo esc_url(get_permalink()).'#comments'; ?>">
   <i class="fa fa-comment"></i>         <?php $comment_count = wp_count_comments($id); echo $comment_count->approved; ?>
        </a>

          </div>
             <?php } ?>

           <?php echo do_shortcode( '[addtoany]' ); ?>

        </div>
        <?php } ?>

        </div> <!--End card-body-->

    </article><!-- #post-## -->
    <?php
}

我希望每个盒子都必须根据前一个盒子的大小或相反的方式自动重新调整自己。它们必须看起来像对称的。

我的实际结果

我的实际结果

标签： javascriptphphtmlcsswordpress

解决方案

您可以设置物品卡片的最小高度，以保持每个盒子的尺寸相同。

在这个例子中，我使用了 flex-box 来创建卡片的水平线。Flex-box 非常适合在网格结果中添加文章卡和帖子列表。

运行代码片段以查看结果...

* { 
box-sizing: border-box; 
}

body {
  max-width: 980px;
  margin: 1em auto;
  font-size: 20px;
  line-height: 1.5;
}

.card {
  text-align: center;
  background-color: #333333;
  color: #fff;
  padding: 1em;
  border-radius: 3px;
  min-height: 400px;
  margin: 1em;
}

.row {
  display: flex;
  flex-wrap: wrap;
  margin: 0 .5em;
}

.column {
  flex: 1;
}

/* Column Spans */
.column--2of5 { flex: 0 0 40%; }
.column--1of2 { flex: 0 0 50%; }
.column--3of5 { flex: 0 0 60%; }
.column--2of3 { flex: 0 0 66.6666%; }
.column--3of4 { flex: 0 0 75%; }
.column--4of5 { flex: 0 0 80%; }
<div class="row">
  <div class="column">
    <div class="card">
      item here
    </div>
  </div>
  <div class="column">
    <div class="card">
      item here
    </div>
  </div>
  <div class="column">
    <div class="card">
      item here
    </div>
  </div>
  <div class="column">
    <div class="card">
      item here
    </div>
  </div>
</div>

推荐阅读