夜间模式暗黑模式
字体
阴影
滤镜
圆角
主题色
【博客美化】给WordPress博客加入萌萌的看板娘

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.效果

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


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

暂无评论

发送评论 编辑评论


上一篇
下一篇
隐藏
变装