• 欢迎访问毫厘博客,博客上的所有软件及相关资料均为软件商和个人工作总结或网友推荐及网络收集整理而来、仅供学习和研究使用、切勿用做商业用途、如有侵犯版权者、请来信到邮箱 :www_ihli_xyz@163.com 指出、毫厘博客将立即修正、净化网络版权环境、同时毫厘博客也不承担用户因使用这些下载资源对自己和他人造成任何形式的损失或伤害。

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

wordpress教程 hauyf 9个月前 (06-03) 261次浏览 已收录 0个评论 扫描二维码

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

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

效果预览

准备工作

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

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

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

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

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

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


毫厘博客, 版权所有丨如未注明 , 均为原创丨本网站采用BY-NC-SA协议进行授权
转载请注明原文链接:「wordpress教程」网站添加Live 2D看板娘的教程
喜欢 (0)
[]
分享 (0)
发表我的评论
取消评论
表情 贴图 加粗 删除线 居中 斜体 签到

Hi,您需要填写昵称和邮箱!

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