隨著博客文章的不斷增多,文章之間的分類體系就變得越來越重要了,原先在下在博客創立之初就設定了的文章分類框架顯然已經不能滿足現時博客文章分類的需要,漸漸地,標籤成為了第二大分類文章的手段。但是,雖然在下一直堅持給文章打上標籤,博客卻一直沒有一個通過標籤來訪問文章的入口。這是因為 WordPress 的標籤雲只提供在側邊欄,而側邊欄的設計又與博客的主題頗為不搭,所以就一直沒有啟用。這次突然想到也許可以單獨創建一個頁面面用來展示標籤雲,這樣一來,問題也就解決了。遂上網搜索相關解決方案,又是在 CSDN 上找到了好貨,於是立即動手實施。

首先,當然像上次做書單模板一樣,要先做一個標籤雲的模板。在 WordPress 主題根目錄下把 page.php 複製一份,重命名為 page-tag.php ,並把開頭的注釋改為如下所示。

/**
 * Template Name: 標籤雲模版
 */

接下來就可以直接在 </main> 標籤前面一行加上:

<?php wp_tag_cloud('smallest=14&largest=46&unit=px&number=500'); ?>

這裡就直接調取了 WordPress 標籤雲的函數,其中 smallest 代表最小字體, largest 代表最大字體, unit 代表單位(可選 pt 或 px), number 代表顯示標籤數量,這些參數都可以依據個人喜好進行修改。

這樣,一個簡單的標籤雲模板就做好了。來到 WordPress 後台,新建一個頁面,在模板處選擇標籤雲模板,直接發布,就可以看到剛剛做好的標籤雲模板了。

當然,這只是一個簡單的標籤雲模板。可以看到,其樣式和展示在側邊欄的標籤雲完全沒有什麼區別,顏色也很單一,不便於區分,要是今後想要改改標籤雲的參數,還要跑到主題模板那邊改代碼,比較麻煩。

所以,要是追求美觀和易用性的話,還是要對這個頁面進行一波優化。

通過檢索,在下發現曾經有一款非常有名的 WordPress 標籤管理插件能夠滿足需要,它叫做 Simple Tags。不過,當在下去插件商店裡尋找它的時候,卻怎麼也找不到它,又經過了一番查找,原來是因為它改名了,現在的它叫做 TaxoPress

果斷把它安裝下來,依次點擊 Settings - Legacy

可以看到這裡能對標籤雲的大小、顏色等屬性做可視化修改,這樣一來,修改標籤雲就方便了許多。設置好了之後,想要看到效果,別忘了把頁面模板里的 WordPress 的標籤雲函數改成 TaxoPress 的標籤雲函數。

//刪除
<?php wp_tag_cloud('smallest=14&largest=46&unit=px&number=500'); ?>

//添加
<?php st_tag_cloud(); ?>

改完之後一看,問題就隨之出現了。雖然 TaxoPress 能對標籤雲的顏色進行修改,其可以修改的也僅僅只是最熱門的標籤和最冷門的標籤的顏色,換句話說,只能實現標籤雲的顏色漸變。這聽起來好像也不錯,但是實際的效果並不如在下想像的那麼出色。

可以看到,同色系漸變,標籤之間的區分並不是很明顯。而不同色系的漸變又是不能接受的——想也不用想,這整個標籤雲只能用「怪」來形容。

好在還是有方法,只需要修改一下插件的樣式就可以解決這個問題了,不過還得要到代碼里去找一找。

定位到 wp-content/plugins/simple-tags/inc,編輯 class.client.php 這個文件,找到 get_color_by_scale( $scale_color, $min_color, $max_color ) 這一行,並注釋掉或者直接刪掉以下代碼。

$scale_color = $scale_color / 100;
$minr = hexdec(substr($min_color, 1, 2));
$ming = hexdec(substr($min_color, 3, 2));
$minb = hexdec(substr($min_color, 5, 2));
$maxr = hexdec(substr($max_color, 1, 2));
$maxg = hexdec(substr($max_color, 3, 2));
$maxb = hexdec(substr($max_color, 5, 2));
$r = dechex(intval((($maxr – $minr) * $scale_color) + $minr));
$g = dechex(intval((($maxg – $ming) * $scale_color) + $ming));
$b = dechex(intval((($maxb – $minb) * $scale_color) + $minb));

在後面加上以下代碼:

$r = dechex(rand(0,255));
$g = dechex(rand(0,196));
$b = dechex(rand(0,255));

完成之後,彩色的標籤雲就會出現,目的也圓滿達成了。不過要注意,今後如果插件更新,還是要重新改一下上面的樣式代碼的。

最後,這就是在下的標籤雲了,不得不說看著還是很有成就感的。(=・ω・=)


封面來源:文月 | mocha@絵師100人展 #pixiv https://www.pixiv.net/artworks/90992369