[![Wordpress循环中判断为每篇文章设计不同的样式](https://pic.salongweb.com/2016/06/loop-style.jpg)](https://pic.salongweb.com/2016/06/loop-style.jpg)新闻视频类Yewan主题的首页文章布局是不规则，文章的布局多样化，这是如何实现的？其实是很简单的，我们在循环中进行判断，每一篇文章都可以输出不同的样式。有些CMS主题分类文章第一篇是有缩略图和摘要，其它文章只有标题，实现的方式是先获取第一篇文章，然后再获取其它文章列表同时排除第一篇文章，这样增加了PHP代码的量，通过判断就很方便实用。

### 默认的代码

在循环中判断文章是第N篇就需在循环中添加“`$count = 1;`”变量，在循环主体中判断第N篇就可以这样写：

1. <?php if ($count == n) :{ ?>
2. //输出不同的代码
3. <?php } $count++; ?>

### 案例代码

Yewan主题首页的判断只是对缩略图进行了不同的输出，我们要添加三个不同的缩略图函数，你也可以添加其它不同的内容，最后的代码如下：

1. <?php
2. $args=array(
3. ‘post\_type’=> ‘post’,
4. ‘posts\_per\_page’ => 4,
5. ‘ignore\_sticky\_posts’ => 1
6. );
7. $temp\_wp\_query = $wp\_query;
8. $wp\_query = null;
9. $wp\_query = new WP\_Query( $args );
10. if ( $wp\_query->have\_posts() ) : $count = 1;
11. while ( $wp\_query->have\_posts() ) : $wp\_query->the\_post();?>
12. <!– 缩略图 –>
13. <?php if($count==1 ) { ?>
14. <?php post\_thumbnail\_width(); ?><!–横排缩略图–>
15. <?php }else if($count==2 ) { ?>
16. <?php post\_thumbnail\_height(); ?><!–竖排缩略图–>
17. <?php }else { ?>
18. <?php post\_thumbnail(); ?><!–普通缩略图–>
19. <?php } $count++; ?>
20. <!– 缩略图end –>
21. <?php endwhile; endif; ?>

\[successbox\]然后我们通过CSS来美化文章列表，因为缩略图是不规则，所以布局只好使用`position: absolute;`来对文章的布局进行定位，同时对移动端进行判断，只输出一种样式的缩略图。\[/successbox\]