WordPress 3D旋转标签云

  • A+
所属分类:WordPress

这个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:

目前评论:52   其中:访客  47   博主  5

    • avatar 老杨 4

      加上彩色就更好了。

      • avatar 飞越无限 2

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

        • avatar 张戈博客 3

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

          • avatar aunsen 4

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

            • avatar 电脑天空 5

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

              • avatar boke112导航 5

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

                • avatar 黑色理想 2

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

                  • avatar 捕鱼达人 2

                    试试看怎么样

                    • avatar 香港云主机 3

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

                      • avatar 关于爱情 2

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

                        • avatar 老杨 4

                          3D 效果2 这个不错。

                          • avatar 交通事故律师 4

                            挺有趣的

                            • avatar 科研动力 2

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

                              • avatar 阿里书籍 6

                                很炫彩的功能

                                • avatar 土工膜 1

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

                                  • avatar 美容护肤小窍门 1

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

                                    • avatar 豪华转马 0

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

                                      • avatar 清风美文 3

                                        也准备升级新版本了

                                        • avatar 网赚博客 0

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

                                            • avatar boke112导航 5

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

                                            • avatar dazi 2

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

                                              • avatar dazi 2

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

                                                • avatar 成长学 1

                                                  很实用,学习了。

                                                  • avatar 明月登楼的博客 5

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

                                                    • avatar mengshuaiku 0

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

                                                      • avatar 多麦 0

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

                                                        • avatar TeachCourse 2

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

                                                          • avatar ewe 0

                                                            qqqwwwwwww发的发的地方

                                                            • avatar 爆实惠 1

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

                                                              • avatar 乐枫弦 0

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

                                                                • avatar ck电影部落 0

                                                                  不错,用上了

                                                                  • avatar oloo 0

                                                                    恒不错

                                                                    • avatar 龙之游 1

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

                                                                      • avatar 1121 1

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

                                                                        • avatar 别逗了好么 0

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

                                                                          • avatar U盘启动 3

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

                                                                            • avatar 软膜天花 4

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

                                                                              • avatar 阆苑博客 3

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

                                                                                • avatar wonsen 1

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

                                                                                  • avatar 随小风 1

                                                                                    我在我的博客上参照博主的方法尝试了下 没成功