「wordpress教程」网站添加Live 2D看板娘的教程

Hello，大家好，大家看到本博客左边那个萌萌的看板娘了吗，想不想要。我猜一定很想，本期就教大家怎么领养一只看板娘。?

首先是效果预览和准备工作

效果预览

准备工作

1.首先去下载看板娘文件
蓝奏云

2.把下载的文件上传到你的主题目录，路径可以自己决定，把解压出来的文件夹重命名成live2d

到这里准备工作算是结束了，下面开始撸代码。

代码

1.在你的wordpress主题头部文件header.php加入下面的代码：

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

2.在尾部文件footer.php的</body>标签结束之前插入代码：

<div id="landlord">
    <div class="message" style="opacity:0"></div>
    <canvas id="live2d" width="280" height="360" class="live2d"></canvas>
</div>


<script type="text/javascript">
    var message_Path = '/live2d/'
    var home_Path = 'https://www.ihli.xyz/'  //此处修改为你的域名，必须带斜杠
</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">
    loadlive2d("live2d", "/live2d/model/tia/model.json");
</script>

3.如果你想修改看板娘说的话，请在message.json文件进行修改
示例：

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

清除缓存刷新网页即可看见效果
注意：路径别弄错了
还有，为什么和我的不一样，不要问，问就是因为我长得帅。