看板娘涉及 Live2D 技术,简单来说就是用许多连续的图像和建模在 2D 上做出动态的效果,有兴趣可以自行上网了解,效果如下
接下来是在 WordPress 搭建的网站上添加看板娘的方法
📑对应
本文学习自《WordPress博客添加看板娘》
https://blog.csdn/THMAIL/article/details/105932140
🗃️附件
首先去下载看板娘相关文件
https://github/ixixii/KanBanMusume
将下载的看板娘相关文件(live2d 文件夹)上传到该目录下
随后在服务器上找到 WordPress 站点目录,如笔者的是 /www/wwwroot/[站点文件名]
在目录底下找到 wp-content/themes/[WordPress使用的主题名称]/header.php
在<head>
和</head>
之中添加以下代码,将代码中 href
和 src
属性的 url 更换成你自己的
<!--Live2D show start-->
<link rel="stylesheet" href="http://www.aaa/wp-content/live2d/css/live2d.css" />
<script type="text/javascript" src="http://apps.bdimg/libs/jquery/2.1.4/jquery.js"></script>
<!--Live2D show end-->
在目录底下找到 wp-content/themes/[WordPress使用的主题名称]/footer.php
在</body>
之前添加以下代码,将代码中 home_Path
变量, href
和 src
属性的 url 更换成你自己的
<div id="landlord">
<div class="message" style="opacity:0"></div>
<canvas id="live2d" width="280" height="250" class="live2d"></canvas>
<div class="hide-button">隐藏</div>
<div class="switch-button">换装</div>
</div>
<script type="text/javascript">
var message_Path = '/live2d/'
var home_Path = 'http://www.aaa' //此处修改为你的域名
</script>
<script type="text/javascript" src="live2d/js/live2d.js"></script>
<script type="text/javascript" src="live2d/js/message.js"></script>
<script type="text/javascript">
var index = Math.ceil(Math.random()*37)
//index表示服装编号,此处表示随机切换服装
loadlive2d("live2d", "live2d/model/pio/model_"+index+".json");
</script>
其中 index
表示服装编号,取值范围是 1-37,服装具体样式可在 live2d/model/pio/textures
中查看
可以自行对服装样式进行简单的修改,如笔者不想要翅膀,则在PS里对png图片进行编辑,将翅膀部分删去即可。
🗃️附件
没有翅膀的该看板娘版本相关文件可以从这里下载
https://github/dreature1328/KanBanMusume
更多推荐
在WordPress网站上添加看板娘
发布评论