用于 reset_count 的 wp_query

Question

I want to use wp_query loop in category page and using this code bellow but it get an error: "The site is experiencing technical difficulties.". So how to improve my code? Thank you for your help! [![enter image description here][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

I think the code is good, but need some slightly modification. Only there's one thing you need is a masonry library, else it would be hard for it to keep this in the desired form with multiple div wrappers and statements

https://masonry.desandro.com/

After setup you need to define the classes 1-5 for their desired height in css.

.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;}

The masonry library does the aligning work for you

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