如何在WordPress主題中為文章添加奇數/偶數類別

WPressize Me

06/27/2024

為什麼要在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上找到我們。



Related Posts

  • 2024-07-20
  • WordPress 主题

您是否想在 WordPress 中為不同頁面使用多個佈景主題?可以自訂網頁的外觀和布局,為文章、頁面和部分區域建立模板。但是如果您想為網站的某些部分或頁面使用完全不同的佈景主題呢?本文將指導您如何在 WordPress 中為頁面使用多個佈景主題。

閱讀更多
  • 2024-07-19
  • WordPress 主题

您是否想在 WordPress 網站上添加回頂效果?這種效果在頁面較長時非常有用,可以讓用戶輕鬆返回頁面頂部,提升網站的用戶體驗。本文將教您如何使用 jQuery 和插件在 WordPress 中添加平滑回頂效果。

閱讀更多
  • 2024-07-13
  • WordPress 主题

您是否想在 WordPress 中創建一個自定義頁面?自定義頁面允許您使用與網站其餘部分不同的佈局。許多 WordPress 網站使用自定義頁面佈局來建立銷售頁面、登陸頁面、網路研討會頁面等。在這篇文章中,我們將向您展示如何輕鬆地在 WordPress 中創建自定義頁面。

閱讀更多

{"email":"Email address invalid","url":"Website address invalid","required":"Required field missing"}
>