這個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行，添加：
- wp_enqueue_script(?‘3d’,?get_template_directory_uri()?.?‘/js/3d.js’?);
或者直接將下面代碼加到主題header模板
- <script?type=”text/javascript”?src=”<?php?bloginfo(‘template_directory’);??>/js/3d.js”></script>
二，添加樣式
將下面的樣式添加到主題style.css的最后即可：
- #tag_cloud-2?{
- position:relative;
- ????height:340px;
- margin:?10px?auto?0;
- }
- #tag_cloud-2?a?{
- ????position:absolute;
- color:?#fff;
- ????text-align:?center;
- overflow:?ellipsis;
- ????whitewhite-space:?nowrap;
- top:0px;
- ????left:0px;
- padding:?3px?5px;
- ????border:?none;
- #tag_cloud-2?a:hover?{
- background:?#d02f53;
- ????display:?block;
- #tag_cloud-2?a:nth-child(n)?{
- background:?#666;
- ????border-radius:?3px;
- display:?inline-block;
- ????line-height:?18px;
- margin:?0?10px?15px?0;
- }
- #tag_cloud-2?a:nth-child(2n)?{
- ????background:?#d1a601;
- #tag_cloud-2?a:nth-child(3n)?{
- background:?#286c4a;
- }
- #tag_cloud-2?a:nth-child(5n)?{
- ????background:?#518ab2;
- #tag_cloud-2?a:nth-child(4n)?{
- background:?#c91d13;
- }
三、修改對應選擇器名稱
比較麻煩點的是，其中 #tag_cloud-2 需根據不同情況加以修改，比如查看標簽云小工具的網頁源代碼顯示的是：
- <aside?id=”tag_cloud-3″?class=”widget?widget_tag_cloud”>
- class=”widget-title”>標簽</h2>
你就需要將 #tag_cloud-2改為#tag_cloud-3，同時將3d.js中的tag_cloud-2也改為tag_cloud-3.
這個3D旋轉標簽云本身是支持低版本IE的，不過本例中配套的樣式使用了CSS3特效，所以在低版本IE上標簽背影色會不顯示.
正版主題咨詢