WordPress 3D旋转标签云

知更鸟 2015年8月30日15:40:55WordPress5315.1K阅读模式

这个3D标签云可不是N年前的那个Flash版的 wp-cumulus, 这个3D旋转标签云完全使用JS代码编写,很小只有几K,不用担心像垃圾Flash对资源的耗费。文章源自知更鸟-https://zmingcx.com/wordpress-3dcumulus.html

具体效果看本文的侧边栏标签云。文章源自知更鸟-https://zmingcx.com/wordpress-3dcumulus.html

下面以WordPress默认主题Twenty Fifteen为例,将这个炫酷的特效加到你的博客上。文章源自知更鸟-https://zmingcx.com/wordpress-3dcumulus.html

一,添加生成3D效果的脚本

将下载的3d.js脚本放到Twenty Fifteen主题js目录中。文章源自知更鸟-https://zmingcx.com/wordpress-3dcumulus.html

注:这个3D旋转标签云有两种效果的JS文件,我用的是第二种。文章源自知更鸟-https://zmingcx.com/wordpress-3dcumulus.html

打开Twenty Fifteen主题 functions.php 模板文件,在大约252行,添加:文章源自知更鸟-https://zmingcx.com/wordpress-3dcumulus.html

  1. wp_enqueue_script( '3d', get_template_directory_uri() . '/js/3d.js' );

或者直接将下面代码加到主题header模板文章源自知更鸟-https://zmingcx.com/wordpress-3dcumulus.html

  1. <script type="text/javascript" src="<?php bloginfo('template_directory'); ?>/js/3d.js"></script>

二,添加样式

将下面的样式添加到主题style.css的最后即可:文章源自知更鸟-https://zmingcx.com/wordpress-3dcumulus.html

  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 需根据不同情况加以修改,比如查看标签云小工具的网页源代码显示的是:文章源自知更鸟-https://zmingcx.com/wordpress-3dcumulus.html

  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.文章源自知更鸟-https://zmingcx.com/wordpress-3dcumulus.html

这个3D旋转标签云本身是支持低版本IE的,不过本例中配套的样式使用了CSS3特效,所以在低版本IE上标签背影色会不显示。文章源自知更鸟-https://zmingcx.com/wordpress-3dcumulus.html

JS源代码:来自互联网文章源自知更鸟-https://zmingcx.com/wordpress-3dcumulus.html

weinxin
版权声明
本站原创文章转载请注明文章出处及链接,谢谢合作!
WordPress 评论显示用户角色 WordPress

WordPress 评论显示用户角色

通过本文的方法,可以在WordPress每条评论显示注册用户角色标签。 代码一,自动在评论者名称后面添加 代码添加到当前主题函数模板 functions.php 中: if ( ! class_exi...
用小工具创建 WordPress 超级菜单 WordPress

用小工具创建 WordPress 超级菜单

所谓的超级菜单,就是有别于正常样式简单的 WordPress 菜单,添加更加丰富的自定义内容,在WordPress后台安装插件页面搜索”mega menu“,会找到一堆相关的插件。 为了让菜单样式有变...
在 WordPress 后台直接复制文章 WordPress

在 WordPress 后台直接复制文章

在 WordPress 后台文章列表中,如果能直接复制一篇文章或页面,然后重新编辑后发表,是不是很方便。那为什么不全选复制文章内容,然后粘贴到新建文章中呢?这是因为这样做仅复制了文章内容,并未同时把原...
评论  53  访客  48  作者  5
    • 老杨
      老杨 4

      加上彩色就更好了。

      • 飞越无限
        飞越无限 2

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

        • 张戈博客
          张戈博客 3

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

          • aunsen
            aunsen 5

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

            • 电脑天空
              电脑天空 5

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

              • boke112导航
                boke112导航 5

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

                • 黑色理想
                  黑色理想 2

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

                  • 捕鱼达人
                    捕鱼达人 2

                    试试看怎么样

                    • 香港云主机
                      香港云主机 3

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

                      • 关于爱情
                        关于爱情 2

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

                        • 老杨
                          老杨 4

                          3D 效果2 这个不错。

                          • 交通事故律师
                            交通事故律师 3

                            挺有趣的

                            • 科研动力
                              科研动力 2

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

                              • 阿里书籍
                                阿里书籍 5

                                很炫彩的功能

                                • 土工膜
                                  土工膜 1

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

                                  • 美容护肤小窍门
                                    美容护肤小窍门 1

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

                                    • 豪华转马
                                      豪华转马 0

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

                                      • 清风美文
                                        清风美文 2

                                        也准备升级新版本了

                                        • 网赚博客
                                          网赚博客 0

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

                                          • dazi
                                            dazi 2

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

                                            • dazi
                                              dazi 2

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

                                              • 成长学
                                                成长学 1

                                                很实用,学习了。

                                                • 明月登楼的博客
                                                  明月登楼的博客 5

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

                                                  • mengshuaiku
                                                    mengshuaiku 0

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

                                                    • 多麦
                                                      多麦 0

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

                                                      • TeachCourse
                                                        TeachCourse 2

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

                                                        • ewe
                                                          ewe 0

                                                          qqqwwwwwww发的发的地方

                                                          • 爆实惠
                                                            爆实惠 1

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

                                                            • 乐枫弦
                                                              乐枫弦 0

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

                                                              • ck电影部落
                                                                ck电影部落 0

                                                                不错,用上了

                                                                • oloo
                                                                  oloo 0

                                                                  恒不错

                                                                  • 龙之游
                                                                    龙之游 1

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

                                                                    • 1121
                                                                      1121 1

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

                                                                      • 别逗了好么
                                                                        别逗了好么 0

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

                                                                        • U盘启动
                                                                          U盘启动 3

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

                                                                          • 软膜天花
                                                                            软膜天花 4

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

                                                                            • 阆苑博客
                                                                              阆苑博客 3

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

                                                                              • wonsen
                                                                                wonsen 1

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

                                                                                • 随小风
                                                                                  随小风 1

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

                                                                                  • 啊啊啊
                                                                                    啊啊啊 0

                                                                                    儿歌

                                                                                  匿名

                                                                                  发表评论

                                                                                  匿名网友 填写信息

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

                                                                                  确定