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百科

本文来自互联网用户投稿,该文观点仅代表作者本人,不代表本站立场。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如若转载,请注明出处:http://www.mzph.cn/diannao/32109.shtml

如若内容造成侵权/违法违规/事实不符,请联系多彩编程网进行投诉反馈email:809451989@qq.com,一经查实,立即删除!

相关文章

氢氧化铝佐剂,完美替代进口品牌明矾佐剂

氢氧化铝佐剂 氢氧化铝佐剂是使用历史最为悠久的疫苗佐剂&#xff0c;已有近百年历史&#xff0c;广泛用于各种人用疫苗和兽用疫苗。氢氧化铝佐剂能够极大地促进体液免疫&#xff08;抗体&#xff09;反应和TH2类细胞免疫反应。 用途 1、免疫各种实验动物制备多克隆或单克隆抗…

数据挖掘与分析——特征选择

数据读取 wine葡萄酒数据集是来自UCI的公开数据集&#xff0c;也scikit-learn库自带的数据集&#xff0c;它是对意大利同一地区种植的葡萄酒进行化学分析的结果&#xff0c;这些葡萄酒来自三个不同的品种。该分析确定了三种葡萄酒中每种葡萄酒中含有的13种成分的数量。 每行代…

【Java面试】二十、JVM篇(上):JVM结构

文章目录 1、JVM2、程序计数器3、堆4、栈4.1 垃圾回收是否涉及栈内存4.2 栈内存分配越大越好吗4.3 方法内的局部变量是否线程安全吗4.4 栈内存溢出的情况4.5 堆和栈的区别是什么 5、方法区5.1 常量池5.2 运行时常量池 6、直接内存 1、JVM Java源码编译成class字节码后&#xf…

Open3D点云处理学习

Color ICP Colored point cloud registration — Open3D 0.11.0 documentation Colored point cloud registration - Open3D 0.18.0 documentation 展示了使用color-icp结果 对比gicp错误处理结果 intel自己的论文 Colored Point Cloud Registration Revisited 优化方程 参…

临时关闭Windows安全中心

在使用WindowsOS是&#xff0c;微软安全中心是我们必不可少的安全防护&#xff0c;但有时我们也会产生想要将其关闭的需求&#xff0c;下面将要介绍如何临时关闭Windows的安全中心 一、打开安全中心、选择“病毒与威胁防护”&#xff0c;点击“管理设置” 之后将其实时保护关闭…

PPT的精细化优化与提升策略

&#x1f44f;&#x1f44f;&#x1f44f;欢迎来到我的博客 ! 亲爱的朋友们&#xff0c;欢迎您们莅临我的博客&#xff01;这是一个分享知识、交流想法、记录生活的温馨角落。在这里&#xff0c;您可以找到我对世界独特视角的诠释&#xff0c;也可以与我一起探讨各种话题&#…

轻量级日志系统——Loki

目录 一、loki简介 二、Loki 快速上手 第一步安装 Loki 第二步安装 Promtail 第三步安装granafa 三、LogQL 语法 四、Loki收集nginx日志 1、修改nginx配置 2、nginx服务器上安装promtail 3、添加doshbarod 一、loki简介 Loki是 Grafana Labs 团队最新的开源项目&am…

【Springcloud微服务】Docker上篇

&#x1f525; 本文由 程序喵正在路上 原创&#xff0c;CSDN首发&#xff01; &#x1f496; 系列专栏&#xff1a;Springcloud微服务 &#x1f320; 首发时间&#xff1a;2024年6月22日 &#x1f98b; 欢迎关注&#x1f5b1;点赞&#x1f44d;收藏&#x1f31f;留言&#x1f4…

新闻管理与推荐系统Python+Django+协同过滤推荐算法+管理系统

一、介绍 新闻管理与推荐系统。本系统使用Python作为主要开发语言开发的一个新闻管理与推荐的网站平台。 网站前端界面采用HTML、CSS、BootStrap等技术搭建界面。后端采用Django框架处理用户的逻辑请求&#xff0c;并将用户的相关行为数据保存在数据库中。通过Ajax技术实现前后…

【ARMv8/v9 GIC 系列 2.2 -- GIC SPI 中断的 GICD_ISACTIVER 和 GICD_ICACTIVER 配置】

