修改 WordPress 標籤雲 Gutenberg 模塊字體大小的 3 個方法 (PHP, CSS, JS)

Gutenberg模塊, HTML 與 CSS, JavaScript語言, PHP, WordPress /

您會在 WordPress 網站中使用標籤雲嗎？

標籤雲小部件是用於列出您分配給帖子的所有標籤。該小部件很有用，因為它使您的讀者可以快速瀏覽自己喜歡的主題。在 WordPress 5.0 或以上版本，利用 WP 的 Gutenberg (古騰堡)模塊可輕鬆地在帖子和頁面上添加標籤雲，以顯示 (最多 45 個) 最常用標籤。該函數會按標籤數進行排序，並相應地計算每個標籤的字體大小，指定在連結元素的內聯樣式。較常用的標籤將以較大的字體顯示，使讀者知道您最常寫的主題。

每個標籤項目都會被輸出為一個 HTML 連結元素，其格式如下：

HTML
<a href="{tag-url}"
   class="tag-cloud-link tag-link-{id} tag-link-position-{pos}"
   style="font-size: {point-size};"
   aria-label="{tag-name} ({count} items)"
   >{tag-name}</a>
  • {tag-url} – 連結到標籤頁的 URL
  • {id} – 標籤的分類 ID
  • {pos} – 標籤雲中的位置順序
  • {point-size} – 標籤的字體大小，介於
    • 最小： 8 pt
    • 最大： 22 pt
  • {tag-name} – 標籤名稱
  • {count} – 與標籤關聯的帖子數

這是原始的標籤雲外觀的樣本：

如何更改 Gutenberg 標籤雲的字體大小

有時，標籤看起來可能太大或太小而無法適合您的佈局。不幸的是，Gutenberg 模塊只得非常有限的選項。您無法在標籤雲的 Gutenberg 面板設置字體大小。

不過，您可以通過插入自定義代碼來改變標籤雲的字體大小。該程式可以在伺服器端或客戶端上執行，在選卡中說明及比較了三種不同的方法。

通過 PHP 修改 (伺服器端)

這是修改後的標籤雲外觀的樣本：

源代碼

修改 WordPress 標籤雲 Gutenberg 模塊字體大小的 3 個方法 (PHP, CSS, JS) 4
取得代碼 → What filter to change font size of tag cloud of standard Gutenberg block | WordPress.org

代碼說明

上面的 PHP 代碼 添加一個 filter hook 來修改 wp_tag_cloud() 函數。 當標籤雲顯示時，將調用 set_tag_cloud_sizes() 函數 as the callback to be run when a tag cloud displays. Dragon 分享的函數包含三個主要步驟：

  1. 通過解析標籤雲中的 HTML 連結元素，提取標籤項目為 $links。
  2. 把 small 與 large 類別，分別添加到使用最小 (8pt) 和最大 (22pt) 字體樣式設置的標籤項目中。
  3. 使用 Regular Expressions 從所有標籤項中刪除內聯樣式。

最小和最大的標籤項目會從 CSS 類繼承字體大小，而其餘的標籤項目將會以正常字體大小顯示。因此，標籤雲的字體大小將不再與標籤數成比例關係。

修改 WordPress 標籤雲 Gutenberg 模塊字體大小的 3 個方法 (PHP, CSS, JS) 5

修改為相同的字體大小

如果只想將所有標籤更改為相同的字體大小，則不需要前兩個步驟。您可以從 set_tag_cloud_sizes() 函數中刪除它們，只需保留用於移除內聯樣式並回傳結果的代碼。

優點

  • 較好的網頁效能
    • 網頁檔案較小
    • 減少阻塞時間
    • 不會出現佈局移位

缺點

  • 可能會使您的 WordPress 伺服器變慢
  • 對於初學者來說太複雜了
  • 如沒有 PHP 編程經驗則很難修改代碼
  • 編碼不當可能會產生安全漏洞

通過 CSS 修改 (客戶端)

這是修改後的標籤雲外觀的樣本：

源代碼

CSS
a.tag-cloud-link[style*="font-size: 10"],
a.tag-cloud-link[style*="font-size: 11"] {
   font-size: 10pt !important;
}

a.tag-cloud-link[style*="font-size: 12"],
a.tag-cloud-link[style*="font-size: 13"] {
   font-size: 12pt !important;
}

a.tag-cloud-link[style*="font-size: 14"],
a.tag-cloud-link[style*="font-size: 15"] {
   font-size: 14pt !important;
}

a.tag-cloud-link[style*="font-size: 16"],
a.tag-cloud-link[style*="font-size: 17"] {
   font-size: 16pt !important;
}

a.tag-cloud-link[style*="font-size: 18"],
a.tag-cloud-link[style*="font-size: 19"], 
a.tag-cloud-link[style*="font-size: 2"] {
   font-size: 18pt !important;
}

代碼說明

下圖描述根據上面的的 CSS 規則所輸出的字體大小。

修改 WordPress 標籤雲 Gutenberg 模塊字體大小的 3 個方法 (PHP, CSS, JS) 6

