为你的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
- 促销 iON→圣何塞线路改善 8 折优惠一个月 1 核 2G 50G S全球[VPS测评]
- PacificRack→$7.25 年 KVM-512MB 10GB 5全球[VPS测评]
- servaRICA→$10 月 3 核 3GB 内存 3TB 空间 不限虚拟空间(主机)
- 搬瓦工→新增 10Gbps 带宽的 cn2 gia 线路 VPS 移动+全球[VPS测评]
- OVZH→35 元 月 768MB 内存 15GB SSD 空间 500虚拟空间(主机)
- Kuai Che Dao→$18.3 季 512MB 内存 10GB S虚拟空间(主机)
- 碳氧云→80 元 月 6 核 6GB 内存 80GB SSD 空间 不限虚拟空间(主机)
- 促销 RackNerd→高配置大流量套餐上线 2 核 2.5G 内存 4全球[VPS测评]
- 充值活动 hostsolutions→充值立返 50% 最高返 250 全球[VPS测评]
- GCP 谷歌云重撸 300 美元方法及删不了结算账户的解决办法全球[VPS测评]
- RUVDS→30 卢布 月-512MB 10GB 无限流量 俄罗斯全球[VPS测评]
- 优惠活动 野草云→虚拟主机 VPS 全场 8 折优惠 香港 1G 2G 香港VPS[主机]
- php 生成随机颜色最简单办法 php 一句话代码生成随机颜色全球[VPS测评]
- ping.cat监测各大国外VPS主机商网络质量全球[VPS测评]
- 引力主机双12九折优惠安徽联通NATVPS1G内存4T大流量200M大带全球[VPS测评]
- GigsGigsCloud 新加坡 VPS CLOUDLET SG K1全球[VPS测评]
- 傲游主机全场vps8折,美国CN2/香港CN2/德国CN2/荷兰CN2等美国VPS[主机]
- 百度智能云云服务器BCC测评硬盘IO、速度、延迟、丢包率和路由测试全球[VPS测评]
- LOCVPS 全场八折优惠,双十一充300送50充500送100充600全球[VPS测评]
- puh-hosting 荷兰VPS 测评 -1.49欧月付 1核0.5g全球[VPS测评]
- 快车道 新用户-季付65折-半年付6折优惠 圣何塞-德国GIA全球[VPS测评]
- WordPress去掉分类链接中category目录的两种方法全球[VPS测评]
- 新华全媒+丨第六届全球跨境电商大会:跨境电商加快拓宽中国贸易新通道全球[VPS测评]
- 如何设置必应api 自动推送网站全球[VPS测评]
- 74块钱一年的云服务器可以用来做什么?全球[VPS测评]
- JGKVM促销,美国cn2vps服务器价格再创新低,平均6.5元/月起美国VPS[主机]
- 酷锐云:春节特惠,4核4G80G10M仅60元/月起,香港/美国云服务器美国VPS[主机]
- 快云科技:2核2G3M云服务器14.98元/月;香港vps全场7.5折,香港VPS[主机]
- 老六云怎么样?香港cn2vps月付23元香港NTT月付9.9元香港VPS[主机]
- 水墨云:特惠香港、日本、韩国、洛杉矶小内存vps;IPLC专线/海外CN日本VPS[主机]
转载请注明原文地址:http://140.238.13.167:12355/read-31204.html











