WordPress网站上添加看板娘

发布于 2024-04-12  379 次阅读 

[root@chaosaigc ~]# wget https://github.com/mumuhaha487/KanBanMusume/archive/refs/heads/master.zip
[root@chaosaigc ~]# cp master.zip /usr/share/nginx/html/
[root@chaosaigc ~]# cd /usr/share/nginx/html/
[root@chaosaigc html]# unzip master.zip

# 将解压之后的目录修改成live2d

设置头文件
打开 wp-content/themes/[WordPress使用的主题名称]/header.php 
在<head>和</head>之中添加以下代码，将代码中 src 属性的 url 更换成你自己的

<!--Live2D show start-->
<link rel="stylesheet" href="http://你博客的域名/live2d/css/live2d.css" />
<script type="text/javascript" src="http://apps.bdimg.com/libs/jquery/2.1.4/jquery.js"></script>
<!--Live2D show end-->

再打开同目录下的footer.php文件
在</body>前面加入如下内容（要把“var home_Path”改为你的域名）

<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.aaa.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)
 //index表示服装编号，此处表示随机切换服装
 loadlive2d("live2d", "live2d/model/pio/model_"+index+".json");
</script>

修改看板娘所在位置，当前在右侧
打开/usr/share/nginx/html/live2d/css/live2d.css
#landlord {
    user-select: none;
    position: fixed;
    #如需改到左侧，将right，修改为left
    right: 20px;
    bottom: 0;
    width: 280px;
    height: 250px;
    z-index: 10000;
    font-size: 0;
    transition: all .3s ease-in-out;
}

一沙一世界，一花一天堂。君掌盛无边，刹那成永恒。