Wp_query для reset_count - PullRequest
Новая
       28

Wp_query для reset_count

0 голосов
/ 18 сентября 2019

Я хочу использовать цикл 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

1 Ответ

1 голос
/ 19 сентября 2019

Я думаю, что код хороший, но нужно немного изменить его.Есть только одна вещь, которая вам нужна, это библиотека кладки, иначе было бы трудно сохранить ее в нужной форме с помощью нескольких оболочек div и операторов

https://masonry.desandro.com/

После настройки вам нужноопределить классы 1-5 для их желаемой высоты в 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;}

Библиотека кладки выполняет выравнивающую работу за вас 

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