Duke Yin's Technology database

WordPress PHP简单方法输出多栏布局元素类

lastone

经常会遇到如上图一样的布局,有时候三列有时候四列,如果是静态页面,一般处理方法是在一列的最后一个元素加一个类class,然后针对这个类写CSS。

但是如果在Wordpress的loop里,通常所有的日志“块”代码都是一样的,如何判断某个元素是一行的最后一个然后加入代码呢?
这个问题困扰了我几个小时。本来有一个已经解决好了的范本,但是太过于复杂,后来我解决了,还算比较简洁,现公布如下:

先在Loop中让一个变量自己增加->

<?php
$additional_loop = new WP_Query($query_string);
if ($additional_loop->have_posts()) :
while ($additional_loop->have_posts()) : $additional_loop->the_post();	
$count++;
?>

 

倒数第二行$count这个变量会随循环增加,从0开始,每循环一次,它的值会加1

然后是循环中的内容当然也要用count君

<div class="one_third
<?php if($count == 3){echo " last";$count = 0;}?>
">
content
</div>

当循环满足3次,也就是Count君等于3了,就输出一个“last”类到div里,与此同时,也把$count君清零,再次从0开始数,再次循环到了3,他又吐出一个“last”然后自己变成0。

最终结果,会是这样:

<div class="one_third">content</div>
<div class="one_third">content</div>
<div class="one_third last">content</div>
<div class="one_third">content</div>
<div class="one_third">content</div>
<div class="one_third last">content</div>
<div class="one_third">content</div>
<div class="one_third">content</div>
<div class="one_third last">content</div>
...

 

如果设计是4栏布局,只需要将判断if($count == 3)改成==4即可。
完美解决了这个问题。

#

发布评论引用.

评论