在做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類會自動加到文章循環列表上面，非常方便。

總結

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

如果覺得生活随笔網站內容還不錯，歡迎將生活随笔推薦給好友。