用于 reset_count 的 wp_query

Question

我想在类别页面中使用 wp_query 循环并使用下面的代码，但它得到一个错误：“该站点遇到技术问题。” .那么如何改进我的代码呢？感谢您的帮助！ [![在此处输入图片描述][1]][1]

<?php if(have_posts()) :  while(have_posts()) :  the_post(); 
?>
<?php
if($counter == 1) :
?>
<div class="col-<?php echo counter; ?>"> //this col have width 50%, height 300px.
  <div class="postimage">
    <a href="<?php the_permalink(); ?>" title="<?php the_title_attribute(); ?>"><?php the_post_thumbnail('project-thumb'); ?></a>
  </div>
  <div class="proj-title"><a href="<?php the_permalink(); ?>" title="<?php the_title_attribute(); ?>"><?php the_title(); ?></a></div>
</div>
<?php
elseif($counter == 2) :
?>
<div class="col-<?php echo counter; ?>"> //this col have width 50%, height 150px.
  <div class="postimage">
    <a href="<?php the_permalink(); ?>" title="<?php the_title_attribute(); ?>"><?php the_post_thumbnail('project-thumb'); ?></a>
  </div>
  <div class="proj-title"><a href="<?php the_permalink(); ?>" title="<?php the_title_attribute(); ?>"><?php the_title(); ?></a></div>
</div>
<div class="clear"></div>
<?php
elseif($counter == 3) :
?>
<div class="col-<?php echo counter; ?>"> //this col have width 50%, height 150px.
  <div class="postimage">
    <a href="<?php the_permalink(); ?>" title="<?php the_title_attribute(); ?>"><?php the_post_thumbnail('project-thumb'); ?></a>
  </div>
  <div class="proj-title"><a href="<?php the_permalink(); ?>" title="<?php the_title_attribute(); ?>"><?php the_title(); ?></a></div>
</div>          
<?php endif; ?>


  [1]: https://i.stack.imgur.com/jgolS.png

Answer 1

我认为代码不错，但需要稍作修改。 您只需要一个砌体库，否则很难使用多个 div 包装器和语句将其保持在所需的形式

https://masonry.desandro.com/

设置完成后，您需要在 css 中为所需的高度定义 1-5 类。

.col-1,.col-2,.col-3,.col-4,.col-5 {width:50%;}
.col-1,.col-2 {height:300;}
.col-3,.col-4,.col-5{height:150px;}

masonry 库为您完成对齐工作

<?php 
$counter = 1;
if(have_posts()) :  while(have_posts()) :  the_post(); 
if($counter == 1) :
?>
<div class="col-<?php echo counter; ?>"> //this col have width 50%, height 300px.
  <div class="postimage">
    <a href="<?php the_permalink(); ?>" title="<?php the_title_attribute(); ?>"><?php the_post_thumbnail('project-thumb'); ?></a>
  </div>
  <div class="proj-title"><a href="<?php the_permalink(); ?>" title="<?php the_title_attribute(); ?>"><?php the_title(); ?></a></div>
</div>
<?php
elseif($counter == 2) :
?>
<div class="col-<?php echo counter; ?>"> //this col have width 50%, height 150px.
  <div class="postimage">
    <a href="<?php the_permalink(); ?>" title="<?php the_title_attribute(); ?>"><?php the_post_thumbnail('project-thumb'); ?></a>
  </div>
  <div class="proj-title"><a href="<?php the_permalink(); ?>" title="<?php the_title_attribute(); ?>"><?php the_title(); ?></a></div>
</div>
<div class="clear"></div>
<?php
elseif($counter == 3) :
?>
<div class="col-<?php echo counter; ?>"> //this col have width 50%, height 150px.
  <div class="postimage">
    <a href="<?php the_permalink(); ?>" title="<?php the_title_attribute(); ?>"><?php the_post_thumbnail('project-thumb'); ?></a>
  </div>
  <div class="proj-title"><a href="<?php the_permalink(); ?>" title="<?php the_title_attribute(); ?>"><?php the_title(); ?></a></div>
</div>          
<?php endif; 
$counter++;
if( $counter == 5 ): $counter = 1; endif;
endwhile; endif;
?>