下载插件

首先下载:PoiLive2d 安装并启用。

此时网站左下角应该就能显示看板娘了,但插件默认并不会在移动端显示。博主想要在移动端也显示,大概查看修改了一下,这里把方法步骤分享出来。

I.修改css文件

在网站后台——插件——插件编辑器中打开PoiLive2d,找到css文件下的live2d.css文件并打开,将原本的媒体查询注释或删除,添加下列代码:

@media (max-width: 860px) {
    #landlord {
        transform: scale(.8) translate(-30px,31px);
    }
}
@media (max-width: 560px){
	#landlord {
		transform: scale(.5) translate(-150px,125px);
	}
}

原本的媒体查询被博主删除不记得了,好像就一句display:none,在小屏幕下隐藏看板娘。添加的代码是为了在不同设备宽度为看板娘做缩放。但光这样只能实现缩放,插件在移动设备下默认是不加载资源的,也得修改。

II.修改php文件

同样在插件编辑器中找到main.php文件,将移动设备的判断注释或删除(总共三处修改)。

<?php
    defined('ABSPATH') or exit;
    add_action('wp_enqueue_scripts', 'live2d_scripts');
    function live2d_scripts()
    {
      //  if (!wp_is_mobile()) {
            wp_enqueue_style('live2d-base', LIVE2D_URL . '/live2d/css/live2d.css', array(), LIVE2D_VERSION, 'all');
            wp_enqueue_script('live2d-base', LIVE2D_URL . '/live2d/js/live2d.js', array(), LIVE2D_VERSION, true);
            wp_enqueue_script('live2d-message', LIVE2D_URL . '/live2d/js/message.js', array(), LIVE2D_VERSION, true);
            wp_enqueue_script('live2d-run', LIVE2D_URL . '/live2d/js/run_local.js', array(), LIVE2D_VERSION, true);
     //   }
    }

    add_action('wp_head', 'live2d_head');
    function live2d_head()
    {
       // if (!wp_is_mobile()) {
            $nohitokoto = "var nohitokoto = false;";
            $nospecialtip = "var nospecialtip = false;";
            echo '<script type="text/javascript">var live2d_Path = "' . LIVE2D_URL . '/live2d/model/pio/";var message_Path = "' . LIVE2D_URL . '/live2d/";var home_Path = "' . home_url() . '/";'.$nohitokoto.$nospecialtip.'</script>';
      //  }
    }

    add_action('wp_footer', 'live2d_footer');
    function live2d_footer()
    {
        //if (!wp_is_mobile()) {
            ?>
            <div id="landlord">
                <div class="message" style="opacity:0"></div>
                <canvas id="live2d" width="280" height="250" class="live2d" style="opacity:0;"></canvas>
                <div class="hide-button">隐藏</div>
                <div class="switch-button">变装</div>
            </div>
        <?php
        //}
    }

wordpress函数wp_is_mobile()是wordpress 3.4.0版本增加的一个内置函数,wp_is_mobile()函数的作用是检测当前浏览器是否运行在智能手机、平板电脑等移动设备上,返回一个布尔值。

大功告成!这样看板娘就能在移动设备上显示了!