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

news2024/10/5 18:31:46

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.coloradmin.cn/o/1850132.html

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

相关文章

经典机器学习方法(7)—— 卷积神经网络CNN

参考&#xff1a;《动手学深度学习》第六章 卷积神经网络&#xff08;convolutional neural network&#xff0c;CNN&#xff09;是一类针对图像数据设计的神经网络&#xff0c;它充分利用了图像数据的特点&#xff0c;具有适合图像特征提取的归纳偏置&#xff0c;因而在图像相…

Unity核心

回顾 Unity核心学习的主要内容 项目展示 基础知识 认识模型制作流程 2D相关 图片导入设置相关 图片导入概述 参数设置——纹理类型 参数设置——纹理形状 参数设置——高级设置 参数设置——平铺拉伸 参数设置——平台设置&#xff08;非常重要&#xff09; Sprite Sprite Edit…

一个cmake版的C++项目代码模板,包含流水线、git以及代码格式化配置等支持CICD发布流程

本文给出快速构建C项目的代码仓库模板 &#xff0c;简单却完整 主要包括&#xff1a; 编译脚本 打包上传脚本- 依赖拉取 代码格式化配置 git配置 流水线pipeline配置 使用这个模板 你只需要&#xff1a;将源文件放到模块目录下&#xff0c;并添加到cmake中即可 一、简…

今日头条屏幕适配深度剖析

基本概念 首先几个基本概念解释&#xff1a; ● dpi&#xff1a;该值代表的是一英寸上有多少个像素点&#xff0c;常见取值为120&#xff0c;160&#xff0c;240。一般这个值才叫做密度 在android里面获取的方法为 metrics.densityDpi; 屏幕尺寸/分辨率得出DPI&#xff0c;一个…

Spring Boot集成vaadin快速入门demo

1.什么是vaadin&#xff1f; Vaadin 是用于构建单页 Web 应用的流行 Java 框架。 它由一家专门从事富 Internet 应用设计和开发的芬兰公司开发。 估计有 15 万开发者使用 Vaadin。 它的开发始于 2002 年。 Vaadin 框架特性 以下是 Vaadin 特性的列表&#xff1a; 这是一个 J…

这周,接连两位程序员猝死...

这周接连发生了两起不幸的事。俩位程序员去世的消息&#xff0c;深感悲伤和惋惜。 6月17号下午&#xff0c;一位负责研发的女员工在虾皮研发中心办公室猝死&#xff0c;年仅 30 岁。 官方通告&#xff1a; 同一天&#xff0c;另一位科大讯飞的高级测试工程师在家突发不适离世…

修改文件的权限(linux篇)

1.在yl用户下创建一个demo.txt文件 [rootlocalhost ~]# su yl [yllocalhost root]$ cd [yllocalhost ~]$ cd Desktop/ [yllocalhost Desktop]$ ls [yllocalhost Desktop]$ vim demo.txt 填入一些信息进行保存 2.查看文件信息以及所对应的组 [yllocalhost Desktop]$ ll 总用量…

一颗B+树可以存储多少数据?

一、前言 这个问题&#xff0c;非常经典&#xff0c;考察的点很多&#xff1a; 比如&#xff1a; 1、操作系统存储的单元&#xff0c;毕竟mysql也是运行在操作系统之上的应用。 2、B树是针对Mysql的InnoDB存储引擎&#xff0c;所以要理解InnoDb的最小存储单元&#xff0c;页&…

解两道四年级奥数题(等差数列)玩玩

1、1&#xff5e;200这200个连续自然数的全部数字之和是________。 2、2&#xff0c;4&#xff0c;6&#xff0c;……&#xff0c;2008这些偶数的所有各位数字之和是________。 这两道题算易错吧&#xff0c;这里求数字之和&#xff0c;比如124这个数的全部数字之和是1247。 …

【yolov8语义分割】跑通:下载yolov8+预测图片+预测视频

1、下载yolov8到autodl上 git clone https://github.com/ultralytics/ultralytics 下载到Yolov8文件夹下面 另外&#xff1a;现在yolov8支持像包一样导入&#xff0c;pip install就可以 2、yolov8 语义分割文档 看官方文档&#xff1a;主页 -Ultralytics YOLO 文档 还能切…

