Question

基本上我需要一个自定义的Wordpress帖子循环，它以下列格式输出帖子（每两个帖子都应格式化，因此“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中只有一个帖子时它会混乱，因为“.row cols2”结束标记仅在连续有两个帖子时输出。如果有人对如何提供帮助有任何想法，那将非常感激！

Answer 1

我很高兴我不必使用你的代码，这是一个噩梦。我建议不要像这样聚集条件和循环，它只会使阅读和调试变得更加困难。

关于你的问题，基本的想法是你输出容器的每个偶数增量，然后检查最后的计数器，找出你是否缺少任何要求（即表中的表格单元格，元素的结束标记） ECT）。

所以你需要做的就是在最后检查它（我也重写了你的帖子输出，永远不会不必要地重复相同的代码，当你改变一个而不是另一个时，它可能会导致你的问题）

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

?>

Answer 2

最后让它正常运行，基于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; ?>

自定义Wordpress循环（网格/行）

2 个答案: