此方法使用了 jiangweifang 大佬制作的 WordPress Live 2D 插件和 imuncle 大佬整理的模型文件,在此致敬。

现在有越来越多的站长给他们的博客添加了Live2d看板娘。借助于 jiangweifang 大佬制作的 WordPress Live 2D 插件,给博客添加一个看板娘这项工作已经变得十分简单,繁杂的前端代码只需要通过可视化的操作就可以配置,我们唯一要做的就是找好钟意的看板娘模型便是。

安装 WordPress 上的 Live 2D 插件

首先当然要安装好插件,进入博客的后端,依次点击 插件 - 安装插件,搜索 Live 2D ,点击 现在安装 即可。

随后启用插件,便可在 设置 中找到 Live 2D 设置 了。

一般情况下,不需经过任何设置,刷新后,博客即可出现 Live2d 看板娘。

寻找 moc3 模型

得益于众多大佬的不懈努力,只要善用搜索引擎,找到一个可用的 moc3 模型已经不再困难。在下博客的 moc3 模型来自于 imuncle大佬整理的碧蓝航线 Live2d,项目地址在这里

我们直奔 live2d_3/model/Azue Lane(JP),就可以看到一众模型文件夹,可以从文件夹名字中的拼音得知她们都是谁。

在此之前,可以先访问演示站来预览一下模型是否中意。

找到自己想添加的模型之后,自然是要把她下载下来了,然而把整个仓库克隆下来可能有点僵硬,可以使用 GitZip 这个浏览器插件把特定的模型文件夹下载下来,关于 GitZip 的具体操作这里就不再过多赘述了,其官网有很直白的演示。

得到了模型文件夹之后,我们需要把它上传到服务器的网站的任意目录之下,随后记下文件夹目录中的 XXX.model3.json 的路径。

配置 Live 2D 插件的设置

打开博客后端的设置 - Live 2D设置,在 模型 API 处填入 XXX.model3.json 的路径,一般格式为:

https://yourwebsite.url/path/to/XXX.model3.json

请将 yourwebsite.urlpath/to 改成自己的域名和相应的文件路径。

随后打开模型文件夹目录下的 XXX.model3.json 文件,看到 "Motions" 这一行,下面有很多诸如 "motions/complete.motion3.json" 之类的存放动作文件的地址,我们需要把这一动作文件的文件名(不包括扩展名)填入 Live 2D 设置中的 moc3模型自定义动作 当中,例如 "touch_head.motion3.json" 请在输入框中输入 touch_head

点击 保存更改,刷新博客后,不出意外 moc3 模型的看板娘就已经显示在博客上了,但是 moc3 模型的看板娘搭配该插件显示的时候都会比较小,我们只需要搭配微调 模型缩放倍数看板娘样式设置 中的 看板娘大小 等设置即可。

之后的所有基本操作都可以在插件的设置中完成,由于该插件是基于 fghrsh 大佬的项目 打造的,因此该项目所能实现的设置在该插件的设置中都能实现。

当一切配置完成,尽情享受博客的看板娘吧!

其他

Live 2D 插件中 高级设置 是有关看板娘文字框中的消息设置,这一部分设置做出改动并保存后,需要清除博客的缓存后重新访问才能看到效果。


封面来源:カンセンたちの休日 | ひみつ #pixiv https://www.pixiv.net/artworks/79225451