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

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

如若内容造成侵权/违法违规/事实不符,请联系我们进行投诉反馈qq邮箱809451989@qq.com,一经查实,立即删除!

相关文章

开源项目推荐-vue2+element+axios 个人财务管理系统

文章目录 financialmanagement项目简介项目特色项目预览卫星的实现方式&#xff1a;首次进入卫星效果的实现方式&#xff1a;卫星跟随鼠标滑动的随机效果实现方式&#xff1a;环境准备项目启动项目部署项目地址 financialmanagement 项目简介 vue2elementaxios 个人财务管理系…

java学习--集合(大写二.2)

看尚硅谷视频做的笔记 2.collection接口及方法 jdk8里有一些默认的方法&#xff0c;更多的是体现的是一种规范&#xff0c;规范更多关注的是一些抽象方法。 看接口里面的抽象方法&#xff0c;选一个具体的实现类。 测试collection的方法&#xff0c;存储一个一个数据都有哪些…

记录:[android] SSLHandshakeException: Handshake failed 问题;已解决!

1、问题描述&#xff1a;在使用Retrofit2 时在安卓老设备上&#xff08;安卓6.0&#xff09;网络无法请求、安卓 10 、 11 未出现此问题&#xff1f;what? 原因&#xff1a;服务端 TLS 版本过高 2、废话不多说、解决方案A 、添加依赖&#xff1a;implementation org.conscrypt…

安徽理工大学2计算机考研情况,招收计算机专业的学院和联培都不少!

安徽理工大学&#xff08;Anhui University of Science and Technology&#xff09;&#xff0c;位于淮南市&#xff0c;是安徽省和应急管理部共建高校&#xff0c;安徽省高等教育振兴计划“地方特色高水平大学”建设高校&#xff0c;安徽省高峰学科建设计划特别支持高校&#…

Java面试八股之myBatis与myBatis plus的对比

myBatis与myBatis plus的对比 基础与增强&#xff1a; MyBatis 是一个成熟的Java持久层框架&#xff0c;它允许开发者通过XML文件或注解来配置SQL语句和数据库映射&#xff0c;提供了一个灵活的方式来操作数据库&#xff0c;但需要手动编写所有的SQL语句和结果集映射。 MyBa…

oracle 外连接(+)和left join用法

案例1&#xff1a; select count(1) FROM TFUNDINFO A, TFUNDTYPE B WHERE A.VC_FUNDCODEB.VC_FUNDCODE() select count(1) FROM TFUNDINFO A, TFUNDTYPE B WHERE A.VC_FUNDCODEB.VC_FUNDCODE SELECT count(1): 这表示查询将返回一个计数&#xff0c;count(1)是一种常见的计数…

适用于 AI/ML 工作负载的有状态 KES

在此概念验证 &#xff08;POC&#xff09; 中&#xff0c;我们将探讨在 Kubernetes &#xff08;k8s&#xff09; 生态系统中安装和管理有状态密钥加密服务 &#xff08;KES&#xff09;。本指南促进了加密操作的无缝衔接&#xff0c;而不会将敏感的密钥材料暴露给使用型应用程…

Window和linux杀死进程的方式(命令行版)

在本文中&#xff0c;我们将探讨如何在Windows和Linux操作系统下高效地终止指定的进程&#xff0c;涵盖基本命令与高级技巧&#xff0c;确保您能灵活应对各种管理需求。 linux杀死进程 在终端中&#xff0c;我们通过下面命令找到端口运行的程序 lsof -i:72812. 然后输入下面…

见证数据的视觉奇迹——DataV Atlas

引言 前段时间一直沉迷于AI方向&#xff0c;几乎很久没碰大数据开发的相关内容了&#xff0c;今天突然看到阿里活动又推出DataV的体验了&#xff0c;我直接“啪”的一下就点进来了&#xff0c;很快啊&#xff01;本来之前开发数字孪生的时候就接触过基础的DataV操作了&#x…

北京BJ90升级新款迈巴赫大连屏四座头等舱行政四座马鞍

