这个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;
- text-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">
- <h2 class="widget-title">标签</h2>
你就需要将 #tag_cloud-2改为#tag_cloud-3，同时将3d.js中的tag_cloud-2也改为tag_cloud-3.
这个3D旋转标签云本身是支持低版本IE的，不过本例中配套的样式使用了CSS3特效，所以在低版本IE上标签背影色会不显示。
JS源代码：来自互联网
本站文章大部分为原创，用于个人学习记录，可能对您有所帮助，仅供参考！
我的微信
微信号已复制
版权声明
本站原创文章转载请注明文章出处及链接，谢谢合作！
广东省肇庆市 1F
加上彩色就更好了。
湖北省 B1
@ 老杨 JS完全影响访问速度，不用
北京市昌平区 2F
鸟哥，你这3d标签不适应啊，能搞个这种吗http://test.wpke.net
中国 B1
@ 飞越无限 嗯，确实没人家的好看，那就抄过来吧
北京市昌平区 B2
@ 知更鸟 鸟哥，改版的分享下哈！
中国 B3
@ 飞越无限 整理后，会分享的
江苏省苏州市 B4
@ 知更鸟 鸟哥，这个很漂亮啊。其他主题应该也是可以的吧
中国 B5
@ 美Win网 是的
广东省深圳市 3F
也是一个花哨功能呢，鼠标放上去不停的转，按理说鼠标放上去应该定位一下。。。一直转都不知道点哪个了。
中国 B1
@ 张戈博客 改成上面朋友建议的样式
湖北省武汉市 B1
@ 张戈博客 好像鼠标移动上去真的停不下来
陕西省安康市紫阳县 4F
N年前既视感！WP也时髦复古风啊！
云南省大理州 5F
晕，鸟哥，请问下 Begin 主题 代码要添加到 第几行呢？
广西南宁市 6F
看上去果然生动很多，有空我再试试
广东省广州市 7F
鸟哥 第二步 二，添加样式
是添加到begin主题还是Twenty Fifteen主题
中国 B1
@ 黑色理想 主题目前已集成该功能，还是升级一下吧
山东省 B2
@ 知更鸟 我申请升级！
广东省广州市 8F
试试看怎么样
重庆市 9F
WordPress 3D旋转标签云效果还不错，用地球旋转标签云也很漂亮
江苏省苏州市 10F
鸟哥可否帮忙看一下我的博客，现在怎么好多的乱码？非常感谢！！！
http://www.yi510.com/
江苏省苏州市 B1
@ 关于爱情 打不开啊
香港 11F
3D 效果2 这个不错。
广东省广州市 12F
挺有趣的
贵州省贵阳市 13F
一直想入手博主的主题，虽然网上也有一样一样的，但是对于博主，我认为购买正版才是最大的支持。不过现在有D8，也是正版，虽然D8的更新和售后不敢恭维，但是都花钱了。唉，等我再思考几天看看
广西百色市 B1
@ 科研动力 不管怎么说，都不如正版的好，有能力还是选择正版比较给力
江苏省南京市 14F
很炫彩的功能
山东省德州市 15F
鸟哥可否帮忙看一下我的的网站，JS还有没有修改的地方，感觉响应速度很慢。
http://www.toogooo.com/
广东省广州市 16F
个人觉得还是不要添加太多脚本
河南省郑州市 17F
不错，谢谢分享，收下了！
陕西省西安市 18F
也准备升级新版本了
河南省郑州市 19F
鸟哥哥，HotNewspro主题能不能用这个3D标签！
广西南宁市 B1
@ 网赚博客 个人认为这个标签云跟主题无关的，只要是WordPress站点都可以用的
云南省保山市 20F
请问一下，为啥我的在firefox下面没效果。www.imallrushi.com
云南省保山市 21F
补充一下：ie也不支持，支持chromium
北京市 22F
很实用，学习了。
河南省南阳市 23F
没有看明白到底是怎么调用的呀？
上海市松江区 24F
站长非常厉害。看看我的效果http://www.mengshuaiku.com/
河南省郑州市 25F
问下：这个主题的导航栏在下拉的时候能不能固定住？
广东省广州市 26F
很漂亮的一个小功能，等哪天有空了，也装上，美化一下网站！
广东省广州市 27F
qqqwwwwwww发的发的地方
河南省新乡市 28F
好漂亮的标签云，mark
江苏省南京市 29F
鸟哥请问点击下载后出现那个下载对话框是怎么实现的呀，还是文章里面3d.js下载那个css效果怎么做呢，谢谢
河南省郑州市 30F
不错，用上了
江苏省淮安市 31F
恒不错
浙江省杭州市 32F
不知道为什么有问题，标签全部挤在一起，也不动。。http://www.lzyhll.com
山东省潍坊市 33F
首页的幻灯片在哪里设置，图片怎么上传？
上海市徐汇区 34F
效果不错，织梦里面也可以的
福建省厦门市 35F
想问下这个会不会影响网站的seo效果呢?
广东省广州市 36F
这个功能好像好酷哟! 谢谢分享！
浙江省杭州市 37F
这个功能很炫酷，不过唯一的缺点是不能所有的页面都添加，百度搜索“WordPress不同的页面均可以添加3D旋转标签云方法”，实际上还是用的鸟叔的技术，供大家参考
湖北省武汉市 38F
请问Ality主题的如何加入这个3D旋转标签云？
江苏省苏州市 39F
我在我的博客上参照博主的方法尝试了下 没成功
江苏省苏州市 40F
儿歌