给WordPress文章循环加上CSS类方便实现各种页面布局

在做WordPress主题开发的时候，为了帮助实现布局，我们经常需要给网站存档页的文章循环加上一些CSS类，看一下下面的例子，我们需要实现一个每行4列的图片布局，我们使用左浮动的方式，给每张图片定义一个宽度为23.5%，然后有一个右边距是2%，每一行最后一张没有右边距。这样每一行的宽度就是23.5%x4 + 2%x3，刚好是100%，不多不少。

直接在主题中的文章循环列表上添加CSS类

为了实现这个样式，我们需要给每一行的最后一行图片，也就是第4张、第8张、第12张等等这些顺序能被4整除的图片上加上一个last类。

<?php $i=1; ?>
<?php while ( have_posts() ) : the_post(); ?>
    <li class="<?php echo ($i%4 == 0) ? "last": ""; $i++; ?> ">
        <a href="<?php the_permalink(); ?>" title="<?php the_title(); ?>">
            <?php if ( has_post_thumbnail() ) { the_post_thumbnail('full'); } ?>
        </a>
    </li>
<?php endwhile; ?>

然后通过CSS，定义有last类的图片的右边距为0

.imgs li {
  width: 23.5%;
  margin-right: 2%;
  float: left;
}
.imgs li.last{
  margin-right: 0;
}

上面的实现很直观，如果一个网站结构比较简单，只有一个地方需要实现这样的布局，直接使用上面的方法就好了。可是如果网站有多处需要上面的布局，通过上面的方法实现就需要复制很多代码，同样的功能需要复制很多遍，这不是个好办法，直接违反了DRY原则。其实我们可以通过WordPress的Filter 直接把last类加到每一个文章循环列表上。方法如下。

通过post_class Filter添加CSS类到文章循环列表上

function additional_post_classes( $classes ) {
	global $wp_query;
	if( $wp_query->current_post % 4 ) {
		$classes[] = 'last';
	} else {
		$classes[] = 'post-odd';
	}
	return $classes;
}
add_filter( 'post_class', 'additional_post_classes' );

实现原理很简单，就是在文章输出之前，判断一下文章的顺序，满足被4整除的条件时，添加last类到文章列表上面。复制到functions.php中，last类会自动加到文章循环列表上面，非常方便。

资料来源：http://www.wpzhiku.com/add-css-class-to-wordpress-posts-loop/