步骤一：

这次我就不发资源了，因为整个部件比较大也不是很大，你直接在服务器上运行这个命令吧：

git clone https://github.com/galnetwen/Live2D

你将在执行该命令的位置处发现一个名为“Live2D”的文件夹，学过git的同学可能了解相关机理，不过这不重要。

步骤二：

就在这个路径下，执行第二个命令：

sudo cp -rf Live2D/live2d /www/wwwroot/blog.sanqii.top/wp-content/

相关路径根据自己的相应路径进行更改哦，我的网站根目录就在/www/wwwroot/blog.sanqii.top处（还记得优化一中提到的网站根目录吧？）

步骤三：

好了现在进入你的WordPress主题所在的目录，例如我的是~/wp-content/themes/twentyseventeen（优化一也介绍过的），此处的“~”指的是网站根目录，在我这里具体指的是

/www/wwwroot/blog.sanqii.top/wp-content/themes/twentyseventeen

步骤四：

此处应该有 header .php这个文件，进入该文件，我们准备编辑。

首先引入界面样式，在 head 标签内插入如下代码：

<link rel="stylesheet" href="/wp-content/live2d/css/live2d.css" />

在 body 标签内合适的位置插入 Live2D 看板娘的元素，注意按照 Html 书写规范：

<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>

然后退出保存，我们准备编辑下一个文件。

步骤五：

找到footer.php这个文件，进入该文件，我们准备编辑。

在 body 标签结束前插入如下代码：

<script type="text/javascript">
    var message_Path = '/wp-content/live2d/'
    var home_Path = 'https://haremu.com/'  //此处修改为你的域名，必须带斜杠
</script>
<script type="text/javascript" src="/wp-content/live2d/js/live2d.js"></script>
<script type="text/javascript" src="/wp-content/live2d/js/message.js"></script>
<script type="text/javascript">
    loadlive2d("live2d", "/wp-content/live2d/model/tia/model.json");
</script>

OK，退出保存。

步骤六：

这时候已经大功告成了，但如果你想改一下人物说的话也是可以的。

先进入刚刚live2d所在的文件夹：这里是~/wp-content/live2d，你会发现一个 message.json 文件，进入修改相应选项。

{
    "mouseover": [
        {
            "selector": ".title a",  //此处修改为你页面元素的标签名
            "text": ["要看看 {text} 么？"]  //此处修改为你需要提示的文字
        },
        {
            "selector": "#searchbox",
            "text": ["在找什么东西呢，需要帮忙吗？"]
        }
    ],
    "click": [  //此处是 Live2D 看板娘的触摸事件提示
        {
            "selector": "#landlord #live2d",
            "text": ["不要动手动脚的！快把手拿开~~", "真…真的是不知羞耻！","Hentai！", "再摸的话我可要报警了！⌇●﹏●⌇", "110吗，这里有个变态一直在摸我(ó﹏ò｡)"]
        }
    ]
}

未出现效果的话注意刷新一下就好了

感谢该材料来源