為什麼要在WordPress主題中為文章添加奇數/偶數類別?
許多WordPress主題使用奇數或偶數類別來標示評論,以幫助用戶視覺化每個評論的區分。同樣,您也可以使用這種技術來為您的WordPress文章添加類別。不僅美觀,而且有助於用戶快速瀏覧包含大量內容的頁面,特別適合雜誌或新聞網站的首頁。
如何在WordPress主題中為文章添加奇數/偶數類別
WordPress會自動生成默認的CSS類別並動態添加到網站的不同項目中,這些CSS類別幫助插件和主題開發者添加自定義樣式。
WordPress也提供了一個叫做 post_class
的函數,主題開發者常用這個函數來為文章項目添加類別。 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';
使用WPCode插件添加代碼
我們建議使用WPCode插件來添加這些代碼,它是最好的代碼片段插件之一,安全且方便。
首先,您需要安裝並啟用免費的WPCode插件。具體的安裝方法請參考這篇指南: 如何安裝WordPress插件。
啟用後,進入 WordPress 儀表板的 代碼片段 » 添加片段
頁面。然後,在“添加自定義代碼(新片段)”選項下點擊“使用片段”按鈕。
接下來,給您的代碼片段起一個名字,幫助您記住這段代碼的用途。把上面的代碼粘貼到“代碼預覽”框中,並從右側下拉列表中選擇“PHP代碼片段”作為代碼類型。
之後,將開關從“未激活”切換到“激活”,然後點擊“保存片段”按鈕。
為奇數/偶數類別添加樣式
現在您已經為文章添加了奇數和偶數類別,下一步就是使用CSS進行樣式設置。您可以將自定義的CSS添加到子主題的樣式表、主題定制器,或使用WPCode插件。
以下是一個示例的CSS,可以作為開始的基礎:
.even {
background:#f0f8ff;
}
.odd {
background:#f4f4fb;
}
如果您不知道如何使用CSS,請參考我們的指南: 如何簡單地添加自定義CSS到您的WordPress網站。
希望本文幫助您學會如何在WordPress主題中為文章添加奇數/偶數類別。您可能還會對我們的其他指南感興趣,例如如何設計您的WordPress評論佈局和我們推薦的最佳WordPress頁面構建器。
如果您喜歡這篇文章,請訂閱我們的YouTube頻道獲取更多WordPress視頻教程。您還可以在Twitter和Facebook上找到我們。