Last Updated on 2021-10-18 by Clay
在使用 WordPress 所搭建的網站中，比如說部落格類型的網站，往往會在側邊的工具欄中放上標籤雲（tag cloud），而這些標籤雲的樣式往往都由當前網站所採用的主題（theme）來決定。
實際上，透過修改主題的 functions.php 文件、以及自訂 CSS 樣式，我們幾乎可以任意客製化自己想要的標籤雲樣式。以下逐步說明如何修改。
修改標籤雲的樣式
我最近更換了部落格的主題，我很喜歡這個主題，然而，它所預設的標籤雲樣式我卻不怎麼喜歡。
下面則是我預計修改的目標樣式：
那麼，為了完成上圖中的效果，我們需要更動以下兩個地方：
- functions.php： 將標籤雲的文字大小統一
- 附加的 CSS： 將標籤雲加上邊框、顏色、填充（不然會全部擠在一起）
Step 1: 修改 functions.php
這份檔案需要前往 WordPress 的後台尋找，路徑應該是 "wp-content" -> "themes" -> "THEME_YOU_USED" -> "functions.php"。
編輯檔案，在 functions.php 文件的最下方，加入以下程式碼：
// Fixed the tag cloud size
add_filter( 'widget_tag_cloud_args', 'change_tag_cloud_font_sizes');
/**
* Change the Tag Cloud's Font Sizes.
*
* @since 1.0.0
*
* @param array $args
*
* @return array
*/
function change_tag_cloud_font_sizes( array $args ) {
$args['smallest'] = '12';
$args['largest'] = '12';
return $args;
}
加入後儲存、關閉。
這裡我們設定了最小的字體大小為 12、最大的字體大小也是 12。這樣一來，我們標籤雲的字體大小就全部統一了。
Step 2: 修改附加的 CSS
前往 wp-admin 後台，從左側選單進入 "Appearance" -> "Customize"。
找到附加的 CSS 欄位後，設定要給標籤雲使用的樣式：
/* tag cloud */
.tagcloud a {
display: inline-block;
margin: 2px 2px;
padding: 1px 8px;
color: black;
border-color: black;
border-width: 2.5px;
border-style: solid;
border-radius: 4px;
}
這樣一來，應該就能完成我所喜歡那樣樣式的標籤雲了。
References
- https://www.byperth.com/2015/11/29/wordpress-tag-cloud-widget/
- https://wordpress.org/support/topic/tag-cloud-style-2/
- https://stackoverflow.com/questions/40811909/change-the-font-size-in-tag-cloud