WordPress 3D旋转标签云

这个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.     margin10px auto 0;
  5. }
  6. #tag_cloud-2 a {
  7.     position:absolute;
  8.     color#fff;
  9.     text-aligncenter;
  10.     text-overflow: ellipsis;
  11.     whitewhite-spacenowrap;
  12.     top:0px;
  13.     left:0px;
  14.     padding3px 5px;
  15.     bordernone;
  16. }
  17. #tag_cloud-2 a:hover {
  18.     background#d02f53;
  19.     displayblock;
  20. }
  21. #tag_cloud-2 a:nth-child(n) {
  22.     background#666;
  23.     border-radius: 3px;
  24.     displayinline-block;
  25.     line-height18px;
  26.     margin: 0 10px 15px 0;
  27. }
  28. #tag_cloud-2 a:nth-child(2n) {
  29.     background#d1a601;
  30. }
  31. #tag_cloud-2 a:nth-child(3n) {
  32.     background#286c4a;
  33. }
  34. #tag_cloud-2 a:nth-child(5n) {
  35.     background#518ab2;
  36. }
  37. #tag_cloud-2 a:nth-child(4n) {
  38.     background#c91d13;
  39. }

三、修改对应选择器名称

比较麻烦点的是,其中 #tag_cloud-2 需根据不同情况加以修改,比如查看标签云小工具的网页源代码显示的是:

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

你就需要将 #tag_cloud-2改为#tag_cloud-3,同时将3d.js中的tag_cloud-2也改为tag_cloud-3.

这个3D旋转标签云本身是支持低版本IE的,不过本例中配套的样式使用了CSS3特效,所以在低版本IE上标签背影色会不显示。

JS源代码:来自互联网

weinxin
我的微信
分享交流WordPress经验与技巧,关注前端设计与网站制作。仅用于功能演示。
Begin主题购买
Begin主题购买

发表评论

:?: :razz: :sad: :evil: :!: :smile: :oops: :grin: :eek: :shock: :???: :cool: :lol: :mad: :twisted: :roll: :wink: :idea: :arrow: :neutral: :cry: :mrgreen:

