WordPress 3D旋转标签云

0590

这个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= src=></script>

二，添加样式

将下面的样式添加到主题style.css的最后即可：

  1. _cloud-2 {
  2.     :;
  3.     :;
  4.     :   0;
  5. }
  6. _cloud-2 a {
  7.     :;
  8.     : ;
  9.     : ;
  10.     text-: ellipsis;
  11.     : ;
  12.     :;
  13.     :;
  14.     :  ;
  15.     : ;
  16. }
  17. _cloud-2 a:hover {
  18.     : ;
  19.     : ;
  20. }
  21. _cloud-2 a:nth-child(n) {
  22.     : ;
  23.     -radius: ;
  24.     : -;
  25.     : ;
  26.     : 0   0;
  27. }
  28. _cloud-2 a:nth-child(2n) {
  29.     : ;
  30. }
  31. _cloud-2 a:nth-child(3n) {
  32.     : ;
  33. }
  34. _cloud-2 a:nth-child(5n) {
  35.     : ;
  36. }
  37. _cloud-2 a:nth-child(4n) {
  38.     : ;
  39. }

三、修改对应选择器名称

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

  1. <aside id=\” =>
  2. <h2 =>标签</h2>

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

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

JS源代码：来自互联网

    © 版权声明
    文章版权声明 1、本网站名称：小四运营
    2、本站永久网址：https://www.xiaosiseo.com
    3、本网站的文章部分内容可能来源于网络，仅供大家学习与参考，如有侵权，请联系站长QQ进行删除处理。
    4、本站一切资源不代表本站立场，并不代表本站赞同其观点和对其真实性负责。
    5、本站一律禁止以任何方式发布或转载任何违法的相关信息，访客发现请向站长举报
    6、本站资源大多存储在云盘，如发现链接失效，请联系我们我们会第一时间更新。

    THE END
    自媒体运营
    # wordpress# Javascript# Wordpress教程# WordPress主题
    喜欢就支持一下吧
    点赞0 分享
    小四seo的头像-小四运营
    群晖NAS共享文件夹、用户、群组建立及权限设置-小四运营
    群晖NAS共享文件夹、用户、群组建立及权限设置
    群晖NAS共享文件夹、用户、群组建立及权限设置
    1年前 8664
    群晖NASdownload station PT下载设置及缓存等注意事项-小四运营
    群晖NASdownload station PT下载设置及缓存等注意事项
    群晖NASdownload station PT下载设置及缓存等注意事项
    1年前 7614
    群晖NAS黑群晖NAS外网进行远程网络唤醒-小四运营
    群晖NAS黑群晖NAS外网进行远程网络唤醒
    群晖NAS黑群晖NAS外网进行远程网络唤醒
    1年前 4756
    全网最全黑苹果配置推荐，高端、中高端、中端、低端配置都有！-小四运营
    全网最全黑苹果配置推荐，高端、中高端、中端、低端配置都有！
    全网最全黑苹果配置推荐，高端、中高端、中端、低端配置都有！
    1年前 4324
    VMware VM 15虚拟机软件破解版(序列号+安装教程)-小四运营
    VMware VM 15虚拟机软件破解版(序列号+安装教程)
    VMware VM 15虚拟机软件破解版(序列号+安装教程)
    1年前 4097
    群晖NASWindows系统下读取群晖NAS文件方法-小四运营
    群晖NASWindows系统下读取群晖NAS文件方法
    群晖NASWindows系统下读取群晖NAS文件方法
    1年前 3325
    相关推荐
    pt工具qbittorrent安装及配置-小四运营
    pt工具qbittorrent安装及配置
    pt工具qbittorrent安装及配置
    1年前 4458
    全网最全黑苹果配置推荐，高端、中高端、中端、低端配置都有！-小四运营
    全网最全黑苹果配置推荐，高端、中高端、中端、低端配置都有！
    全网最全黑苹果配置推荐，高端、中高端、中端、低端配置都有！
    1年前 4324
    群晖NAS安装宝塔面板教程-小四运营
    群晖NAS安装宝塔面板教程
    群晖NAS安装宝塔面板教程
    1年前 3773
    罗马数字表 罗马数字1到100对照表-小四运营
    罗马数字表 罗马数字1到100对照表
    罗马数字表 罗马数字1到100对照表
    1年前 3686
    Matlab图像读取函数imread用法介绍-小四运营
    Matlab图像读取函数imread用法介绍
    Matlab图像读取函数imread用法介绍
    1年前 3603
    windows命令行怎么打开（两种方法）-小四运营
    windows命令行怎么打开（两种方法）
    windows命令行怎么打开（两种方法）
    1年前 3311
    「黑苹果EFI分享」黑苹果上千种机型EFI集合文件免费分享-小四运营
    「黑苹果EFI分享」黑苹果上千种机型EFI集合文件免费分享
    「黑苹果EFI分享」黑苹果上千种机型EFI集合文件免费分享
    1年前 3275
    抖音小店怎么拉入黑名单？拉黑后还能下单吗？-小四运营
    抖音小店怎么拉入黑名单？拉黑后还能下单吗？
    抖音小店怎么拉入黑名单？拉黑后还能下单吗？
    1年前 2680
    夸克网盘怎么设置密码 夸克文件夹加密的方法-小四运营
    夸克网盘怎么设置密码 夸克文件夹加密的方法
    夸克网盘怎么设置密码 夸克文件夹加密的方法
    1年前 2579
    抖音随拍标签是什么意思？属于什么标签？-小四运营
    抖音随拍标签是什么意思？属于什么标签？
    抖音随拍标签是什么意思？属于什么标签？
    1年前 2347
    评论 抢沙发

    请登录后发表评论

      暂无评论内容