這個 3D 標籤雲可不是 N 年前的那個 Flash 版的 wp-cumulus， 這個 3D 旋轉標籤雲完全使用 JS 代碼編寫，很小隻有幾 K，不用擔心像垃圾 Flash 對資源的耗費。

具體效果看本文的側邊欄標籤雲。

下面以 WordPress 默認主題 Twenty Fifteen 為例，將這個炫酷的特效加到你的博客上。

一，添加生成 3D 效果的腳本

將下載的 3d.js 腳本放到 Twenty Fifteen 主題 js 目錄中。

注：這個 3D 旋轉標籤雲有兩種效果的 JS 文件，我用的是第二種。

打開 Twenty Fifteen 主題 functions.php 模板文件，在大約 252 行，添加：

  1. wp_enqueue_script( '3d', get_template_directory_uri() . '/js/3d.js' );

或者直接將下面代碼加到主題 header 模板

  1. <script type="text/javascript" src="<?php bloginfo('template_directory'); ?>/js/3d.js"></script>

二，添加樣式

將下面的樣式添加到主題 style.css 的最後即可：

  1. #tag_cloud-2 {
  2. position:relative;
  3.     height:340px;
  4. margin: 10px auto 0;
  5. }
  6. #tag_cloud-2 a {
  7.     position:absolute;
  8. color: #fff;
  9.     text-align: center;
  10. overflow: ellipsis;
  11.     whitewhite-space: nowrap;
  12. top:0px;
  13.     left:0px;
  14. padding: 3px 5px;
  15.     border: none;
  16. #tag_cloud-2 a:hover {
  17. background: #d02f53;
  18.     display: block;
  19. #tag_cloud-2 a:nth-child(n) {
  20. background: #666;
  21.     border-radius: 3px;
  22. display: inline-block;
  23.     line-height: 18px;
  24. margin: 0 10px 15px 0;
  25. }
  26. #tag_cloud-2 a:nth-child(2n) {
  27.     background: #d1a601;
  28. #tag_cloud-2 a:nth-child(3n) {
  29. background: #286c4a;
  30. }
  31. #tag_cloud-2 a:nth-child(5n) {
  32.     background: #518ab2;
  33. #tag_cloud-2 a:nth-child(4n) {
  34. background: #c91d13;
  35. }

三、修改對應選擇器名稱

比較麻煩點的是，其中 #tag_cloud-2 需根據不同情況加以修改，比如查看標籤雲小工具的網頁源代碼顯示的是：

  1. <aside id="tag_cloud-3" class="widget widget_tag_cloud">
  2. class="widget-title"> 標籤</h2>

你就需要將 #tag_cloud-2 改為 #tag_cloud-3，同時將 3d.js 中的 tag_cloud-2 也改為 tag_cloud-3.

這個 3D 旋轉標籤雲本身是支持低版本 IE 的，不過本例中配套的樣式使用了 CSS3 特效，所以在低版本 IE 上標籤背影色會不顯示.