WordPress 標籤雲美化：調整字級、數量與 CSS 彩色標籤寫法

標籤雲會依每個標籤的文章數決定字的大小：文章多的字大、文章少的字小。標籤一多，看起來就大小參差、有點亂。

這篇整理幾種讓標籤雲變整齊、變好看的方法：先用設定調整字級和數量，再用 CSS 做成圓角、彩色的標籤按鈕。

先確認你用的是哪一種標籤雲

• 「標籤雲」區塊：區塊主題，或新版 WordPress 的區塊小工具，都是用這個區塊。
• 舊版的「標籤雲」小工具：有安裝 Classic Widgets 外掛、使用舊版小工具畫面的網站。
• 主題範本裡的 wp_tag_cloud()：主題直接用程式碼顯示標籤雲。

三種的調整方式不太一樣，下面分開說明。

標籤雲區塊：直接在設定裡調整

點選標籤雲區塊，右側設定可以選擇要顯示標籤還是分類、要不要顯示文章數、最小與最大字級等（選項會依 WordPress 版本略有不同）；區塊樣式也有外框的樣式可以選。

把最小和最大字級設成一樣，每個標籤就一樣大，版面立刻整齊很多。

舊版小工具：用 widget_tag_cloud_args 調整

舊版的「標籤雲」小工具沒有字級設定，要用程式碼調整。加在子主題的 functions.php，或用 Code Snippets 外掛新增（說明請看 WordPress functions.php 實用程式碼整理）：

add_filter( 'widget_tag_cloud_args', function ( $args ) {
    $args['smallest'] = 14;      // 最小字級
    $args['largest']  = 14;      // 最大字級(跟最小一樣,每個標籤就一樣大)
    $args['unit']     = 'px';    // 字級單位
    $args['number']   = 30;      // 最多顯示幾個標籤
    $args['orderby']  = 'count'; // 依文章數排序
    $args['order']    = 'DESC';  // 文章多的排前面
    return $args;
} );

常用的參數：

• smallest、largest：最小、最大字級，預設是 8 和 22。
• unit：字級單位，預設是 pt，可以改成 px 或 rem。
• number：最多顯示幾個標籤，預設 45 個，設成 0 是全部顯示。
• orderby、order：排序依據（name 依名稱、count 依文章數）與方向（ASC 由小到大、DESC 由大到小，RAND 是隨機）。
• taxonomy：要顯示的分類法，預設是 post_tag（標籤），改成 category 就變成分類雲。
• show_count：設成 true 會在標籤後面顯示文章數。

這個 filter 只對舊版小工具有效，改用區塊的網站請用上一節的區塊設定。想換回舊版小工具畫面，可以參考 WordPress 恢復舊版小工具。

在範本任何地方顯示：wp_tag_cloud()

想在頁尾、文章最後或自訂的範本裡放標籤雲，用 wp_tag_cloud()，參數跟上面一樣：

<?php
wp_tag_cloud( array(
    'smallest' => 14,
    'largest'  => 14,
    'unit'     => 'px',
    'number'   => 30,
    'orderby'  => 'count',
    'order'    => 'DESC',
) );
?>

舊版文章裡的 wp_tag_cloud(‘smallest=8&largest=22′) 用的是排版用的彎引號，不是程式用的直引號，直接複製會出現語法錯誤。請改用上面陣列的寫法，也比較好讀。

用 CSS 做出圓角、彩色標籤

WordPress 輸出的每個標籤，都是一個 class 為 tag-cloud-link 的連結，字級寫在連結的 style 裡。只要針對這個 class 寫 CSS 就好。

在「外觀 → 自訂 → 額外 CSS」（區塊主題在「外觀 → 編輯器 → 樣式」的額外 CSS）加上：

.tag-cloud-link {
  display: inline-block;
  margin: 0 6px 8px 0;
  padding: 4px 12px;
  border-radius: 999px;
  background: #eef4ff;
  color: #1d4ed8;
  font-size: 14px !important; /* 蓋掉 WordPress 寫在 style 裡的字級 */
  line-height: 1.6;
  text-decoration: none;
  transition: background-color 0.2s, color 0.2s;
}

.tag-cloud-link:hover,
.tag-cloud-link:focus {
  background: #1d4ed8;
  color: #fff;
}

想要不同顏色輪流出現，再加上：

.tag-cloud-link:nth-child(4n+1) { background: #e0f2fe; color: #075985; }
.tag-cloud-link:nth-child(4n+2) { background: #fce7f3; color: #9d174d; }
.tag-cloud-link:nth-child(4n+3) { background: #dcfce7; color: #166534; }
.tag-cloud-link:nth-child(4n+4) { background: #fef3c7; color: #92400e; }

四種顏色依序輪流，每一組都是淺色底配深色字，文字清楚好讀。這個寫法適用於預設的排列方式；如果你把標籤雲設定成清單格式（format 設成 list），每個連結會各自包在一個清單項目裡，要把 nth-child 改寫在 li 上。

為什麼不用舊的「隨機顏色」程式碼？

舊版文章用 wp_tag_cloud filter 加上正規表達式，替每個標籤塞入隨機顏色。現在不建議這樣做：

• 容易把 HTML 弄壞：它用正規表達式取代 style 屬性，會連帶把後面的 aria-label（給螢幕閱讀器用的說明）一起蓋掉，WordPress 輸出格式一改就可能出錯。
• 顏色可能不正確：dechex(rand(0,16777215)) 產生的色碼有時不足六位數，瀏覽器會不認得；隨機的顏色也可能出現淺黃底配白字這種看不清楚的組合。
• 效果不穩定：每次載入顏色都不同，網站有快取時又會固定成某一組。

用 CSS 寫固定的配色，好維護、對比也能控制得好。

標籤雲好不好看，關鍵在標籤本身

• 每個標籤只有一兩篇文章、同義的標籤一大堆（例如「WordPress」「wordpress教學」「WP」），標籤雲怎麼調都會很亂。
• 建議定期到「文章 → 標籤」整理：合併重複的標籤、刪掉只用過一次的。
• 標籤雲只顯示文章最多的前 20～30 個就好，讀者比較容易找到重點。

延伸閱讀

• WordPress 恢復舊版小工具與傳統編輯器（停用古騰堡）的兩種方法
• WordPress 分類頁、標籤頁也能置頂文章：不用外掛的程式碼寫法

側邊欄這些小地方整理好，整個網站看起來就會專業很多。正威網路行銷是 25 年網站設計經驗的基隆網頁設計工作室，提供客製化網頁設計、RWD 響應式網站與網站維護託管，歡迎來聊聊。