如何在WordPress中輕鬆樣式化標籤（附範例）
多年間，WPressize Me收到許多關於標籤的問題，其中之一是是否應該在WordPress中樣式化標籤以使其更為顯眼。標籤有助於根據主題組織內容，像是WordPress文章的標籤，幫助用戶發現更多內容。但根據我們的經驗，如果它們在視覺上不突出，可能會被忽略。
在本文章中，我們將向您展示如何輕鬆地在WordPress中樣式化標籤以獲得更多用戶互動和頁面瀏覽量。
如何在WordPress中顯示標籤
WordPress自帶兩種主要的分類法，稱為分類和標籤。分類用於內容的主要範疇，而標籤則允許您將內容分類到更具體的主題中。許多熱門的WordPress主題會在帖子頂部或底部顯示標籤。
然而，您也可以在歸檔頁、頁腳、側邊欄以及幾乎任何您想要的地方顯示標籤。要在帖子、頁面和側邊欄小部件中插入標籤雲，只需添加“標籤雲”塊即可。
標籤雲會根據帖子數量為每個標籤分配不同的字體大小。您還可以選擇在每個標籤旁邊顯示貼文數量。
這些只是WordPress提供的默認選項，但如果您想進一步自定義標籤呢？我們將向您展示如何操作。
樣式化WordPress中的預設標籤雲
在向帖子或頁面添加標籤雲塊後，您可以通過添加自定義CSS進行自定義。標籤雲塊會自動包含默認的WordPress生成的CSS類，可以用來樣式化它們。
要向您的WordPress網站添加自定義CSS，只需轉到外觀 » 自定義頁面，切換到附加CSS標籤。
您可以從以下自定義CSS代碼開始：
.tag-link-position-1 { font-size: 40px !important; } .tag-link-position-2 { font-size: 35px !important; } .tag-link-position-3 { font-size: 30px !important; } .tag-link-position-4 { font-size: 35px !important; } .tag-link-position-5 { font-size: 30px !important; } .tag-cloud-link { text-decoration: none; background-color: #fff; } .tag-link-count { background-color: #d6d6d6; }如您所見，您可以使用.tag-link-position類根據鏈接的位置調整樣式。帖子數量多的標籤位置較高，帖子數量少的標籤位置較低。
如果您希望標籤雲塊中的所有標籤都具有相同的大小，可以使用以下CSS：
.tag-cloud-link { font-size: 16px !important; border: 1px solid #d6d6d6; } .tag-cloud-link { text-decoration: none; background-color: #fff; } .tag-link-count { background-color: #d6d6d6; }樣式化WordPress中的標籤
除了樣式化標籤雲，您可能還希望樣式化顯示在單個博客帖子上的標籤。通常，您的WordPress主題會在標題或內容的頂部或底部顯示它們。
可以鼠標懸停在標籤上右鍵單擊使用檢查工具查看主題使用的CSS類。
之後，您可以在自定義CSS中使用這些CSS類。以下是基於我們測試主題CSS類的樣本代碼：
.entry-tag { padding: 5px 8px; border-radius: 12px; text-transform: lowercase; background-color: #e91e63; color: #fff; } .entry-tags a { color: #fff; font-size: small; font-weight: bold; }在WordPress中創建自定義標籤雲
默認的標籤雲塊易於使用，但某些高級用戶可能希望對其進行自定義，以便擁有更多靈活性。此方法允許您添加自己的HTML和CSS類包圍標籤雲。這樣，您可以根據自己的需求自定義標籤雲的外觀。
首先，您需要將此代碼複製並貼入主題的functions.php文件或代碼片段插件中：
function wpb_tags() { $wpbtags = get_tags(); foreach ($wpbtags as $tag) { $string .= 'term_id) . '>' . $tag->name . '' . $tag->count . '' . 'n'; } return $string; } add_shortcode('wpbtags', 'wpb_tags');我們建議使用WPCode添加此代碼，這是WordPress最佳代碼片段插件。它允許您輕鬆添加自定義代碼而不需編輯主題的functions.php文件，這樣您就不會破壞網站。要開始，安裝並啟用免費的WPCode插件。如果需要幫助，請參見我們的教程：如何安裝WordPress插件。
激活插件後，從WordPress儀錶板前往代碼片段 » 添加片段。然後，將鼠標懸停在“添加自定義代碼（新片段）”選項上，單擊“使用片段”按鈕。
在這裡，您可以在頁面頂部為片段添加標題。這可以是任何幫助您記住代碼用途的標題。接下來，將上面的代碼粘貼到“代碼預覽”框中，並從下拉菜單中選擇“PHP片段”作為代碼類型。
之後，只需將開關從“非活躍”切換到“活躍”，然後單擊“保存片段”按鈕。
此代碼添加了一個短代碼，顯示所有標籤及其旁邊的帖子數量。要在歸檔頁或小部件中顯示它，您需要使用此短代碼：
[wpbtags]僅使用此代碼會顯示標籤鏈接及其旁邊的帖子數量。讓我們添加一些CSS使其看起來更好。只需將此自定義CSS複制並粘貼到您的網站上：
.tagbox { background-color: #eee; border: 1px solid #ccc; margin: 0px 10px 10px 0px; line-height: 200%; padding: 2px 0 2px 2px; } .taglink { padding: 2px; } .tagbox a, .tagbox a:visited, .tagbox a:active { text-decoration: none; } .tagcount { background-color: green; color: white; position: relative; padding: 2px; }隨意修改CSS以符合您的需求。這是在我們的演示站點上的效果：
我們希望這篇文章能幫助您了解如何在WordPress中輕鬆樣式化標籤。您可能還想查看我們的指南：如何在WordPress中隱藏或樣式化子分類，或查看這些有用的WordPress提示、技巧和黑客列表。
如果您喜歡這篇文章，請訂閱我們的YouTube頻道獲取WordPress視頻教程。您也可以在Twitter和Facebook上找到我們。
