【Wordpress主题】Sakuraio主题的使用与优化
2024-06-06 14:48:42
Sakuraio主题介绍
WordPress 主题 Sakurairo，是一款相对于原版 Sakura 主题更加强大的主题。这款主题最大的亮点在于对 Sakura 主题颜色进行更加细致的自定义，增加了很多小功能并且内置了多个色调，支持一键切换主题风格。
Sakuraio主题安装
- 首先下载主题，Github地址。
- 在 Wordpress 仪表盘中依次点击 “外观→主题→安装主题”，将主题包上传到服务器。
- 在主题界面启用Sakuraio即可。
- 设置主题，可参考Sakurairo 主题周边网站，上面有详细的设置项说明及教程。
Sakuraio主题优化
1. 更换 Live2D 模型
Sakurairo 主题设置的 “全局设置→额外设置” 中自带 Live2D 模型功能，但是需要提前在 Github 中发布，然后在设置里填写 Github 信息和要使用的版本信息。除此之外，Sakurairo 还支持在页尾添加用户自己的 HTML 代码，也可用于添加 JavaScript。这里我们使用页尾附加代码的方式为网站添加嘉然的 Live2D 模型，在 “全局设置→页尾选项→页尾附加代码” 中输入如下代码并保存。
<script src="https://cdn.jsdelivr.net/npm/greensock@1.20.2/dist/TweenLite.js"></script>
<script src="https://cubism.live2d.com/sdk-web/cubismcore/live2dcubismcore.min.js"></script>
<script src="https://cdn.jsdelivr.net/npm/pixi.js@5.3.6/dist/pixi.min.js"></script>
<script src="https://cdn.jsdelivr.net/npm/pixi-live2d-display@0.3.1/dist/cubism4.min.js"></script>
<link href="https://cdn.jsdelivr.net/gh/journey-ad/blog-img@76ba2b3/live2d/lib/pio.css" rel="stylesheet" type="text/css"/>
<script src="https://cdn.jsdelivr.net/gh/journey-ad/blog-img@76ba2b3/live2d/lib/pio.js"></script>
<script src="https://cdn.jsdelivr.net/gh/journey-ad/blog-img@76ba2b3/live2d/lib/pio_sdk4.js"></script>
<script src="https://cdn.jsdelivr.net/gh/journey-ad/blog-img@76ba2b3/live2d/lib/load.js"></script>
保存设置，返回主页就可以发现嘉然出现在页面左下角了。
由于没有限制高度，在我的主页上占了近2/3的高度，因此我们还需要设置一下模型尺寸，这一步通过修改pio.css文件实现。在该文件中添加如下代码：
#pio {height: 240px;vertical-align: middle
}
修改后的pio.css文件全部内容如下：
.pio-container {bottom: 0;z-index: 52;color: #666;position: fixed;user-select: none;
}.pio-container .pio-show {left: -1.2em;bottom: -0.2em;width: 6em;height: 6.8em;display: none;cursor: pointer;position: absolute;transition: all .3s;background: url(avatar.png) center/contain;opacity: 0.7;
}.pio-container.hidden .pio-show {display: block;
}.pio-container.hidden .pio-show:hover {opacity: 0.9;transform: translateX(.5em);
}.pio-container.hidden #pio {display: none;
}.pio-container.hidden .pio-dialog {display: none;
}.pio-container.left {left: 0
}.pio-container.right {right: 0
}.pio-container.active {cursor: move
}.pio-container.static {pointer-events: none
}.pio-container .pio-action {top: 3em;opacity: 0;position: absolute;transition: opacity .3s;
}.pio-container.left .pio-action {right: 0
}.pio-container.right .pio-action {left: 0
}.pio-container:hover .pio-action {opacity: 1
}.pio-action span {color: #fff;width: 2em;height: 2em;margin-bottom: 0.6em;display: block;cursor: pointer;text-align: center;margin-bottom: .5em;background-size: 100%;
}.pio-action .pio-home {background-image: url("data:image/svg+xml,%3Csvg viewBox='0 0 500 500' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M472.86 249.918V361.57c-.024 61.53-49.899 111.404-111.431 111.43h-222.86c-61.529-.026-111.403-49.9-111.428-111.43V249.918a111.828 111.828 0 0 1 35.658-81.79L189.383 50.904c34.128-31.872 87.109-31.872 121.234 0l126.585 117.224a111.825 111.825 0 0 1 35.658 81.79z' fill='%23c3cbd3'/%3E%3Cpath d='M327.334 317.02c-.062 9.206-7.511 16.653-16.717 16.715H189.383c-12.867 0-20.908-13.93-14.475-25.073a16.718 16.718 0 0 1 14.475-8.357h121.234c9.239-.011 16.729 7.478 16.717 16.715z' fill='%23202020'/%3E%3C/svg%3E");
}.pio-action .pio-close {background-image: url("data:image/svg+xml,%3Csvg viewBox='0 0 500 500' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M249.999 198.668L352.665 96c14.667-14.666 36.668-14.666 51.335 0 14.666 14.667 14.666 36.668 0 51.334L301.333 250 404 352.668c14.666 14.667 14.666 36.666 0 51.332-14.667 14.667-36.667 14.667-51.334 0L249.999 301.334 147.333 404c-14.668 14.667-36.666 14.667-51.334 0-14.666-14.666-14.666-36.665 0-51.332L198.666 250 95.999 147.334c-14.666-14.666-14.666-36.667 0-51.334 14.668-14.666 36.665-14.666 51.333 0l102.667 102.668z' fill='%23873a18'/%3E%3C/svg%3E");
}.pio-action .pio-skin {background-image: url("data:image/svg+xml,%3Csvg viewBox='0 0 500 500' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M5 249.999C5 385.312 114.688 495 250.001 495 385.312 495 495 385.312 495 249.999 495 114.688 385.312 5 250.001 5 114.688 5 5 114.688 5 249.999z' fill='%23FEC43C'/%3E%3Cpath d='M490.1 200.509C467.071 88.789 368.58 5 250.001 5 114.76 5 5 114.76 5 249.999 5 309.29 26.07 363.19 60.86 405.33c41.65 23.03 89.18 35.77 140.14 35.77 144.06 0 263.621-103.88 289.1-240.591z' fill='%23FFD73A'/%3E%3Cpath d='M116.712 225.3c0 34.539 37.39 56.125 67.301 38.856a44.868 44.868 0 0 0 22.433-38.856c0-24.779-20.089-44.866-44.87-44.866-24.778 0-44.864 20.087-44.864 44.866zm219.346 0c0 24.779 20.087 44.866 44.867 44.866 24.778 0 44.864-20.091 44.864-44.866 0-24.779-20.09-44.864-44.866-44.864-24.778 0-44.865 20.085-44.865 44.864z' fill='%23873A18'/%3E%3Cpath d='M271.251 334.973H201.46c-8.474 0-14.956-6.482-14.956-14.956 0-8.477 6.482-14.957 14.956-14.957h69.791c8.476 0 14.957 6.483 14.957 14.957s-6.484 14.956-14.957 14.956zM158.59 210.343H79.818c-6.979 0-12.962-6.482-12.962-14.957 0-8.473 5.982-14.95 12.966-14.95h78.763c6.975 0 12.962 6.478 12.962 14.95 0 8.478-5.987 14.957-12.966 14.957zm217.348 0h-74.775c-8.477 0-14.956-6.482-14.956-14.957 0-8.473 6.484-14.95 14.956-14.95h74.774c8.478 0 14.956 6.478 14.956 14.95 0 8.478-6.482 14.957-14.956 14.957z' fill='%23873A18'/%3E%3Cpath d='M54 161.799c-26.95 0-49-22.05-49-48.999C5 68.699 54 5 54 5s48.999 63.699 48.999 107.8c0 26.949-22.049 48.999-48.999 48.999z' fill='%2361A3E0'/%3E%3C/svg%3E");
}.pio-action .pio-info {background-image: url("data:image/svg+xml,%3Csvg viewBox='0 0 500 500' xmlns='http://www.w3.org/2000/svg'%3E%3Crect transform='rotate(45.001 238.211 363.575)' x='29.285' y='22.411' width='273.903' height='505.038' rx='70' ry='70' fill='%23dcdcdc'/%3E%3Cpath d='M218.543 249.999l-47.186 47.186c-8.987 8.988-8.987 22.47 0 31.457 8.988 8.988 22.47 8.988 31.457 0L250 281.456l15.728 15.729c17.976 17.976 17.976 46.063 0 64.038l-64.037 64.038c-17.976 17.975-46.063 17.975-64.038 0l-64.038-64.038c-17.975-17.975-17.975-46.062 0-64.038l64.038-64.037c17.975-17.976 46.062-17.976 64.038 0l16.852 16.851z' fill='%23fff'/%3E%3Cpath d='M281.457 249.999l47.186-47.186c8.988-8.987 8.988-22.469 0-31.457-8.987-8.987-22.469-8.987-31.457 0L250 218.542l-15.729-15.729c-17.975-17.975-17.975-46.062 0-64.037l64.038-64.038c17.975-17.975 46.062-17.975 64.038 0l64.037 64.038c17.977 17.975 17.977 46.062 0 64.037l-64.037 64.038c-17.976 17.976-46.063 17.976-64.038 0l-16.852-16.852z' fill='%2361a3e0'/%3E%3C/svg%3E");
}.pio-action .pio-night {background-image: url("data:image/svg+xml,%3Csvg viewBox='0 0 500 500' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M186.744 40.493a15.34 15.34 0 0 1 9.956-.097 15.743 15.743 0 0 1 10.643 17.018l-.639 2.794-2.549 8.484a230.05 230.05 0 0 0 21.824 175.818c41.315 73.085 119.925 117.041 203.82 113.977l8.093-.491h2.649c11.217 1.139 18.309 12.601 14.32 23.148l-1.374 2.795-2.256 3.727-6.472 8.533a225.604 225.604 0 0 1-62.629 54.194c-107.795 63.019-245.655 25.599-307.89-83.57-62.235-109.12-25.257-248.695 82.49-311.715a219.638 219.638 0 0 1 17.755-9.319l9.022-4.07 3.286-1.226zm176.702 52.576a4.402 4.402 0 0 1 2.108 2.156l11.181 23.982c1.08 2.305 2.944 4.218 5.297 5.296l24.031 11.182c3.06 1.482 3.366 5.717.554 7.626-.176.12-.361.227-.554.32l-24.031 11.181a10.994 10.994 0 0 0-5.297 5.296l-11.181 24.031c-1.482 3.058-5.717 3.366-7.625.554a4.11 4.11 0 0 1-.32-.554l-11.23-24.031a10.998 10.998 0 0 0-5.297-5.296l-23.981-11.181c-3.06-1.482-3.367-5.717-.555-7.626.176-.12.362-.227.555-.32l24.029-11.182a10.993 10.993 0 0 0 5.249-5.296l11.23-24.031a4.412 4.412 0 0 1 5.837-2.107zm-62.825-73.812c.491.246.883.589 1.08 1.08l5.59 11.967a5.346 5.346 0 0 0 2.649 2.647l12.015 5.592c1.548.699 1.757 2.812.377 3.804-.12.084-.244.157-.377.218l-12.015 5.589a5.496 5.496 0 0 0-2.649 2.649l-5.59 11.966c-.778 1.512-2.9 1.611-3.819.182a2.694 2.694 0 0 1-.105-.182l-5.64-11.966a5.491 5.491 0 0 0-2.649-2.649l-11.966-5.64c-1.548-.699-1.757-2.814-.377-3.803.119-.085.244-.158.377-.218l11.966-5.589a5.498 5.498 0 0 0 2.649-2.65l5.591-11.965a2.205 2.205 0 0 1 2.942-1.08z' fill='%23FFCB3C'/%3E%3C/svg%3E");
}.pio-container .pio-dialog {top: -2em;opacity: 0;z-index: -1;font-size: .8em;min-width: 12em;background: #fff;padding: .75em 1em;border-radius: 1em;visibility: hidden;position: absolute;word-break: break-all;border: 1px solid #eee;transition: opacity .3s, visibility .3s;
}.pio-container .pio-dialog.active {opacity: 1;visibility: visible;
}
.pio-container.left .pio-dialog {left: 1em
}.pio-container.right .pio-dialog {right: 1em
}#pio {height: 240px;vertical-align: middle
}@media screen and (max-width: 768px) {#pio {width: 8em}.pio-container {pointer-events: none}
}
接下来将页尾附加代码中第五行中pio.css的地址替换成我们修改后文件的地址：
<link href="https://你的地址/pio.css" rel="stylesheet" type="text/css"/>
保存之后再刷新，就可以看到一只正常尺寸的嘉然啦～
参考资料
【Wordpress主题】Sakuraio主题的使用与优化相关推荐
- wordpress模板WP主题安装失败的解决办法
还记得我刚开始建立比尔云的时候,想要换什么样的主题直接在后台下载就行了.或者就到一些wordpress主题网站下载一些喜欢的然后在博客后台上传,也可 以用FTP上传模板就可以了.可是前段时间,我发现我 ...
- wordpress中文主题，开源wordpress中文免费主题模板
wordpress中文主题,虽然说Wordpress主题语言对网站本身影响并不是太大,但是如果能够满足要求的话,站长还是更偏向于使用国内主题,一方面是wordpress中文主题使用起来都比较容易上手, ...
- WordPress主题 Vieu主题V4.5无授权无限制版 基于Dux主题二次开发 完美运行
模板简介: WordPress主题vieu基于Dux主题二次开发!的一款专业打造轻量级个人企业风格博客主题!专注于前端开发,全站响应式布局自适应模板.适用范围:wordpress主题.WordPres ...
- 2020年64种最佳免费WordPress博客主题
Are you looking for a free WordPress blog theme for your website? 您是否正在为网站寻找免费的WordPress博客主题? There ...
- Soledad多用途WordPress博客主题下载
在数字时代,博客已经成为表达个人观点.分享经验和建立品牌的重要工具.无论您是个人博主.创作者还是新闻机构,拥有一个引人注目.功能丰富的博客网站是吸引读者和增强影响力的关键.Soledad多用途Word ...
- WordPress多本小说主题–WNovel主题，现已更新至1.2版本
本文属于<WNovel主题操作手册>文章系列,该系列共包括以下 8 部分: WNovel主题使用手册之–主题安装及更新教程 WNovel主题使用手册之–小说管理 WNovel主题使用手册之 ...
- WordPress多本小说主题–WNovel主题发布，十分钟搭建小说站！ 现已更新至1.2版本...
本文转载于:猿2048网站WordPress多本小说主题–WNovel主题发布,十分钟搭建小说站! 现已更新至1.2版本 本文属于< WNovel主题操作手册>文章系列,该系列共包括以下 ...
- 子主题function php,使用 WordPress 的子主题（Child Themes）功能快速制作自己的主题...
在了解子主题功能之前,先来看一下你在使用 WordPress 的时候是否是这样:不会自己制作主题,只好从网上下载一个,这个主题整体风格比较适合,但是有些小地方不太好,自己只是有一点 CSS 基础,可以 ...
- WordPress主题模板主题巴巴博客X无限制版
简介: 博客X是一款由主题巴巴团队原创设计开发的WordPress博客主题.这款主题是迄今为止我们开发的最强大的博客主题.主题首页内容可展示幻灯片置顶文章.专题列表等精妙设计的内容模块,对网站用户具有 ...
最新文章
- LayerMask小结
- Challenges(分组、聚合、连接)
- Win32 SDK 编写截图小工具
- 【Python】分享14条非常实用的Pandas函数方法，建议珍藏！！
- python正则表达式模块_Python正则表达式模块（re模块）
- 如何通过简单的配置，实现SAP Spartacus的guest checkout需求
- css文本行高是哪个属性_CSS中的line-height行高属性的使用技巧小结
- 李宏毅机器学习——无监督学习(五)
- Android Theme主题继承（SDK下主题和v7包下主题）
- Spring整合MyBatis原理之Mapper接口代理对象的产生以及调用 （三）
- FFmpeg教程（超级详细版）
- git 操作报错(fatal: ‘xxx’ does not appear to be a git repository)
- Deepest Root（dfs深度优先遍历）
- python getch函数_pyhton 下 使用getch(), 输入字符无需回车
- c语言kbhit函数在哪里,kbhit()函数
- op积分上反馈电阻 作用 理解 op 积分
- 千纸鹤(小纸片)全套源码
- 漫画插画绘图工具：MediBangPaintPro for Mac
- 易语言之ocr自动识别验证码dll文件
- RTX基于32位Windows实时操作系统