如何在WordPress主題中的帖子中添加奇/偶類


您是否要向WordPress主題中的帖子添加奇數和偶數類? 添加奇數和偶數類可讓您對其他所有帖子設置不同的樣式。 在本文中,我們將向您展示如何在WordPress主題中的帖子中添加奇/偶類。

將奇/偶類添加到WordPress主題中的帖子中

為什麼要在WordPress主題的帖子中添加奇/偶類?

許多WordPress主題都使用舊的甚至是WordPress註釋類。 它可以幫助用戶可視化一個評論的結尾和下一個評論的起點。

同樣,您可以在WordPress帖子中使用此技術。 它看起來在美學上令人愉悅,可以幫助用戶快速掃描包含大量內容的頁面。 對於雜誌或新聞網站的主頁特別有用。

話雖如此,讓我們看看如何在WordPress主題的帖子中添加奇數和偶數類。

在WordPress主題的帖子中添加奇/偶類

WordPress會生成默認的CSS類,並將它們動態添加到您網站上的不同項目中。 這些CSS類可幫助插件和主題開發人員為不同的項目添加自己的樣式。

WordPress還帶有一個稱為 post_class,主題開發人員使用它來添加類以發布項目。 請參閱我們的指南,了解如何為每個WordPress帖子設置不同的樣式。

post_class 也是一個過濾器,這意味著您可以將自己的函數掛接到它。 這正是我們在這裡要做的。

只需將此代碼添加到主題的functions.php文件或特定於站點的插件中即可。

function oddeven_post_class ( $classes ) {
   global $current_class;
   $classes[] = $current_class;
   $current_class = ($current_class == 'odd') ? 'even' : 'odd';
   return $classes;
}
add_filter ( 'post_class' , 'oddeven_post_class' );
global $current_class;
$current_class="odd";

此功能僅在第一個帖子中添加奇數,然後在偶數中添加,依此類推。

您可以在網站的源代碼中找到奇數和偶數類。 只需將鼠標移至帖子標題,然後右鍵單擊以選擇“檢查”或“檢查元素”。

源代碼中的奇數和偶數類

現在,您已經在帖子中添加了偶數和奇數類。 下一步是使用CSS設置樣式。 您可以將自定義CSS添加到子主題的樣式表中,或使用簡單自定義CSS插件。

這是一個示例CSS,您可以將其用作起點:

.even {
background:#f0f8ff;  
} 
.odd {
 background:#f4f4fb;
}

這是在我們的測試站點上的外觀:

在WordPress中使用具有偶數/奇數CSS類的替代背景色的帖子

如果您不知道如何使用CSS,那麼您可能想看看CSS Hero。 它允許您將CSS添加到WordPress網站的任何部分,而無需編寫任何代碼。

我們希望本文能幫助您學習如何在WordPress主題的帖子中添加奇/偶類。 您可能還想查看有關如何設置WordPress註釋佈局樣式的指南。

如果您喜歡這篇文章,請訂閱我們的YouTube頻道WordPress視頻教程。 您也可以在找到我們 推特 和Facebook。