WordPress添加看板娘


效果图预览。

1、首先点击下载看板娘文件。第一个不明原因失效,请点击第二个进行下载。

2、将下载的压缩包解压,并将文件夹重命名为live2d,上传至网站根目录。

3、在WordPress后台找到当前主题的header.php文件,并添加如下代码。

cd wp-content/themes/当前主题/header.php

1
<link rel="stylesheet" href="/live2d/css/live2d.css" />

添加代码一定要注意路径是否正确。

4、找到当前主题的footer.php文件,在body结束标签之前添加如下代码。

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
<div id="landlord">
<div class="message" style="opacity:0"></div>
<canvas id="live2d" width="280" height="250" class="live2d"></canvas>
<div class="hide-button">隐藏</div>
<div class="switch-button">换装</div>
</div>

<script type="text/javascript">
var message_Path = '/live2d/'
var home_Path = 'http://www.coolku.cc/' //此处修改为你的域名,必须带斜杠
</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">
var index = Math.ceil(Math.random()*37)
loadlive2d("live2d", "/live2d/model/pio/model_"+index+".json");
</script>

这里还是要注意路径是否正确。

至此就可刷新页面查看效果了。

原文地址:WordPress博客添加看板娘


文章作者: COOL
版权声明: 本博客所有文章除特別声明外,均采用 CC BY 4.0 许可协议。转载请注明来源 COOL !
评论
  目录