WordPress博客添加看板娘

1.首先下载看板娘文件

例:https://github.com/Scar007/live2D

2.将下载下来的文件解压上传到自己网站合适位置

建议直接放wordpress路径下

3.找到你使用的主题下的header.php文件,添加内容

# vim /xx/xx/wordpress/wp-content/thems/xx(主题名称)/header.php
添加以下代码
<link rel="stylesheet" href="/live2d/css/live2d.css" />

4.找到正在使用主题下的footer.php文件,在body结束标签前添加如下代码

# vim /xx/xx/wordpress/wp-content/thems/xx(主题名称)/footer.php
添加以下代码
<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.anranlql.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">
    var index = Math.ceil(Math.random()*37)
        loadlive2d("live2d", "/live2d/model/pio/model_"+index+".json");
</script>
​

5.修改完后刷新下网站出现效果

注:

此live2d默认在右边,可以修改该主题下live2d.css文件改到左边

# vim /var/www/wordpress/live2d/css/live2d.css
landlord {
    user-select: none;
    position: fixed;
    /*right: 20px;*/   #注释掉右边
    left: 20px;         #添加到左边(离左边越远数值设置越大即可)
    bottom: 0;
    width: 280px;      #宽度
    height: 250px;      #高度
    z-index: 10000;
    font-size: 0;
    transition: all .3s ease-in-out;
}
上一篇
下一篇
隐藏
换装