效果图预览。

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

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.yunjianwu.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>

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

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

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