【博客美化】给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.效果

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


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

暂无评论

发送评论 编辑评论


|´・ω・)ノ
ヾ(≧∇≦*)ゝ
(☆ω☆)
(╯‵□′)╯︵┴─┴
 ̄﹃ ̄
(/ω\)
∠( ᐛ 」∠)_
(๑•̀ㅁ•́ฅ)
→_→
୧(๑•̀⌄•́๑)૭
٩(ˊᗜˋ*)و
(ノ°ο°)ノ
(´இ皿இ`)
⌇●﹏●⌇
(ฅ´ω`ฅ)
(╯°A°)╯︵○○○
φ( ̄∇ ̄o)
ヾ(´・ ・`。)ノ"
( ง ᵒ̌皿ᵒ̌)ง⁼³₌₃
(ó﹏ò。)
Σ(っ °Д °;)っ
( ,,´・ω・)ノ"(´っω・`。)
╮(╯▽╰)╭
o(*////▽////*)q
>﹏<
( ๑´•ω•) "(ㆆᴗㆆ)
😂
😀
😅
😊
🙂
🙃
😌
😍
😘
😜
😝
😏
😒
🙄
😳
😡
😔
😫
😱
😭
💩
👻
🙌
🖕
👍
👫
👬
👭
🌚
🌝
🙈
💊
😶
🙏
🍦
🍉
😣
Source: github.com/k4yt3x/flowerhd
颜文字
Emoji
小恐龙
花!
上一篇
下一篇
隐藏
变装