首页 > 其他分享 >YIA主题侧边栏如何添加3D旋转标签云?

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

时间:2024-06-21 16:28:37浏览次数:24  
标签:tagcloud YIA 标签 侧边 background 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百科

标签:tagcloud,YIA,标签,侧边,background,3D
From: https://blog.csdn.net/boke112/article/details/139864318

相关文章

  • cesium中如何高性能渲染3D模型(附水淹分析模拟)
    大家好,我是日拱一卒的攻城师不浪,专注可视化、数字孪生、前端、nodejs、AI学习、GIS等学习沉淀,这是2024年输出的第18/100篇文章;前言之前在参加城市应急数字孪生项目开发过程中,遇到一个场景,就是模拟水淹分析。也就是说,甲方需要根据你这个平台,在下暴雨的时候,精准监测到城......
  • 【名词解释】Unity中的3D物理系统:触发器
    在Unity的3D物理系统中,触发器(Trigger)是一种特殊的碰撞体,用于检测物体进入或离开一个特定区域的事件,但它不会像普通碰撞体那样产生物理碰撞反应。触发器通常用于实现非物理交互,如检测玩家进入特定区域、开启门、触发事件等。名词解释:Trigger:一种特殊的碰撞体,用于检测物体的进......
  • 3dmax怎么渲染又快又清晰?
    在3dsMax中,追求快速且清晰的渲染效果是每个设计师的目标。云渲染技术的出现,为这一目标提供了强大的支持。通过云渲染,设计师能够利用远程服务器的强大计算能力,实现快速渲染,同时保持图像的高清晰度。一、3dmax怎么渲染清晰第一步:打开渲染设置点击公用部分,输出图片大小,网上......
  • 如何应用 matrix3d 映射变幻
    如何应用matrix3d映射变幻先上demo记得是在2015看到过的一个html5演示效果,很惊艳当时没明白如何实现,现在我会了,做一个类似的:又弄了一个拖动的demo我数学真的很差“你好老师!学这个矩阵具体有什么用?”老师喝着水貌似想了一会儿回答:“考试用”..这个问题我真问过......
  • WPF绘制3D小demo
    试过了WPF原生3D和HelixToolkit.Wpf,感觉还是SharpDX的效果比较好,所以使用了HelixToolkit.Wpf.SharpDX初学,仅供参考,没搞懂怎么双面渲染,所以每个面用了2个三角形分别显示正面和反面 <Grid><hx:Viewport3DXEnableSwapChainRendering="True"FXAALevel="Low"Backg......
  • 硬件开发笔记(二十):AD21导入外部下载的元器件原理图库、封装库和3D模型
    前言  在硬件设计的过程中,会遇到一些元器件,这些元器件在本地已有的库里面没有,但是可以从外部下载或者获取到对应的。  本篇就是引入TPS54331D电源芯片作为示例,详细描述整个过程。 创建TPS54331D步骤一:下载TPS54331D模型  云汉芯城  注意:无需注册登录,搜索到......
  • 3dmax怎么渲染又快又清晰?
    在3dsMax中,追求快速且清晰的渲染效果是每个设计师的目标。云渲染技术的出现,为这一目标提供了强大的支持。通过云渲染,设计师能够利用远程服务器的强大计算能力,实现快速渲染,同时保持图像的高清晰度。一、3dmax怎么渲染清晰第一步:打开渲染设置点击公用部分,输出图片大小,网上用的3......
  • 3dgs
    %cd/content!gitclone--recursivehttps://github.com/Anonytt/gs.git!pipinstall-qplyfile%cd/content/gs!pipinstall-q/content/gs/submodules/diff-gaussian-rasterization!pipinstall-q/content/gs/submodules/simple-knn#!wgethttps://huggingface......
  • Unity3D 八叉树划分空间和可视化
    也许更好的阅读体验成果展示代码OctreeNodeusingSystem.Collections;usingSystem.Collections.Generic;usingUnityEngine;publicclassOctreeNode{//空间内包含的物体publicList<GameObject>areaObjects;//空间中心publicVector3center;......
  • bresenham_3d绘制3维直线,可设置直线粗细
    1importmatplotlib.pyplotasplt2frommpl_toolkits.mplot3dimportAxes3D3importnumpyasnp4importnibabelasnib56defbresenham_3d(p0,p1,thickness):7'''8Bresenham'sLineAlgorithmin3Dwithad......