WordPress 3D旋转标签云

知更鸟
知更鸟
知更鸟
1528
文章
6915
评论
更多
 2015年8月30日15:40:55 53 14.6K

这个3D标签云可不是N年前的那个Flash版的 wp-cumulus， 这个3D旋转标签云完全使用JS代码编写，很小只有几K，不用担心像垃圾Flash对资源的耗费。

具体效果看本文的侧边栏标签云。

下面以WordPress默认主题Twenty Fifteen为例，将这个炫酷的特效加到你的博客上。

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

将下载的3d.js脚本放到Twenty Fifteen主题js目录中。

3d.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.     margin: 10px auto 0;
  5. }
  6. #tag_cloud-2 a {
  7.     position:absolute;
  8.     color: #fff;
  9.     text-align: center;
  10.     text-overflow: ellipsis;
  11.     whitewhite-space: nowrap;
  12.     top:0px;
  13.     left:0px;
  14.     padding: 3px 5px;
  15.     border: none;
  16. }
  17. #tag_cloud-2 a:hover {
  18.     background: #d02f53;
  19.     display: block;
  20. }
  21. #tag_cloud-2 a:nth-child(n) {
  22.     background: #666;
  23.     border-radius: 3px;
  24.     display: inline-block;
  25.     line-height: 18px;
  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源代码：来自互联网

文件下载
WordPress 3D旋转标签云
3d效果一下载3d效果二下载
历史上的今天
八月
30
weinxin
关于本站
分享交流WordPress经验与技巧，关注前端设计与网站制作。仅用于功能演示。
获取本主题
售前咨询加Q：598845006
多功能主题 Begin
重定向wp-login.php登录到指定页面 WordPress

重定向wp-login.php登录到指定页面

如果你的WordPress网站已有前端登录注册功能，不想让其他人访问wp-login.php登录页面，并且当访问WordPress默认登录页面时重定向到指定的页面，比如前端登录注册页面等，可以通过下面...
05月24日 196 2
WordPress 5.4.1安全更新、中文版下载 WordPress

WordPress 5.4.1安全更新、中文版下载

WordPress 5.4.修补了7个安全漏洞，并修正了17个问题。这些漏洞存在于 WordPress 版本 5.4 和更早版本，WordPress 3.7 以后的所有版本都已修补安全漏洞，建议立即更...
04月30日 1.7K 9
B站BV号链接转av号 WordPress

B站BV号链接转av号

之前用Smartideo插件转载B站视频，只需要复制粘贴视频地址到文章中就可以了，B站是目前唯数不多没广告的视频站点了，不过最近B站视频链接后缀ID号从av变成BV开头，插件的功能失效。 已有用户向插...
04月08日 929 8
获取本主题
售前咨询加Q：598845006
多功能主题 Begin
匿名

发表评论

匿名网友 填写信息

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

