在做WordPress主題開(kāi)發(fā)的時(shí)候，為了幫助實(shí)現(xiàn)布局，我們經(jīng)常需要給網(wǎng)站存檔頁(yè)的文章循環(huán)加上一些CSS類(lèi)，看一下下面的例子，我們需要實(shí)現(xiàn)一個(gè)每行4列的圖片布局，我們使用左浮動(dòng)的方式，給每張圖片定義一個(gè)寬度為23.5%，然后有一個(gè)右邊距是2%，每一行最后一張沒(méi)有右邊距。這樣每一行的寬度就是23.5%x4 + 2%x3，剛好是100%，不多不少。

直接在主題中的文章循環(huán)列表上添加CSS類(lèi)

為了實(shí)現(xiàn)這個(gè)樣式，我們需要給每一行的最后一行圖片，也就是第4張、第8張、第12張等等這些順序能被4整除的圖片上加上一個(gè)last類(lèi)。

">

然后通過(guò)CSS，定義有l(wèi)ast類(lèi)的圖片的右邊距為0。

.imgs li {

width: 23.5%;

margin-right: 2%;

float: left;

}

.imgs li.last{

margin-right: 0;

}

上面的實(shí)現(xiàn)很直觀，如果一個(gè)網(wǎng)站結(jié)構(gòu)比較簡(jiǎn)單，只有一個(gè)地方需要實(shí)現(xiàn)這樣的布局，直接使用上面的方法就好了。可是如果網(wǎng)站有多處需要上面的布局，通過(guò)上面的方法實(shí)現(xiàn)就需要復(fù)制很多代碼，同樣的功能需要復(fù)制很多遍，這不是個(gè)好辦法，直接違反了DRY原則。其實(shí)我們可以通過(guò)WordPress的Filter 直接把last類(lèi)加到每一個(gè)文章循環(huán)列表上。方法如下。

通過(guò)post_class Filter添加CSS類(lèi)到文章循環(huán)列表上

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' );

實(shí)現(xiàn)原理很簡(jiǎn)單，就是在文章輸出之前，判斷一下文章的順序，滿足被4整除的條件時(shí)，添加last類(lèi)到文章列表上面。復(fù)制到functions.php中，last類(lèi)會(huì)自動(dòng)加到文章循環(huán)列表上面，非常方便。

總結(jié)

以上是生活随笔為你收集整理的wordpress文章添加css样式,给WordPress文章循环加上CSS类方便实现各种页面布局的全部?jī)?nèi)容，希望文章能夠幫你解決所遇到的問(wèn)題。

如果覺(jué)得生活随笔網(wǎng)站內(nèi)容還不錯(cuò)，歡迎將生活随笔推薦給好友。