WordPress博客添加看板娘(送37套服饰)

效果如下:

1. 从我的github下载压缩包

该压缩包已经自带37套服饰、支持换装功能、支持经典动漫台词展示、未来还会支持钉宫日语50音发声喔~

2. 将下载的压缩包上传到网站的根目录,并解压

scp live2d_v1.0.zip root@xx.xx.xx.xx:/usr/local/nginx/html/vwhm_net_wwwroot/

3. 在header.php文件中添加以下代码

cd wp-content/themes/twentyseventeen/

<link rel="stylesheet" href="/live2d/css/live2d.css" />
<script type="text/javascript" src="http://apps.bdimg.com/libs/jquery/2.1.4/jquery.js"></script>

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 = 'http://vwhm.net'  //此处修改为你的域名，必须带斜杠
</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)
        console.log('未闻花名vwhm.net + ' + index)
        loadlive2d("live2d", "/live2d/model/pio/model_"+index+".json");
</script>

搞定~打完收工~

附录:

以下是普通demo.html页面中,集成看板娘的步骤:

live2d目录中已经有了所有的js.css.model等文件


正式开工

1. 在任意一个与live2d目录同级的html页面中的 head 标签内插入如下代码：
<link rel="stylesheet" href="/live2d/css/live2d.css"/>
<script src="https://cdn.bootcss.com/jquery/2.1.4/jquery.min.js"></script>


2. 在 body 标签的最后面 插入 Live2D 看板娘的元素: 
<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>

3. 在 body 标签结束前插入如下代码：
<script type="text/javascript">
    var message_Path = '/live2d/'
    var home_Path = 'https://vwhm.net/‘  //此处修改为你的域名，必须带斜杠
</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>