为你的WordPress添加live2d看板娘教程
![]() | ![]() | ![]() | ![]() |
| 【性价之王】 | 【线路之王】 | 【价格之王】 | 【配置之王】 |
| 【免费之王】 | 【香港首推】 | 【梯子之王】 | 【独服之王】 |

看板娘简介
看板娘就是一个卡通模型,通过代码的部署,会在你网页的指定位置进行显示,你用鼠标进行点击会有不同地字幕,所有的一切都可以预先进行设置。
代码地址
https://github.com/galnetwen/Live2D
wordpress设置教程
下载后解压代码到你的博客网站根目录去。(目录位置可以自定义)
然后把解压出来的文件夹改名为:live2d 。
在你博客程序头部文件(header.php)引入界面样式,在 head 标签内插入如下代码
| 1 | <link rel="stylesheet" h="/live2d/css/live2d.css" /> |
在你博客程序页脚文件(footer.php)引入脚本,在最后一个 标签前插入如下代码:
<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.771633.com/' //此处修改为你的域名,必须带斜杠</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>| 123456789101112131415 | <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.771633.com/' //此处修改为你的域名,必须带斜杠</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> |
鼠标放在页面某个元素上时,需要 Live2D 看板娘提示的请修改 message.json 文件。
实例:
{ "mouseover": [ { "selector": ".title a", //此处修改为你页面元素的标签名 "text": ["要看看 {text} 么?"] //此处修改为你需要提示的文字 }, { "selector": "#searchbox", "text": ["在找什么东西呢,需要帮忙吗?"] } ], "click": [ //此处是 Live2D 看板娘的触摸事件提示 { "selector": "#landlord #live2d", "text": ["不要动手动脚的!快把手拿开~~", "真…真的是不知羞耻!","Hentai!", "再摸的话我可要报警了!⌇●﹏●⌇", "110吗,这里有个变态一直在摸我(ó﹏ò。)"] } ]}| 123456789101112131415161718 | { "mouseover": [ { "selector": ".title a", //此处修改为你页面元素的标签名 "text": ["要看看 {text} 么?"] //此处修改为你需要提示的文字 }, { "selector": "#searchbox", "text": ["在找什么东西呢,需要帮忙吗?"] } ], "click": [ //此处是 Live2D 看板娘的触摸事件提示 { "selector": "#landlord #live2d", "text": ["不要动手动脚的!快把手拿开~~", "真…真的是不知羞耻!","Hentai!", "再摸的话我可要报警了!⌇●﹏●⌇", "110吗,这里有个变态一直在摸我(ó﹏ò。)"] } ]} |
清除浏览器缓存,刷新,看看效果吧
[教程]历史优惠活动内容
猜你可能想看的VPS
- vultr 韩国 vps 云服务器上线,三网直连,按小时计费,1 核 1韩国VPS[主机]
- 优惠促销 T667→洛杉矶 伯力机房补货 提供各种机房优惠码 OLVPS全球[VPS测评]
- HostKvm→$6.65 月 2GB 内存 20GB SSD 空间 6虚拟空间(主机)
- gcorelabs→€4.49 月 新加坡 VPS 50Mbps 带宽 全球[VPS测评]
- VirMach→$37 月-E3 1240 16GB 1TB 10TB 全球[VPS测评]
- 存储型 VPS $2 月 512M 内存 11G NVMe+256G 空虚拟空间(主机)
- 便宜 VPS $15 年 1G 内存 20G SSD 1T 流量 Ope全球[VPS测评]
- reset.css 分享全球[VPS测评]
- 促销 数脉科技→香港双程 CN2+BGP 线路独立服务器 月付低至 45独立服务器[U]
- 疯狂猜成语 图猜成语一个闻字上面的门是虚线的是什么成语?全球[VPS测评]
- 促销 NexusBytes→VPS 季付 68 折优惠 可选洛杉矶 纽约全球[VPS测评]
- 电信清理CN2 GIA市场,后续可能涨价全球[VPS测评]
- WordPress 修改管理页面登录地址全球[VPS测评]
- WordPress如何在文章后添加类似页码的相关文章?全球[VPS测评]
- server-com 新加坡1Gbps云主机2TB流量$6.26 月 新全球[VPS测评]
- CentOS7修改换yum源(最简安装)解决默认yum源无法使用全球[VPS测评]
- ZeptoVM 2018圣诞优惠全球[VPS测评]
- Wikihost CN2 香港虚拟主机 → 独立IP → 限量446元独立服务器[U]
- 好朋友51WORLD启动“地球克隆计划5”,我要去元宇宙参加了全球[VPS测评]
- 什么是IconFont ?iconfont 的使用和解析全球[VPS测评]
- 源云主机,香港沙田VPS CN2 1核1G 24/月 NTT 50M 9香港VPS[主机]
- 麻花云怎么样?安徽移动VPS月付29元 香港VPS 2M月付21元香港VPS[主机]
- 翔云网络怎么样?香港云服务器优惠99/月,国内4核4G高防服务器6800香港VPS[主机]
- 阿里云香港服务器多少钱一年?香港阿里云服务器价格表香港VPS[主机]
- 用玩客云做打印服务器,让你在手机上轻松实现无线打印全球[VPS测评]
- 八成企业看好出海投资 防止“溺水”需重视这一点全球[VPS测评]
- 紫云服务器怎么样?紫云香港云服务器1核1G2M仅65元/月香港VPS[主机]
- earidc怎么样?香港三网cn2vps带宽1M月付29元香港VPS[主机]
- 汇速云:香港沙田CN2云主机,2核CPU带宽1M月付6元,2核2M带宽月香港VPS[主机]
- 咖啡主机:元旦活动全场7、8折,洛杉矶vps仅需16元/月,香港将军澳C香港VPS[主机]
转载请注明原文地址:http://140.238.13.167:12355/read-27965.html