你可以靈活地將標籤雲劃分為幾組。關鍵的 CSS 選擇器模式是 a.tag-cloud-link[style*="font-size: {point-size}"]，它將選擇與指定 {point-size} 匹配的所有標籤項目，而利用*= 運算子允許選擇器有效地處理小數點格式。由於內聯樣式具有最高優先級，因此有必要通過在 CSS 規則中添加 !important 來覆蓋它。當標籤雲元素加載到客戶端時，就會替換標籤項的字體大小。

優點

  • 易於使用和偵錯
  • 100% 安全性
  • 不會有伺服器端的安全性問題
  • 頁面加載期間不會出現佈局移位

缺點

  • 略微增加頁面加載時間

通過 JavaScript 修改 (客戶端)

這是修改後的標籤雲外觀的樣本：

如果使用 JavaScript 改變字體大小，會看到標籤雲在 DOM 渲染期間縮放大小及移位。

源代碼

JavaScript
let sf = 0.7; // set your scale factor
document.querySelectorAll('a.tag-cloud-link')
  .forEach( t => t.style.fontSize = (parseFloat(t.style.fontSize)-8)*sf+8+"pt");

代碼說明

當腳本在客戶端觸發時，JavaScript 會更改標記項的內聯樣式。根據最小字體大小和您所設定的縮放比例，計算出新的字體大小。下圖顯示縮放比例為 0.5 及 0.7 時，原尺寸與新尺寸之間的關係。

修改 WordPress 標籤雲 Gutenberg 模塊字體大小的 3 個方法 (PHP, CSS, JS) 7

優點

  • 易於使用和偵錯
  • 可參數化
  • 不會有伺服器端的安全性問題
  • 不會增加服務器負載

缺點

  • 增加頁面加載時間
    • 增加腳本執行時間
    • 增加渲染時間
  • 頁面加載期間出現佈局移位

常問問題 (FAQ)

應用範疇

  • 按語言或主題分組顯示標籤。
  • 創建標籤的字母索引 – 就像是標籤的電話簿。
  • 僅在標籤雲中顯示特定標籤。
  • 在博客的不同部分中，選擇顯示哪些標籤。
  • 更改標籤雲中的排序順序。
  • 自定義標籤雲項目的鏈接，文本，字體大小或分隔符。
  • 在每個標籤之前或之後添加自定義字符或帖子計數。
  • 在每個帖子中插入僅使用該帖子的標籤的標籤雲。
  • 可以輕鬆地管理後端中的大量標籤或帖子，將它們分為幾組。
  • 將父級添加到標籤，並使它們分層。
修改 WordPress 標籤雲 Gutenberg 模塊字體大小的 3 個方法 (PHP, CSS, JS) 9
標籤組插件的 Gutenberg 模塊的最小和最大字體大小設置

儘管如此，比起使用此插件，我還是偏好使用自定義代碼。因為我不想安裝太多插件，其一是會減慢 WordPress 的速度，其二會增加安全漏洞的潛在風險。 如果只為了改變字體大小，就用上如此功能豐富的插件，可以說是過於冗煩。我只會推薦它，用在創建特殊設計的標籤雲。

您還可以直接使用 wp_tag_cloud() 函數，將標籤雲手動添加到 WordPress。您可以將 PHP 代碼段插入為短代碼 (Shortcode)。這是創建自定義標籤雲頁面或將其添加到主題佈局的最佳途徑之一。官方的函數已經包含許多選項，包括大小、排序和格式，可非常靈活地創建自定義標籤雲而無需添加 Filter Hook。

默認用法

PHP
<?php wp_tag_cloud( array(
   'smallest' => 8, // size of least used tag
   'largest'  => 22, // size of most used tag
   'unit'     => 'pt', // unit for sizing the tags
   'number'   => 45, // displays at most 45 tags
   'format'   => 'flat' // format of the cloud display, 'flat', 'list', or 'array'
   'separator'  => "\n" // The text/space between tags
   'orderby'  => 'name', // order tags by 'name' or 'count'
   'order'    => 'ASC', // order tags by ascending order, 'ASC', 'DESC', or 'RAND'
   'exclude'  => null, // list of tags (term_id) to NOT be displayed, e.g. 5,27
   'include'  => null, // list of tags (term_id) to be only displayed, e.g. 8,22
   'taxonomy' => 'post_tag' // you can even make tags for custom taxonomies
) ); ?>

例子：限制標籤雲的大小，並且按數量而不是名稱排序

PHP
<?php wp_tag_cloud( 'smallest=15&largest=40&number=50&orderby=count' ); ?>

如果您不知道如何將 PHP 代碼添加到 WordPress 帖子或頁面中，建議使用以下插件將 PHP 代碼片段，新增為自定義短代碼。

您在網站上怎樣使用標籤雲呢？有其他高明的技巧嗎？ 請在下面留言分享！

如果您喜歡這篇文章，請分享到您的 Facebook 和 Twitter。您也可以通過 Ko-fi 捐款支持本站。

Scroll to Top