目前评论:51   其中:访客  46   博主  5

    • avatar 老杨 来自天朝的朋友 火狐浏览器 Windows 7 广东省肇庆市 电信 4

      加上彩色就更好了。

        • avatar 阅读驿站 来自天朝的朋友 谷歌浏览器 Windows 7 湖北省武汉市 移动 3

          @老杨 JS完全影响访问速度,不用

        • avatar 飞越无限 来自天朝的朋友 谷歌浏览器 Windows 7 北京市昌平区 联通 2

          鸟哥,你这3d标签不适应啊,能搞个这种吗http://test.wpke.net

          • avatar 张戈博客 来自天朝的朋友 谷歌浏览器 Windows 7 广东省深圳市 联通 3

            也是一个花哨功能呢,鼠标放上去不停的转,按理说鼠标放上去应该定位一下。。。一直转都不知道点哪个了。

              • avatar 知更鸟 Admin 来自天朝的朋友 火狐浏览器 Windows 7 辽宁省 移动

                @张戈博客 改成上面朋友建议的样式

                • avatar 009 来自天朝的朋友 谷歌浏览器 Windows 7 湖北省武汉市 电信 5

                  @张戈博客 好像鼠标移动上去真的停不下来

                • avatar aunsen 来自天朝的朋友 火狐浏览器 Windows 10 陕西省安康市紫阳县 联通 4

                  N年前既视感!WP也时髦复古风啊!

                  • avatar 电脑天空 来自天朝的朋友 火狐浏览器 Windows 7 云南省大理州大理市 电信 5

                    晕,鸟哥,请问下 Begin 主题 代码要添加到 第几行呢?

                    • avatar boke112导航 来自天朝的朋友 谷歌浏览器 Windows XP 广西南宁市 电信 5

                      看上去果然生动很多,有空我再试试

                      • avatar 黑色理想 来自天朝的朋友 谷歌浏览器 Windows 10 广东省广州市 鹏博士长城宽带 2

                        鸟哥 第二步 二,添加样式
                        是添加到begin主题还是Twenty Fifteen主题

                          • avatar 知更鸟 Admin 来自天朝的朋友 火狐浏览器 Windows 7 辽宁省 移动

                            @黑色理想 主题目前已集成该功能,还是升级一下吧

                          • avatar 捕鱼达人 来自天朝的朋友 谷歌浏览器 Windows 10 广东省广州市 新一代IDC机房 2

                            试试看怎么样

                            • avatar 香港云主机 来自天朝的朋友 谷歌浏览器 Windows 7 重庆市 电信 3

                              WordPress 3D旋转标签云效果还不错,用地球旋转标签云也很漂亮

                              • avatar 关于爱情 来自天朝的朋友 谷歌浏览器 Windows 7 江苏省苏州市 电信 2

                                鸟哥可否帮忙看一下我的博客,现在怎么好多的乱码?非常感谢!!!
                                http://www.yi510.com/

                                • avatar 老杨 Singapore 火狐浏览器 Windows 7 香港 特别行政区 4

                                  3D 效果2 这个不错。

                                  • avatar 交通事故律师 来自天朝的朋友 搜狗浏览器 Windows XP 广东省广州市 电信 4

                                    挺有趣的

                                    • avatar 科研动力 来自天朝的朋友 谷歌浏览器 Windows 7 贵州省贵阳市 电信 2

                                      一直想入手博主的主题,虽然网上也有一样一样的,但是对于博主,我认为购买正版才是最大的支持。不过现在有D8,也是正版,虽然D8的更新和售后不敢恭维,但是都花钱了。唉,等我再思考几天看看

                                        • avatar boke112导航 来自天朝的朋友 谷歌浏览器 Windows 7 广西百色市 电信 5

                                          @科研动力 不管怎么说,都不如正版的好,有能力还是选择正版比较给力

                                        • avatar 阿里书籍 来自天朝的朋友 谷歌浏览器 Windows 7 江苏省南京市 电信 6

                                          很炫彩的功能

                                          • avatar 土工膜 来自天朝的朋友 谷歌浏览器 Windows 7 山东省德州市 电信 1

                                            鸟哥可否帮忙看一下我的的网站,JS还有没有修改的地方,感觉响应速度很慢。
                                            http://www.toogooo.com/

                                            • avatar 美容护肤小窍门 来自天朝的朋友 谷歌浏览器 Windows 7 北京市 铁通IDC机房 1

                                              个人觉得还是不要添加太多脚本

                                              • avatar 豪华转马 来自天朝的朋友 谷歌浏览器 Windows 7 河南省郑州市 卧龙游乐设备有限公司 0

                                                不错,谢谢分享,收下了!

                                                • avatar 清风美文 来自天朝的朋友 谷歌浏览器 Windows 7 陕西省西安市 电信 3

                                                  也准备升级新版本了

                                                  • avatar 网赚博客 来自天朝的朋友 谷歌浏览器 Windows XP 河南省郑州市 电信 0

                                                    鸟哥哥,HotNewspro主题能不能用这个3D标签!

                                                      • avatar boke112导航 来自天朝的朋友 谷歌浏览器 Windows XP 广西南宁市 /桂林市 5

                                                        @网赚博客 个人认为这个标签云跟主题无关的,只要是WordPress站点都可以用的

                                                      • avatar dazi 来自天朝的朋友 火狐浏览器 Ubuntu Linux 云南省保山市 电信 1

                                                        请问一下,为啥我的在firefox下面没效果。www.imallrushi.com

                                                        • avatar dazi 来自天朝的朋友 火狐浏览器 Ubuntu Linux 云南省保山市 电信 1

                                                          补充一下:ie也不支持,支持chromium

                                                          • avatar 成长学 来自天朝的朋友 谷歌浏览器 Mac OS X 10_10_5 北京市 联通 1

                                                            很实用,学习了。

                                                            • avatar 明月登楼的博客 来自天朝的朋友 谷歌浏览器 Windows 10 河南省南阳市 联通 5

                                                              没有看明白到底是怎么调用的呀?

                                                              • avatar mengshuaiku 来自天朝的朋友 谷歌浏览器 Windows 10 上海市松江区 电信 0

                                                                站长非常厉害。看看我的效果http://www.mengshuaiku.com/

                                                                • avatar 多麦 来自天朝的朋友 谷歌浏览器 Windows 7 河南省郑州市 联通 0

                                                                  问下:这个主题的导航栏在下拉的时候能不能固定住?

                                                                  • avatar TeachCourse 来自天朝的朋友 火狐浏览器 Windows 7 广东省广州市 电信 2

                                                                    很漂亮的一个小功能,等哪天有空了,也装上,美化一下网站! :mrgreen:

                                                                    • avatar ewe 来自天朝的朋友 谷歌浏览器 Windows 7 广东省广州市 鹏博士长城宽带 0

                                                                      qqqwwwwwww发的发的地方

                                                                      • avatar 爆实惠 来自天朝的朋友 谷歌浏览器 Windows 10 河南省南阳市 移动 1

                                                                        好漂亮的标签云,mark :cool:

                                                                        • avatar 乐枫弦 来自天朝的朋友 谷歌浏览器 Windows 7 江苏省苏州市 电信 0

                                                                          鸟哥请问点击下载后出现那个下载对话框是怎么实现的呀,还是文章里面3d.js下载那个css效果怎么做呢,谢谢

                                                                          • avatar ck电影部落 来自天朝的朋友 谷歌浏览器 Windows 10 河南省郑州市 电信 0

                                                                            不错,用上了

                                                                            • avatar oloo 来自天朝的朋友 谷歌浏览器 Windows 7 江苏省淮安市 电信 0

                                                                              恒不错

                                                                              • avatar 龙之游 来自天朝的朋友 谷歌浏览器 Windows 7 浙江省杭州市 铁通 1

                                                                                不知道为什么有问题,标签全部挤在一起,也不动。。http://www.lzyhll.com

                                                                                • avatar 1121 来自天朝的朋友 谷歌浏览器 Windows 7 山东省潍坊市 电信 1

                                                                                  首页的幻灯片在哪里设置,图片怎么上传?

                                                                                  • avatar 别逗了好么 来自天朝的朋友 谷歌浏览器 Windows XP 上海市 联通漕河泾IDC机房 0

                                                                                    效果不错,织梦里面也可以的

                                                                                    • avatar U盘启动 来自天朝的朋友 谷歌浏览器 Windows 7 福建省厦门市 电信 3

                                                                                      想问下这个会不会影响网站的seo效果呢?

                                                                                      • avatar 软膜天花 来自天朝的朋友 谷歌浏览器 Windows 7 广东省广州市 电信 4

                                                                                        这个功能好像好酷哟! 谢谢分享!

                                                                                        • avatar 阆苑博客 来自天朝的朋友 火狐浏览器5.0 Windows 7 浙江省杭州市 阿里云BGP数据中心 3

                                                                                          这个功能很炫酷,不过唯一的缺点是不能所有的页面都添加,百度搜索“WordPress不同的页面均可以添加3D旋转标签云方法”,实际上还是用的鸟叔的技术,供大家参考

                                                                                          • avatar wonsen 来自天朝的朋友 谷歌浏览器 Windows 7 湖北省武汉市 联通 0

                                                                                            请问Ality主题的如何加入这个3D旋转标签云?