为你的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
- Debian Ubuntu 内核降级教程-降低(BBR)为支持锐速的内核全球[VPS测评]
- Pump Cloud→$42.49 月 1GB 内存 20GB NVMe虚拟空间(主机)
- 低价一般-virmach→$45 年 1T 硬盘 10T 流量 10Gb美国VPS[主机]
- 活动 HostXen→新用户送 20 元 日本直连 7M 不限流量 VP日本VPS[主机]
- RAKsmart-日本 KVM 1G 内存 40G 硬盘 5M 无限流量日本VPS[主机]
- 做站推荐 标准互联→4 核 8G 内存 100G SSD 高防国内 VP全球[VPS测评]
- 云邦互联→650 元 月-E3 1230v2 16G 480G SSD 香港VPS[主机]
- ZJI→全新上架香港大埔 CN2 服务器 双路 E5 64G 内存 8C站群服务器[IP]
- eCoinVPS→$7.6 年 512MB 内存 10GB NVMe 空虚拟空间(主机)
- 双十一 CUBECLOUD→新加直 中国香港 美国洛杉矶全部 88 折优美国VPS[主机]
- 2020 年整理抗投诉 VPS 和服务器（无视版权 DMCA FREE）全球[VPS测评]
- $10.5 首年 512M 内存 10G SSD 500G 流量 1Gb全球[VPS测评]
- VirMach - 存储型 VPS 少量补货 1T 硬盘$7 月全球[VPS测评]
- WordPress插件：nix-gravatar-cache汉化版实现G全球[VPS测评]
- 结合预算和需求来选择香港服务器和美国服务器美国VPS[主机]
- 搬瓦工VPS面板新增Mount ISO内置100+系统镜像 附安装Gno全球[VPS测评]
- AMH开源主机面板7.0版本大更新，免费授权，拒绝广告，不回传数据全球[VPS测评]
- Tideo-月付4$ 丹麦VPS 1核2G内存20G硬盘 100Mbps全球[VPS测评]
- Edgevirt-测评 美国迈阿密VPS 5T流量@10Gbps端口 原美国VPS[主机]
- 香港的云服务器值得租用吗？有什么好处？香港VPS[主机]
- 江苏高防服务器哪里买?宿迁BGP、宿迁双线高防服务器的价格全球[VPS测评]
- 2023年 IDC市场结构和方向的深度分析全球[VPS测评]
- 安国云：1核/1G/20G硬盘/1Mbp不限流量/香港cdia,月付18香港VPS[主机]
- 8K超高清记录中国空间站凌月：天和核心舱与问天实验舱组成“土”字结构虚拟空间(主机)
- KVMCloud：1核/512M/40G硬盘/无限流量/美国/香港BGP美国VPS[主机]
- 傲闪云vps,1核1G低至10元起,国内高防/香港CN2/美国CN2/美美国VPS[主机]
- 优网主机怎么样?香港云主机/美国云主机价格低至19元/月美国VPS[主机]
- 宝塔面板在香港服务器安装启动不了nginx怎么办?香港VPS[主机]
- 宝塔面板怎么放行端口?宝塔面板放行端口的方法全球[VPS测评]
- PQhosting：香港HE/乌克兰/俄罗斯/荷兰/摩尔多瓦vps主机/香港VPS[主机]
转载请注明原文地址:http://140.238.13.167:12355/read-21471.html