欢迎访问本站!
胜败皆在毫厘之间。

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

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

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

效果预览

准备工作

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

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

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

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

代码

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>
wpjiaocheng - 「wordpress教程」网站添加Live 2D看板娘的教程

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

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

清除缓存刷新网页即可看见效果
注意:路径别弄错了
还有,为什么和我的不一样,不要问,问就是因为我长得帅。
最后推荐一下我新做的影视网
毫厘影视(你想看的我都免费)???

如果对您产生了帮助,我深感荣幸、感谢对本博客的支持。
文件版权归原作者所有
毫厘博客版权所有丨如未注明 , 均为原创丨转载请注明原文链接:「wordpress教程」网站添加Live 2D看板娘的教程

赞(0) 打赏
未经允许不得转载:毫厘博客 » 「wordpress教程」网站添加Live 2D看板娘的教程
分享到: 更多 (0)

评论 抢沙发

  • 昵称 (必填)
  • 邮箱 (必填)
  • 网址