这个 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 上标签背影色会不显示.