如何讓每個 WordPress 帖子風格各異
你是否想要在你的网站上为每个 WordPress 帖子进行不同的样式设计？某些網站會透過自訂背景來突出特定的置頂貼文，或是為每個分類文章賦予獨特的外觀。你也可以這樣做，以反映不同的內容類型，並為用戶創造視覺上吸引的體驗。
在本文中，我們將向你展示如何輕鬆地為每個 WordPress 帖子進行不同的樣式設計。
為什麼要讓每個 WordPress 貼文風格各異？
如果你擁有一個 WordPress 博客，為每個帖子設計不同的樣式可以創造一個獨特的視覺體驗，讓不同的顏色和風格與不同的內容類型相互連結。例如，你可以使用不同的背景顏色來區分清單類文章、博客帖子和教程帖文。這樣能立即抓住用戶的注意並提高互動率。
然而，這樣做也有一些缺點。例如，你需要定期維護每個 WordPress 帖子的設計，這可能會非常耗時。此外，這可能導致用戶體驗不一致，並不利於建立你的品牌形象，因為統一的網站顏色對於建立品牌形象是非常重要的。
如何在 WordPress 中為個別帖子設計樣式
WordPress 會為網站上的各種元素添加默認的 CSS 類別。主題使用一個叫做 post_class() 的核心 WordPress 函數來告訴 WordPress 在哪裡添加這些默認的 CSS 類別到帖子中。如果你訪問你的网站并使用瀏覽器的檢查工具，你就能看到每個帖子的這些類別。
以下是根據用戶查看的頁面而添加的一些默認 CSS 類別:
- .post-id
- .post
- .attachment
- .sticky
- .hentry (hAtom 微格式页面)
- .category-ID
- .category-name
- .tag-name
- .format-{format-name}
- .type-{post-type-name}
- .has-post-thumbnail
示例輸出如下:
<article id="post-412" class="post-412 post type-post status-publish format-standard hentry category-news">你可以使用這些對應的 CSS 類別或 ID 為每個 WordPress 帖子設計不同的樣式。要做到這一點，你首先需要找到每個帖子的 ID。你可以通過訪問 WordPress 儀表板中的 Posts » All Posts 頁面並將鼠標懸停在一個帖子上來找到。
接下來，將自訂的 CSS 類別和代碼添加到你的主題文件或主題定制器中。不過，這樣做有風險，因為一個錯誤可能會導致你的网站崩潰。所以我們建議使用 WPCode，它是最好的 WordPress 代碼片段插件，也是添加自訂代碼最安全的方法。
如何使用 WPCode 設計帖子樣式
首先，你需要安裝和激活免費的 WPCode 插件。激活後，訪問儀表板上的 Code Snippets » + Add Snippet 頁面，然後在 ‘Add Your Custom Code (New Snippet)’ 選項下點擊’Use Snippet’ 按鈕。
這會帶你到 ‘Create Custom Snippet’ 頁面，從那裏你可以開始為你的代碼片段添加名稱。然後，在右側的下拉菜單中選擇 ‘CSS Snippet’ 作為代碼類型。
接下來，將你的個別帖子的 CSS 類別和 ID 添加到 ‘Code Preview’ 框中，格式如下:
.post-13 { }之後，你可以在花括號之間添加任何自訂的 CSS 代碼來設計你的帖子。 例如，如果你想更改個別帖子的背景顏色，你可以添加如下自訂 CSS 代碼:
.post-13 { background-color: #FF0303; color: #FFFFFF; }完成後，將頂部的 ‘Inactive’ 開關切換到 ‘Active’ 並點擊 ‘Save Snippet’ 按鈕來保存設置。啟用代碼片段後，自訂 CSS 代碼將自動應用到你個別的帖子中。
如何基於特定分類設計帖子
如果你想設計所有屬於特定分類的帖子，你可以使用 WPCode 實現這一點。訪問 Code Snippets » + Add Snippet 頁面，選擇 ‘Add Your Custom Code (New Snippet)’ 選項。在新頁面上添加代碼片段名稱並選擇 ‘CSS Snippet’ 作為代碼類型。
接著，將特定分類的 CSS 類別添加到代碼預覽框中，例如:
.category-books { }然後，你可以在框中添加任何自訂的 CSS 代碼來應用到不同分類中的所有帖子。例如，如果你想改變特定分類的所有帖子的字體大小和樣式，你可以使用以下代碼片段:
.category-books { font-size: 18px; font-style: italic; }接下來，將 ‘Inactive’ 開關切換為 ‘Active’ 並點擊 ‘Save Snippet’ 按鈕保存設置。你可以現在訪問所有特定分類的帖子來查看應用的變更。
如何根據作者設計帖子
預設情況下，the_posts() 函數生成的 CSS 類別不包含作者名。如果你想根據作者自訂每篇帖子的樣式，你需要先將作者名添加為 CSS 類別。
要使用 WPCode 實現這一點，選擇 ‘Add Your Custom Code (New Snippet)’ 選項。進入 ‘Create Custom Snippet’ 頁面後，添加代碼片段名稱並選擇 ‘PHP Snippet’ 作為代碼類型。然後，在代碼預覽框中添加以下自訂代碼並替換 ‘user_nicename’ 為作者名:
$author = get_the_author_meta('user_nicename'); ?> <article id="post-" 最後，將 ‘Inactive’ 開關切換為 ‘Active’ 並點擊 ‘Save Snippet’ 按鈕保存設置。這段代碼會將用戶的簡易名（適合用作 URL）添加為 CSS 類別。接下來在 ‘Create Custom Snippet’ 頁面上選擇 ‘CSS Snippet’。然後在 ‘Code Preview’ 框中添加作者的特定名字，例如:
.sarahclare { }之後你可以添加自訂 CSS 代碼。以下範例顯示如何更改作者帖子背景顏色並添加邊框:
.sarahclare { background-color: #EEE; border: 1px solid #CCC; }完成後，點擊 ‘Save Snippet’ 按鈕保存設置，然後將 ‘Inactive’ 開關切換為 ‘Active’。現在你可以訪問特定作者的帖子來查看應用的變更。
如何基於留言數設計帖子
某些網站會根據留言數設計熱門帖子小工具。這裡示範如何使用留言數設計帖子。首先，我們需要獲取留言數並將其與類別關聯。
將以下代碼添加到你的主題文件或使用 WPCode 插件:
approved; if ($my_comment_count = 10 && $my_comment_count = 20) { $my_comment_count = 'popular'; } ?>這段代碼根據留言數將其歸類為 new、emerging 和 popular。接著，將留言數作為 CSS 類別添加到 post_class 函數中:
<article id="post-" >你現在可以添加自訂 CSS 來根據留言數設計每個帖子，例如添加不同的邊框顏色:
.new { border: 1px solid #FFFF00; } .emerging { border: 1px dashed #FF9933; } .popular { border: 1px dashed #CC0000; }Bonus: 為每個帖子顯示不同的側邊欄
設計每個帖子後，你可能還想為每個帖子添加一個獨特的側邊欄。你可以使用 SeedProd 插件，它是最好的 WordPress 頁面構建器插件。
激活插件後，你可以選擇一個自訂頁面作為登錄頁面的設計，然後選擇一個有側邊欄的佈局。之後，從左側欄拖放你選擇的區塊，包括聯繫表單、存檔、贈品、搜索框、留言等。完成後，點擊頂部的 ‘Save’ 和 ‘Publish’ 按鈕。
我們希望這篇文章能幫助你學會如何讓每個 WordPress 帖子風格各異。如果你喜歡這篇文章，請訂閱我們的 YouTube 頻道獲取更多 WordPress 視頻教程，你也可以在 Twitter 和 Facebook 上找到我們。
