自定义Wordpress循环(网格/行)


Custom Wordpress Loop (Grid/Row)

基本上,我需要一个自定义的Wordpress post循环,它以以下格式输出帖子(每两个帖子都应该这样格式化,所以一个"col"div中的两个帖子均包含在"row"div中):

<div class="row cols2">
<div class="col left">
<a href="#"><img src="featured-image.jpg" /></a>
<h2><a href="#">Blog Post Title</a></h2>
<p>Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Lorem ipsum dolor sit amet, consectetuer adipiscing elit.</p>
</div><!-- /.col left -->
<div class="col right">
<a href="#"><img src="featured-image.jpg" /></a>
<h2><a href="#">Blog Post Title</a></h2>
<p>Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Lorem ipsum dolor sit amet, consectetuer adipiscing elit.</p>
</div><!-- /.col right -->
</div><!-- /.row cols2 -->

我使用以下循环或多或少地实现了这一点:

<?php $counter=1;$grids=2;global $query_string;query_posts($query_string.'&caller_get_posts=1&posts_per_page=6');if(have_posts()):while(have_posts()):the_post();if($counter==1):?>
<div class="row cols2">
<div class="col left">
<a href="<?php the_permalink()?>"><?php the_post_thumbnail('default-thumb')?></a>
<h2><a href="<?php the_permalink(); ?>"><?php the_title(); ?></a></h2>
<?php the_excerpt() ?>
</div><!-- /.col left -->
<?php elseif($counter==$grids):?>
<div class="col right">
<a href="<?php the_permalink()?>"><?php the_post_thumbnail('default-thumb')?></a>
<h2><a href="<?php the_permalink(); ?>"><?php the_title(); ?></a></h2>
<?php the_excerpt() ?>
</div><!-- /.col right -->
</div><!-- /.row cols2 -->
<?php $counter=0;endif;$counter++;endwhile;endif;?>

唯一的问题是,当".row cols2"div中只有一个post时,它会出错,因为只有当一行中有两个post的时候,才会输出".row cols2"结束标记。如果有人知道如何提供帮助,我们将不胜感激!

我很高兴不用处理您的代码,这简直是一场噩梦。我建议不要聚集这样的条件和循环,这只会使读取和调试变得更加困难。

关于你的问题,基本的想法是,你每增加偶数计数就输出一个容器,然后检查末尾的计数器,看看你是否遗漏了任何要求(即表中的表单元格,元素e.c.t.的结束标记)。

所以你所需要做的就是在最后检查它(我也重写了你的后期输出,永远不要不必要地重复相同的代码,这可能会导致你以后对其中一个而不是另一个进行更改时出现问题)。

<?php 
$counter=1;
$grids=2;
global $query_string;
query_posts($query_string.'&caller_get_posts=1&posts_per_page=6');
if(have_posts()):
  while(have_posts()):
    the_post();
    //-- ouput start elements
    if($counter==1): ?>
      <div class="row cols2">
      <div class="col left">
    <?php
    elseif($counter == $grids): ?>
      <div class="col right">
    <?php endif; ?>
    <?php /* Output column box content */ ?>
    <a href="<?php the_permalink()?>"><?php the_post_thumbnail('default-thumb')?></a>
    <h2><a href="<?php the_permalink(); ?>"><?php the_title(); ?></a></h2>
    <?php the_excerpt() ?>

     <?php /* always need to close the inner div */ ?>
     </div>
     <?php 
     //-- if its the second column, then end row and reset counter
    if($counter == $grids): ?>
      </div>
    <?php 
      $counter = 0;
    endif; ?>

<?php 
$counter++;
endwhile;
if($counter == 1):
  //--- output empty second column div then end the row
  ?>
  <div class="col right"></div>
  </div>
  <?php
endif; 
    ?>
<?php
/** Forgot this one */
endif;
?>

基于Lee的代码,终于让它正常工作了,真的很感谢您的帮助!代码:

<?php $counter=1;global $query_string;query_posts($query_string.'&caller_get_posts=1&posts_per_page=6');if(have_posts()):while(have_posts()):the_post();if($counter==1):?>
<div class="row cols2">
<div class="col"><?php elseif($counter==2): ?><div class="col"><?php endif; ?>
<a href="<?php the_permalink();?>"><?php the_post_thumbnail('default-thumb')?></a>
<h2><a href="<?php the_permalink(); ?>"><?php the_title(); ?></a></h2>
<?php the_excerpt() ?>
</div><!-- /.col -->
<?php if($counter==2): ?></div><!-- /.row cols2 -->
<?php $counter=0;endif;$counter++;endwhile;if($counter==2):?></div><!-- /.row cols2 --><?php endif;endif; ?>