如何在 WordPress 中輕鬆設定標籤樣式（附範例）

您想在 WordPress 中設計標籤樣式，讓它們看起來更突出嗎？

標籤可以説明您將內容組織成主題。可以幫助用戶發現更多內容。

在本文中，我們將向您展示如何在 WordPress 中輕鬆給標籤設定樣式，以提高網站的用戶參與度和頁面流覽量。

如何在 WordPress 中顯示標籤

WordPress 有兩個主要的分類標準，即類別和標籤。類別用於內容的主要區域，而標籤則允許您將內容分類為更具體的主題。

許多流行的 WordPress 主題預設在文章頂部或底部顯示標籤。

不過，您也可以在存檔頁面、頁腳、側邊欄以及 WordPress 中的幾乎任何地方顯示標籤。

要在文章、頁面和邊欄小工具中插入標籤雲，只需添加「Tag Cloud」塊即可。

標籤雲會根據帖子數量為每個標籤提供不同的字體大小。您還可以選擇在每個標籤旁邊顯示帖子數量。

這些只是 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 主題會在文章標題或文章內容的頂部或底部顯示這些標籤。

您可以將滑鼠移至標籤上並按下右鍵，使用「檢查」工具查看 WordPress 主題使用的 CSS class。

然後，你就可以在自定義 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 classe。然後，您就可以根據自己的要求定製標籤雲的外觀。

首先，您需要將這段代碼複製並粘貼到主題的 functions.php 檔或代碼片段外掛程式中：

function wpb_tags() { 
$wpbtags =  get_tags();
foreach ($wpbtags as $tag) { 
$string .= '<span class="tagbox"><a class="taglink" href="'. get_tag_link($tag->term_id) .'">'. $tag->name . '</a><span class="tagcount">'. $tag->count .'</span></span>' . "\n"   ;
} 
return $string;
} 
add_shortcode('wpbtags' , 'wpb_tags' );

我們建議使用 WordPress 程式碼片段外掛程式 WPCode 添加這些代碼。它可以讓你在 WordPress 中輕鬆添加自定義代碼，而無需編輯主題的 functions.php 檔，因此不會破壞你的網站。

要開始使用，請安裝並啟動免費的 WPCode 外掛程式。

啟動外掛程式後，從 WordPress 面板進入Code Snippets » Add Snippet。

然後，將滑鼠懸停在「Add Your Custom Code （New Snippet）」選項上，點擊「Use snippet」按鈕。

在這裡，你可以為頁面頂部的代碼段添加一個標題。標題可以是任何能説明你記住代碼用途的內容。

然後，將上面的代碼粘貼到「Code Preview 」框中，並從下拉功能表中選擇「PHP 代碼段」作為代碼類型。

之後，只需將開關從「Inactive 」切換到「Active」，然後點擊「Save Snippet」按鈕即可。

Activate and save your custom code snippet

此代碼添加了一個簡碼，可顯示您的所有標籤，並在標籤旁邊顯示其發佈次數。

要在檔案頁面或 widget 中顯示，您需要使用此簡碼：

[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 以滿足您的需求。這就是我們的演示網站上的效果：