将普通格线修改为砖石格线

时间:2020-05-14 作者:Frenchy35

我目前正在创建wordpress主题,到目前为止,我的所有代码都运行良好(我的主题基于同位素js图库),但我想将我的普通网格转换为砖石网格,你能帮我吗?

这是我的代码:

    <?php
/**
 *  gallery isotope
 *
 */
 ?> 
<div class="isotopewrapper customprimary">  

<div id="filters" class="button-group"> 
  <button class="gallery-button btn from-top" data-filter="*">All</button>
  <?php 
      $terms = get_terms("rt-ga-cat"); 
      $count = count($terms); 
      if ( $count > 0 ){ 
        foreach ( $terms as $term ) { 
        $termname = strtolower($term->name);
      $termname = str_replace(\' \',\'-\', $termname);
        echo "<button class=\\"gallery-button\\" data-filter=\'.".$termname."\'>" . $term->name . "</button>\\n";
        } 
    }    
  ?>
</div>

<div class="grid <?php 
if ($gap == \'yes\') { 
  echo \'gap\';
}?>">

<?php
$args = array( \'post_type\' => \'rt-gaf\', \'posts_per_page\' => $limit, 
\'order\' => $order, \'gap\' => $gap,
\'columns\' => $columns );
$loop = new WP_Query( $args );
while ( $loop->have_posts() ) : $loop->the_post();

$terms = get_the_terms( $post, \'rt-ga-cat\' );                       
  if ( $terms && ! is_wp_error( $terms ) ) : 
    $items = array();
      foreach ( $terms as $term ) {
        $items[] = $term->name;
      }
      $taxonomy_items = join( " ", str_replace(\' \', \'-\', $items));          
      $taxonomy_items = strtolower($taxonomy_items);
      else :    
        $taxonomy_items = NULL;                 
      endif; 
?>
<div class="element-item 
    <?php 
    if ($columns == 1) { 
      echo \'element-item1 \';
    }
    elseif ($columns == 2) { 
      echo \'element-item2 \';
    }
    elseif ($columns == 3) { 
    echo \'element-item3 \';
    }
    else { 
    echo \'element-item2 \';
    }
    echo esc_attr( strtolower($taxonomy_items) );?>">

      <figure id="richart">
        <?php 
        echo the_post_thumbnail();
        ?> 
        <figcaption class="overlay">
          <div class="text">
            <h2><?php echo the_title(); ?></h2>
          </div>
          <a class="imagepopup" href="<?php the_post_thumbnail_url();?>"></a>
        </figcaption> 
      </figure>

          <p>
            <?php echo the_excerpt(); ?>
          </p>

    </div> 

    <?php endwhile; wp_reset_postdata(); ?>

  </div> 
</div>

1 个回复
SO网友:AcidBurn

这不是Wordpress的真正问题,如果你看一下同位素,你将不得不使用CSS来获得你想要的布局。js库您将看到他们有关于如何显示砖石网格的文档https://isotope.metafizzy.co/layout-modes/masonry.html , 如果这不符合您的需要,您可以了解更多关于Flexbox的信息,并使用一些自定义类自己完成。https://developer.mozilla.org/en-US/docs/Web/CSS/CSS_Flexible_Box_Layout/Aligning_Items_in_a_Flex_Container