wordpress文章添加css样式,给WordPress文章循环加上CSS类方便实现各种页面布局

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

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

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

">

然后通过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类会自动加到文章循环列表上面，非常方便。