评论：53   其中：访客  48   博主  5
    • 老杨 老杨 4
      2015年8月30日 15点55分 1F
      回复

      加上彩色就更好了。

      • 飞越无限 飞越无限 2
        2015年8月30日 16点30分 2F
        回复

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

        • 张戈博客 张戈博客 3
          2015年8月30日 16点37分 3F
          回复

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

          • aunsen aunsen 4
            2015年8月30日 20点58分 4F
            回复

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

            • 电脑天空 电脑天空 5
              2015年8月31日 00点09分 5F
              回复

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

              • boke112导航 boke112导航 5
                2015年8月31日 14点03分 6F
                回复

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

                • 黑色理想 黑色理想 2
                  2015年8月31日 16点19分 7F
                  回复

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

                  • 捕鱼达人 捕鱼达人 2
                    2015年8月31日 18点20分 8F
                    回复

                    试试看怎么样

                    • 香港云主机 香港云主机 3
                      2015年9月1日 10点20分 9F
                      回复

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

                      • 关于爱情 关于爱情 2
                        2015年9月1日 10点55分 10F
                        回复

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

                        • 老杨 老杨 4
                          2015年9月1日 17点55分 11F
                          回复

                          3D 效果2 这个不错。

                          • 交通事故律师 交通事故律师 3
                            2015年9月2日 13点30分 12F
                            回复

                            挺有趣的

                            • 科研动力 科研动力 2
                              2015年9月2日 20点39分 13F
                              回复

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

                              • 阿里书籍 阿里书籍 5
                                2015年9月2日 22点18分 14F
                                回复

                                很炫彩的功能

                                • 土工膜 土工膜 1
                                  2015年9月4日 09点45分 15F
                                  回复

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

                                  • 美容护肤小窍门 美容护肤小窍门 1
                                    2015年9月5日 14点36分 16F
                                    回复

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

                                    • 豪华转马 豪华转马 0
                                      2015年9月7日 14点50分 17F
                                      回复

                                      不错，谢谢分享，收下了！

                                      • 清风美文 清风美文 2
                                        2015年9月8日 14点21分 18F
                                        回复

                                        也准备升级新版本了

                                        • 网赚博客 网赚博客 0
                                          2015年9月9日 18点04分 19F
                                          回复

                                          鸟哥哥，HotNewspro主题能不能用这个3D标签！

                                          • dazi dazi 2
                                            2015年9月24日 13点36分 20F
                                            回复

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

                                            • dazi dazi 2
                                              2015年9月24日 14点20分 21F
                                              回复

                                              补充一下：ie也不支持，支持chromium

                                              • 成长学 成长学 1
                                                2015年9月27日 13点43分 22F
                                                回复

                                                很实用，学习了。

                                                • 明月登楼的博客 明月登楼的博客 5
                                                  2015年10月19日 20点13分 23F
                                                  回复

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

                                                  • mengshuaiku mengshuaiku 0
                                                    2015年10月19日 20点33分 24F
                                                    回复

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

                                                    • 多麦 多麦 0
                                                      2015年10月28日 10点30分 25F
                                                      回复

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

                                                      • TeachCourse TeachCourse 2
                                                        2015年11月27日 21点06分 26F
                                                        回复

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

                                                        • ewe ewe 0
                                                          2015年11月27日 22点06分 27F
                                                          回复

                                                          qqqwwwwwww发的发的地方

                                                          • 爆实惠 爆实惠 1
                                                            2015年11月28日 15点41分 28F
                                                            回复

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

                                                            • 乐枫弦 乐枫弦 0
                                                              2015年11月29日 16点56分 29F
                                                              回复

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

                                                              • ck电影部落 ck电影部落 0
                                                                2015年12月12日 21点03分 30F
                                                                回复

                                                                不错，用上了

                                                                • oloo oloo 0
                                                                  2016年1月1日 16点59分 31F
                                                                  回复

                                                                  恒不错

                                                                  • 龙之游 龙之游 1
                                                                    2016年1月5日 11点31分 32F
                                                                    回复

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

                                                                    • 1121 1121 1
                                                                      2016年2月8日 23点07分 33F
                                                                      回复

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

                                                                      • 别逗了好么 别逗了好么 0
                                                                        2016年2月25日 12点10分 34F
                                                                        回复

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

                                                                        • U盘启动 U盘启动 3
                                                                          2016年3月25日 09点29分 35F
                                                                          回复

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

                                                                          • 软膜天花 软膜天花 4
                                                                            2016年4月26日 21点41分 36F
                                                                            回复

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

                                                                            • 阆苑博客 阆苑博客 3
                                                                              2016年7月8日 00点24分 37F
                                                                              回复

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

                                                                              • wonsen wonsen 1
                                                                                2017年5月21日 13点10分 38F
                                                                                回复

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

                                                                                • 随小风 随小风 1
                                                                                  2017年6月19日 12点13分 39F
                                                                                  回复

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

                                                                                  • 啊啊啊 啊啊啊 0
                                                                                    2018年9月15日 17点37分 40F
                                                                                    回复

                                                                                    儿歌