1.资源准备

下载相关文件: 点击下载（资源来自网络，侵删）
上传到网站根目录（或者自定义其它目录），解压，可以在assets目录中看到如图所示的文件:

2.实现（注意修改url）

• 在header.php中引用CSS
  在<?php wp_head(); ?>前添加如下代码:

  <link rel="stylesheet" href="waifu.css的url" />
  <link rel="stylesheet" href="flat-ui.min.css的url" />

• 在footer.php中实现
  在<?php wp_footer(); ?>后，</body>前添加如下代码:

  <div class="waifu" id="waifu">
  <div class="waifu-tips" style="opacity: 1;"></div>
  <canvas id="live2d" width="280" height="250" class="live2d"></canvas>
  <div class="waifu-tool">
      <span class="fui-home"></span>
      <span class="fui-chat"></span>
      <span class="fui-eye"></span>
      <span class="fui-user"></span>
      <span class="fui-photo"></span>
      <span class="fui-info-circle"></span>
      <span class="fui-cross"></span>
  </div>
  </div>
  <script src="live2d.js的url"></script>
  <script src="waifu-tips.js的url"></script>
  <script type="text/javascript">initModel()</script>

3.效果

清空浏览器缓存，刷新页面，即可在左下角看见萌萌的看板娘啦！

部分原创，参考博文: [博客美化]给你博客添加一个萌萌的看板娘吧。