如何對作者的 Divi 博客帖子進行顏色編碼

Divi 的主要目標之一是確保您網站上的每個元素都看起來不錯，博客文章也不例外。 但是，總是有改進的餘地，並且按作者對您的博客文章進行顏色編碼為用戶提供了一種更有效地瀏覽您的內容的方法（以及識別他們最喜歡的作者！）。

在本文中，我們將更多地討論為什麼您可能想要對 Divi 博客文章進行顏色編碼，以及如何通過兩個簡單的步驟進行操作。 是時候塗上新的油漆了！

為什麼你應該考慮對你的 Divi 博客文章進行顏色編碼

在我們繼續之前，讓我們澄清一下對 Divi 博客文章進行顏色編碼的含義。 在下一節中，我們將教您如何為每個作者分配一種顏色，作為他們自己帖子的背景。 在這個例子中，我給我自己的帖子（作為author1）分配了一個非常吸引人的淺藍色：

效果本身相對簡單，但它提供了一種區分作家的有效方式。 用戶可以一目了然地輕鬆識別他們最喜歡的作家的新作品。 當然，讓作者的名字更加突出可能也有同樣的效果，但可能沒有那麼醒目。

您唯一關心的是您對顏色的選擇。 以本節開頭的截圖為例 - 我們的 Divi 博客索引使用白色背景，因此我們決定為作者的帖子堅持使用淺色柔和的顏色。 讓我們看看如果我們選擇不同的配色方案會發生什麼：

當然，這是一個極端的例子，但它有助於我們說明我們的觀點。 如果您想對帖子進行顏色編碼，則需要仔細考慮您的調色板，並在必要時使用合適的工具來提供幫助。 使用對比色突出每篇文章之間的差異可以幫助用戶快速識別作者，但它也會破壞您博客的風格並使您難以閱讀您的內容。

如何按作者對 Divi 博客帖子進行顏色編碼（分 2 個步驟）

現在我們已經介紹了理論，是時候開始討論如何對 Divi 博客文章進行實際顏色編碼了。 啟用此功能只需要兩個步驟，但在開始之前有一些注意事項。

首先，您需要備份您的 WordPress 網站，這在進行更改時總是一個好主意。 其次，您需要創建一個 Divi 子主題，因此一旦主題更新，您的修改將保留。

最後，您需要使用 FTP 客戶端進行第一步。 我們將使用 FileZilla，但如果您更喜歡其他工具，請使用它。

第 1 步：將代碼片段添加到您的子主題的functions.php文件中

為此，您需要打開 FTP 客戶端並登錄到您站點的服務器。 從那裡，前往public_html / wp-content/themes/目錄，然後找到您的子主題文件夾。 請記住， public_html或根文件夾可能以www或您站點的域命名，具體取決於您的主機：

找到子主題的文件夾後，打開它並查找其中的functions.php文件。 現在，右鍵單擊它並點擊顯示為View/Edit的選項：

這將提示您使用默認文本編輯器打開文件。 由於我們正在處理子主題，因此您的functions.php文件除了將其父級的函數排入隊列之外，大部分應該是空的。 我們將添加一個片段，該片段會自動為您的每個作者創建一個帶有author-前綴的新類。 例如，如果您有一個名為 John 的 WordPress 用戶，您可以使用author-john類。 這將使我們能夠在以後添加一些 CSS 代碼。

接下來，在// END ENQUEUE PARENT ACTION行之後添加以下 PHP 代碼段：

function et_set_author_class( $classes ) {$classes[] = 'author-' . strtolower( str_replace( ' ', '-', get_the_author() ) );

return $classes;}

add_filter( 'post_class', 'et_set_author_class' );

現在保存您的更改，關閉編輯器，您就完成了！ 請記住，無論您與哪個作者打交道，您都需要使用小寫字符來讓您的班級工作。 這對於第二步很重要。

第 2 步：使用 Divi 的自定義 CSS 選項為每個作者指定顏色

現在我們的新功能已準備就緒，下一步是為您的每個作者設置顏色。 Divi 使您能夠通過其自定義 CSS功能執行此操作，因為您在其中添加的任何代碼都會影響您的整個主題。 要找到它，請轉到您的 WordPress 儀表板並導航到Divi > 主題選項選項卡，然後向下滾動到頁面末尾的自定義 CSS框：

您需要在此字段中為每位作者添加一行新的 CSS。 例如，如果您有一個用戶名為author1的作者，您可以通過以下方式為他們設置特定顏色：

.author-author1 {background-color: #C1F3FA !important;}

請記住，你需要添加作者-前綴為您的課，無論您的用戶名。 在指明背景顏色後，您還需要確保將代碼聲明為!important 。 簡而言之，這賦予了代碼更多的權重並覆蓋了可能出現的任何衝突——沒有它，這個功能將無法工作。

讓我們回顧最後一個例子。 在此，我們將為兩位作者分配不同的顏色。 這是我們添加到我們的 Divi 自定義 CSS 字段的代碼：

.author-author1 {background-color: #C1F3FA !important;}

.author-author2 {background-color: #F9FCB8 !important;}

現在，這是前端的樣子：

撇開您選擇的顏色不談，您還可以對 Divi 博客文章進行其他調整。 例如，您可以通過多種方式調整博客摘錄的長度或設置帖子“卡片”的樣式。 您的主要目標應該是為您自己的博客找到完美的風格，所以不要害怕玩弄 Divi，看看它可以做什麼！

結論

由作者對您的博客文章進行顏色編碼是一項簡單的功能，可以幫助用戶更輕鬆地瀏覽您的內容（尤其是當您有大量存檔時）。 此外，您的許多用戶可能會很高興能夠僅通過顏色識別他們最喜歡的作者的帖子。

在開始調整文件之前，請記住備份您的站點並設置子主題，這樣您的更改將在未來保持不變。 完成後，您需要遵循以下兩個步驟來按作者對 Divi 博客文章進行顏色編碼：

1. 修改您的子主題的functions.php文件。
2. 使用 Divi 的自定義 CSS 選項為每個作者指定一種顏色。

您對如何對作者的 Divi 博客文章進行顏色編碼有任何疑問嗎？ 在下面的評論部分提問！

文章縮略圖由 RaZZers/shutterstock.com 提供。