效果图预览。

1、首先点击下载看板娘文件。

下载 “看板娘” KanBanMusume-master.zip – 已下载70次 – 4 MB

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

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

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

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

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

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

<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 = 'https://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博客添加看板娘

        👍赞 0
说点什么
支持Markdown语法
好耶,沙发还空着ヾ(≧▽≦*)o
Loading...