在 WordPress 上添加 moc3 Live2d 看板娘的超简单方法

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

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

安装 WordPress 上的 Live 2D 插件

首先当然要安装好插件，进入博客的后端，依次点击插件 - 安装插件，搜索 Live 2D ，会找到作者为 Ciang Weifang 的一个插件，点击 现在安装 即可。

随后启用插件，便可在设置中找到 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.url 和 path/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

查看评论 - 14 条评论

Comments | 14 条评论

博客作者 QiuYeDx

回复

发布于 9 天前 ( Safari 605 macOS Catalina or Higher 10.15.7 )( )

我没用插件，手动配置了一个下午，结果发现想用的是moc3的模型，我环境是moc（moc2）的。。。唉
博客作者老白

回复

发布于 2021-12-19 06:38 ( Chrome 96 Windows 10/11 )( )

多谢站长，我装了之后动不了，不能移动，后台打开了，B2主题
- 博客作者澄沨
  
  回复
  
  发布于 2021-12-20 04:16 ( Chrome 96 Windows 10/11 )( )
  
  @老白单纯想移动看板娘的话只要在插件设置里面找到允许拖拽看板娘的选项就行了
博客作者 mid8ts

回复

发布于 2021-12-17 05:48 ( Chrome 96 Windows 10/11 )( )

请教一下怎么调整高度，我的装上后会高出底部一截。谢谢谢谢
- 博客作者澄沨
  
  回复
  
  发布于 2021-12-17 11:55 ( Chrome 96 Windows 10/11 )( )
  
  @mid8ts 最简单的办法，就是在插件设置里对模型缩放大小和模型宽高进行微调可以实现巧妙的高度调节，但是这种方法可能需要多试一些参数。
  如果嫌麻烦，可以直接修改 CSS。
  首先定位到 https://yourwebsite.url/path/to/wp-content/plugins/live-2d/assets/waifu.css
  看到这里的第 3 行
  
  .waifu { position: fixed; bottom: 0; z-index: 20; font-size: 0; -webkit-transform: translateY(0); transform: translateY(0); }
  
  @mid8ts 把 bottom 后面的参数改成你想要的底部边距，例如 bottom: 10px;
  这样就好啦 (〜￣△￣)〜
  - 博客作者 mid8ts
    
    回复
    
    发布于 2021-12-17 14:34 ( Chrome 96 Windows 10/11 )( )
    
    @澄沨试了下不行，然后换了个主题就好了。估计是主题的问题。多谢博主
博客作者 Evariste_xu

回复

发布于 2021-06-13 11:33 ( Chrome 91 Windows 10/11 )( )

大佬，我按照步骤上传moc3模型，但是不知道为什么加载不出来
- 博客作者 Evariste_xu
  
  回复
  
  发布于 2021-06-13 11:48 ( Chrome 91 Windows 10/11 )( )
  
  @Evariste_xu 原来是加载太慢了
  - 博客作者澄沨
    
    回复
    
    发布于 2021-06-13 12:06 ( Chrome 91 Android 11 )( )
    
    @Evariste_xu 加载慢的话可以考虑把模型放到GitHub上用jsdelivr CDN加载(°∀°)ﾉ
    - 博客作者 Evariste_xu
      
      回复
      
      发布于 2021-06-13 12:38 ( Chrome 91 Windows 10/11 )( )
      
      @澄沨而且好像有些moc3模型还不太支持,刚刚测试过不同的,有的可以加载,有的不能加载,目前原因还不太清楚
博客作者 Liberation

回复

发布于 2021-04-26 00:57 ( Chrome 90 Windows 10/11 )( )

请问大佬贵站使用的模型是什么？我也是 Sakurairo ，请问如何解决QQ头像提取不到的问题呢(/▽＼)
- 博客作者澄沨
  
  回复
  
  发布于 2021-04-27 14:58 ( Chrome 90 Windows 10/11 )( )
  
  @Liberation 也是用的 sakurairo，可能有的时候那个 API 会抽风吧(°∀°)ﾉ
  刚刚去贵站看了下好像没有问题
  - 博客作者 Liberation
    
    回复
    
    发布于 2021-04-27 23:38 ( Chrome 90 Windows 10/11 )( )
    
    @澄沨 QQ头像问题已经解决的，我是想知道大佬用的看板娘模型是哪里找的，还是大佬自己提取的(｀・ω・´)
    - 博客作者澄沨
      
      回复
      
      发布于 2021-04-28 02:31 ( Chrome 90 Linux )( )
      
      @Liberation 文章中提到啦，在这里，moc 格式和 moc3 格式都有