使用 DISPATCHERS 进行 Blueprint 之间的通信

文章目录 初始准备DISPATCHERS 的创建和绑定实现效果 初始准备 首先 UE5 默认是不提供 静态网格体编辑器也就是 Modeling Mode 的&#xff0c;这里需要从插件中添加 Modeling Tools Editor Mode 进入 Modeling Mode 模式&#xff0c;创建一个正方体 然后利用 PolyGroup Edit 和…

告别手抖尴尬!教你轻松缓解手部震颤的小秘诀!

在我们的日常生活中&#xff0c;手抖这个现象可能并不罕见。不论是因为紧张、疲劳还是某些健康问题&#xff0c;手抖都会给我们的生活带来诸多不便。今天&#xff0c;就让我们一起探讨如何缓解手部震颤&#xff0c;让你告别手抖的尴尬&#xff01; 一、手抖的成因及影响 手抖&…

定点计算与浮点计算在MCU上的较量:以电机控制系统算法实现为例

在嵌入式系统尤其是电机控制算法的实现过程中&#xff0c;定点计算与浮点计算的选取始终是一个重要议题。电机控制系统对实时性和计算效率有着极高要求&#xff0c;而MCU&#xff08;微控制器&#xff09;作为其核心处理器&#xff0c;其计算模式的选择直接影响整个系统的性能。…

pycharm中的使用技巧

1、更改主题&#xff1a;找到设置&#xff0c;然后更改主题 点击选择自己喜欢的主题&#xff0c;然后就可以更改主题了 2、设置字体的快捷键 找到设置&#xff0c;如下&#xff1a; 找到increase&#xff0c;如下&#xff1a; 右键选择&#xff0c;增加字体快捷键 按住ctrl滑轮…

压缩包文件密码破解软件 Ziperello 下载及使用教程

使用 Ziperello https://qweree.cn/index.php/416/ 对加了密码的压缩包进行密码破解&#xff0c;教程如下&#xff1a; 第一步&#xff0c;双击运行 Ziperello双击我打开程序.exe&#xff0c;如下图&#xff1a; 第二步&#xff0c;打开一个加了密的 ZIP 压缩包&#xff0c;再…

LCR 142.训练计划IV

1.题目要求: /*** Definition for singly-linked list.* struct ListNode {* int val;* struct ListNode *next;* };*/ int compare(const void* a,const void* b) {return (*(int*)a - *(int*)b); } struct ListNode* trainningPlan(struct ListNode* l1, struct Li…

Linux驱动开发笔记(十三)Sysfs文件系统

文章目录 前言一、Sysfs1.1 Sysfs的引入1.2 Sysfs的目录结构1.2 Sysfs的目录详解1.2.1 devices1.2.2 bus1.2.3 class1.2.4 devices、bus、class目录之间的关系1.2.5 其他子目录 二、Sysfs使用2.1 核心数据结构2.2 相关函数2.2.1 kobject_create_and_add2.2.2 kobject_put()2.2.…

转让5000万内资融资租赁公司变更需要的条件和变更时间

我们现在有一家陕西的融资租赁公司公司是非常干净的非常适合接手后直接开展业务如果北京的不能够变更了我们这边还有渠道可以变更现在能做的越来越少了&#xff0c;详情流程致电咨询或者来我们公司面谈。 现成融资租赁公司转让&#xff1a; 1、公司名称&#xff1a;陕西xxX融资…

【龙晰 离线安装openssl-devel】openssl-devel rpm 离线安装 需要下载哪些安rpm 包

进入龙晰镜像源地址下载 http://mirrors.openanolis.cn/anolis/8/BaseOS/x86_64/os/Packages/(base) [rootAI lib64]# yum install openssl-devel Last metadata expiration check: 14:03:32 ago on Fri 21 Jun 2024 07:26:56 AM CST. Dependencies resolved. Package …

Linux扩展lvm分区实践 -- 使用其他磁盘的空间

如图&#xff0c;根分区900G&#xff0c;计划将另一块磁盘sdb分出1T来给根分区 步骤 1&#xff1a;创建新的分区 sudo fdisk /dev/sdb输入 n 创建一个新分区 然后选择分区类型&#xff0c;输入p 设置起始扇区&#xff08;默认&#xff09;&#xff0c;然后设置分区大小&…