北京BJ90升级奔驰迈巴赫头等舱行政四座大联屏的内饰效果会非常出色&#xff0c;将为车辆带来更豪华、高端的内饰氛围。以下是升级后可能的效果&#xff1a; • 科技感提升&#xff1a;奔驰的中控系统一直以来都以其先进的科技和用户友好的界面而闻名。升级后&#xff0c;北京B…

Retrieval-Augmented Generation for Large Language Models A Survey

Retrieval-Augmented Generation for Large Language Models: A Survey 文献综述 文章目录 Retrieval-Augmented Generation for Large Language Models: A Survey 文献综述 Abstract背景介绍 RAG概述原始RAG先进RAG预检索过程后检索过程 模块化RAGModules部分Patterns部分 RAG…

TEMU自养号测评系统如何搭建,有哪些要求

TEMU全托管目前优点是全程不用去运营&#xff0c;只要做好选品&#xff0c;质检就可以了。缺点是无法自由决定产品的营销策略&#xff0c;这也是使得卖家会去通过自养号测评方式来为产品链接打造权重。 TEMU自养号测评的搭建是一个涉及多个步骤和细节的过程。以下是一个清晰的…

智能优化算法改进策略之局部搜索算子(六)--进化梯度搜索

1、原理介绍 进化梯度搜索(Evolutionary Gradient Search, EGS)[1]是兼顾进化计算与梯度搜索的一种混合算法&#xff0c;具有较强的局部搜索能力。在每次迭代过程中&#xff0c;EGS方法首先用受进化启发的形式估计梯度方向&#xff0c;然后以最陡下降的方式执行实际的迭代步骤&…

QListView、QTableView或QTreeView截取滚动区域(截长图)

本文以QTreeView为例,理论上继承自QAbstractScrollArea的类都支持本文所述的方法。 一.效果 一共5个文件夹,每个文件文件夹下有5个文件,先把文件夹展开,然后截图。将滚动条拖到居中位置,是为了证明截图对滚动条无影响 下面是截的图 二.原理 将滚动区域的viewport设置为…

lvgl_micropython development for esp32

​​​​​​上一篇博客已经编译源码生成了ESP32C3的固件lvgl_micropy_ESP32_GENERIC_C3-4.bin&#xff0c;这篇博客开发一个界面。 一、开发环境 1、安装开发工具 Windows安装Thonny工具&#xff0c;官网链接&#xff1a;Thonny, Python IDE for beginners。 参考博客:用M…

已解决javax.management.BadBinaryOpValueExpException异常的正确解决方法,亲测有效!!!

已解决javax.management.BadBinaryOpValueExpException异常的正确解决方法&#xff0c;亲测有效&#xff01;&#xff01;&#xff01; 目录 问题分析 出现问题的场景 报错原因 解决思路 解决方法 分析错误日志 检查操作数合法性 确认操作数类型匹配 优化代码逻辑 增…

如何发现Redis热Key,有哪些解决方案?

什么是 hotkey&#xff1f; 如果一个 key 的访问次数比较多且明显多于其他 key 的话&#xff0c;那这个 key 就可以看作是 hotkey&#xff08;热 Key&#xff09;。例如在 Redis 实例的每秒处理请求达到 5000 次&#xff0c;而其中某个 key 的每秒访问量就高达 2000 次&#x…

【HTTPS云证书部署】SpingBoot部署证书

这里以华为云证书为例。 1. 下载证书 2. 解压 3. 选择.top_Tomcat复制到SpringBoot的Resource/source下 4. 在.properties文件中进行配置 修改key-store和key-store-password

秋招突击——第八弹——Redis是怎么运作的

文章目录 引言正文Redis在内存中是怎么存储的面试重点 Redis是单线程还是多线程面试重点 内存满了怎么办&#xff1f;面试重点 持久化介绍面试重点 RDB持久化面试重点 AOF日志面试重点 总结 引言 差不多花了两天把redis给过了&#xff0c;早上也只背了一半&#xff0c;完成回去…

正则表达式与文本处理器

正则表达式 基础正大表达式 查看特定字符 grep grep-n the test.txt grep-in the test.txt-n 显示行号 -i 不区分大小写 -v 反转查找 [] &#xff1a;中括号里可以写元素&#xff0c;内容符合任意元素&#xff0c;就会过滤出来 ^ :写在中括号里&#xff0c;代表取反。以^开头&…