当前位置: 首页 > news >正文

YIA主题侧边栏如何添加3D旋转标签云?

WordPress站点侧边栏默认的标签云排版很一般,而3D旋转标签云就比较酷炫了。下面boke112百科就以YIA主题为例,跟大家说一说如何将默认的标签云修改成3D旋转标签云,具体步骤如下:

1、点此下载3d标签云文件(密码:2917),解压后将3d.js文件上传到/wp-content/themes/yia/assets/js/文件夹内。

2、编辑YIA主题的footer.php文件,在</body>之前添加以下代码:

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

3、将以下CSS代码添加到YIA主题的style.css文件最后,或添加到YIA主题设置“自定义代码”的“CSS代码”中。

.tagcloud {
position:relative;
height:240px;
margin: 10px auto 0;
}
.tagcloud a {
position:absolute;
color: #fff;
text-align: center;
text-overflow: ellipsis;
whitewhite-space: nowrap;
top:0px;
left:0px;
padding: 3px 5px;
border: none;
}
.tagcloud a:hover {
background: #d02f53;
display: block;
}
.tagcloud a:nth-child(n) {
background: #666;
border-radius: 3px;
display: inline–block;
line-height: 18px;
margin: 0 10px 15px 0;
}
.tagcloud a:nth-child(2n) {
background: #d1a601;
}
.tagcloud a:nth-child(3n) {
background: #286c4a;
}
.tagcloud a:nth-child(5n) {
background: #518ab2;
}
.tagcloud a:nth-child(4n) {
background: #c91d13;
}

4、进入WordPress后台 >> 外观 >> 小工具 >> 添加“标签云”到相应的侧边栏中,比如首页侧边栏。

YIA主题侧边栏如何添加3D旋转标签云?-第1张-boke112百科(boke112.com)

此时,我们可以看到前端侧边栏的“标签”已经变成了3D标签云了。具体效果如下图所示:

YIA主题侧边栏如何添加3D旋转标签云?-第2张-boke112百科(boke112.com)

因为示例中标签数量比较少,所以看起来没有那么好看。也就是说如果你的WordPress网站标签比较少的话,不建议折腾3D标签云。

另外,如果你使用的是其他WordPress主题,那么操作方法类似,只不过需要修改3d.js和CSS代码中的tagcloud为相应小工具对应的class值。

来源:YIA主题侧边栏如何添加3D旋转标签云? - boke112百科

相关文章:

  • Spring Boot与Istio服务网格的整合实践
  • Spring Boot集成Minio插件快速入门
  • 「五度易链」企业大数据API接口开放平台上线啦!
  • EE trade:炒伦敦金的注意事项及交易指南
  • 1962springboot VUE社区服务平台系统开发mysql数据库web结构java编程计算机网页源码maven项目
  • VScode创建ROS项目 ROS集成开发环境
  • 【数学】Leetcode 69. x 的平方根【简单】
  • Linux源码阅读笔记04-实时调度类及SMP和NUMA
  • 跟《经济学人》学英文:2024年6月15日这期 The war for AI talent is heating up
  • AI与音乐:创新之光还是毁灭之剑?
  • 微型操作系统内核源码详解系列五(四):cm3下svc启动任务
  • 天马学航——智慧教务系统(移动端)开发日志三
  • 用友U9-UBF自定义报表-打印模板开发学习笔记
  • SpringBoot测试实践
  • Spark SQL 血缘解析方案
  • Angular2开发踩坑系列-生产环境编译
  • Angular数据绑定机制
  • Babel配置的不完全指南
  • CentOS从零开始部署Nodejs项目
  • docker python 配置
  • Docker容器管理
  • ES2017异步函数现已正式可用
  • fetch 从初识到应用
  • HTML中设置input等文本框为不可操作
  • IP路由与转发
  • miniui datagrid 的客户端分页解决方案 - CS结合
  • RxJS 实现摩斯密码(Morse) 【内附脑图】
  • TCP拥塞控制
  • 七牛云假注销小指南
  • 如何用vue打造一个移动端音乐播放器
  • 如何抓住下一波零售风口?看RPA玩转零售自动化
  • 小而合理的前端理论:rscss和rsjs
  • 中国人寿如何基于容器搭建金融PaaS云平台
  • 阿里云API、SDK和CLI应用实践方案
  • ​Java并发新构件之Exchanger
  • ​浅谈 Linux 中的 core dump 分析方法
  • # 透过事物看本质的能力怎么培养?
  • #1014 : Trie树
  • (8)STL算法之替换
  • (AtCoder Beginner Contest 340) -- F - S = 1 -- 题解
  • (CVPRW,2024)可学习的提示:遥感领域小样本语义分割
  • (ISPRS,2023)深度语义-视觉对齐用于zero-shot遥感图像场景分类
  • (定时器/计数器)中断系统(详解与使用)
  • (二十五)admin-boot项目之集成消息队列Rabbitmq
  • (免费领源码)python+django+mysql线上兼职平台系统83320-计算机毕业设计项目选题推荐
  • (十三)Flink SQL
  • (使用vite搭建vue3项目(vite + vue3 + vue router + pinia + element plus))
  • (译) 函数式 JS #1:简介
  • (原创)可支持最大高度的NestedScrollView
  • (转)ObjectiveC 深浅拷贝学习
  • (转)Oracle存储过程编写经验和优化措施
  • (转)Spring4.2.5+Hibernate4.3.11+Struts1.3.8集成方案一
  • (转载)CentOS查看系统信息|CentOS查看命令
  • .dwp和.webpart的区别
  • .gitignore文件_Git:.gitignore