文章目录 GIC 中断 Active 状态的配置中断状态分类GICD_ISACTIVER<n>GICD_ICACTIVER<n>参数 n 编号解释中断设置举例设置中断ID 68为活动状态清除中断ID 68的活动状态 小结 GIC 中断 Active 状态的配置 在ARMv8/ARMv9 体系结构中&#xff0c;GICD_ISACTIVER<n&…

2021数学建模C题目– 生产企业原材料的订购与运输

C 题——生产企业原材料的订购与运输 思路&#xff1a;该题主要是通过对供应商的供货能力和运送商的运货能力进行估计&#xff0c;给出合适的材料订购方案 程序获取 第一题问题思路与结果&#xff1a; 对 402 家供应商的供货特征进行量化分析&#xff0c;建立反映保障企业生…

jeecg-boot项目的部署-windows系统

一、基础环境的准备&#xff1a; 1、后台基础环境&#xff1a;JDK、redis、数据库&#xff1a;sqlserver 2、前端基础环境&#xff1a;nginx redis和nginx的安装都很方便&#xff0c;直接去对应的官网&#xff0c;下载zip压缩包&#xff0c;然后解压&#xff0c;执行.exe文件…

一、docker简介及卸载、安装

目录 一、Docker 简介 二、dockers三要素 1、Docker镜像&#xff08;image&#xff09; 2、Docker仓库 3、Docker容器 三、docker架构图 四. Docker 运行的基本流程 五、docker 卸载 1、停止docker服务 2、查看yum安装的docker文件包 3、查看docker相关的rpm源文件 …

【Pandas驯化-11】一文搞懂Pandas中的分组函数groupby与qcut、fillna使用

【Pandas驯化-11】一文搞懂Pandas中的分组函数groupby与qcut、fillna使用 本次修炼方法请往下查看 &#x1f308; 欢迎莅临我的个人主页 &#x1f448;这里是我工作、学习、实践 IT领域、真诚分享 踩坑集合&#xff0c;智慧小天地&#xff01; &#x1f387; 相关内容文档获…

基于STM32的智能工厂环境监测系统

目录 引言环境准备智能工厂环境监测系统基础代码实现&#xff1a;实现智能工厂环境监测系统 4.1 数据采集模块4.2 数据处理4.3 控制系统实现4.4 用户界面与数据可视化应用场景&#xff1a;智能工厂管理与优化问题解决方案与优化收尾与总结 1. 引言 智能工厂环境监测系统通过…

数据库系统概论——数据库恢复技术

文章目录 数据库恢复技术事务的基本概念什么是事务如何定义事务&#xff1a;事务的特性 数据库恢复概述故障的种类恢复的实现技术恢复策略事务故障的恢复系统故障的恢复介质故障的恢复 数据库恢复技术 事务的基本概念 什么是事务 事务使用户定义的一个数据库操作序列&#x…

kotlin类

一、定义 1、kotlin中使用关键字class 声明类,如果一个类没有类体&#xff0c;也可以省略花括号&#xff0c; 默认为public 类型的&#xff1a; // 这段代码定义了一个公开的、不可被继承的Test类 class Test{} // 没有类体&#xff0c;可以省略花括号 class Test 底层代码&…

2024最新IDEA插件开发+发布全流程 SelectCamelWords[选中驼峰单词](idea源代码)

2024最新IDEA插件开发&#xff08;发布&#xff09;-SelectCamelWords[选中驼峰单词]&#xff08;idea源代码&#xff09; 参考文档 Jetbrains Idea插件开发文档: https://plugins.jetbrains.com/docs/intellij/welcome.html代码地址&#xff1a;https://github.com/yangfeng…

Mybatis框架的缓存

Mybatis框架的缓存 一.为什么使用缓存 缓存(cache&#xff09;的作用是为了减去数据库的压力&#xff0c;提高查询性能。缓存实现的 原理是从数据库中查询出来的对象在使用完后不要销毁&#xff0c;而是存储在内存&#xff08;缓存&#xff09; 中&#xff0c;当再次需要获取…

windows-docker-本地部署-前端

前置条件 docker已有需要打包的文件也已经写好了 打包镜像 ip地址修改 需要根据自身修改的文件 .env.local文件存放你前端访问的端口 172.24.240.1:这部分是自己电脑的ip 如何查看本机ip&#xff0c;使用IPV4的地址。 #本地 #API_HOST_URLhttp://172.24.240.1:8091打包文…