# 前言

该Live2D来自维基萌,作者是广树,原教程写的有点简略,在Sakura主题上安装与原教程略有不同。

# 正文

# 步骤一 下载源代码

链接:https://pan.baidu.com/s/14v3tNcrjKSGxZbuFNzc5RQ 密码:b0hc

解压到/wp-content/themes/Sakura下并重命名为Live2d。

最终Live2d文件夹下是这个样子的↓

这个是作者最后一次更新的Live2D看板娘。

# 步骤二 修改源代码

Live2D模型下载页面https://www.wikimoe.com/?post=158,可以按照自己喜欢的下载替换或者从网络上寻找。替换目录/live2d/model,记得替换原插件中关于模型的路径。

打开/live2d/js/message.js,找到https://sslapi.hitokoto.cn/修改成https://v1.hitokoto.cn/,否则将无法使用自言自语功能,然后打开/live2d/message.json,然后清空并用如下内容替换。

{
    "mouseover": [
        {
            "selector": "#showInfoBtn",
            "text": ["查看最新吐槽和站内信息"]
        },
		{
            "selector": "#showTalkBtn",
            "text": ["要和我聊天吗?"]
        },
		{
            "selector": "#hideButton",
            "text": ["要说再见了吗?"]
        },
		{
            "selector": "#musicButton",
            "text": ["给页面加点音乐吗?"]
        },
        {
            "selector": "#youduButton",
            "text": ["按钮有毒,癫痫患者不要开启!!!<br>点一下开启,再点一下可以关闭。"]
        },
        {
            "selector": "#huanzhuangButton",
            "text": ["要换一套衣服吗?"]
        },
		{
            "selector": ".post-title",
            "text": ["要看看《{text}》 么?"]
        },
        {
            "selector": ".pop-btn",
            "text": ["要来点舒缓的Music吗?"]
        },
        {
            "selector": ".searchbox",
            "text": ["在找什么东西呢,需要帮忙吗?"]
        }
    ],
    "click": [
        {
            "selector": "#landlord #live2d",
            "text": ["呐,你想变成什么颜色?", "如果是这样的话,那就从我的心中滚出去。","因为有以后,所以才有趣。", "如果因为害怕失败,而不去努力,那就不会有能够成功的人。", "要抹去懊悔,终究只有继续不断努力。"]
        }
    ]
}

# 修改Sakura主题

打开header.php,在<head></head>之间插入:

<?php if(!wp_is_mobile()){?>
<!--Live2D--><link rel="stylesheet" href="/wp-content/themes/Sakura/live2d/css/live2d.css" /><!--Code end-->
<?php }?>

注意核对路径!

保存,然后打开footer.php,在</div><!-- #page Pjax container-->下面插入:

	<?php 
		if(akina_option('general_disqus_plugin_support')){
			get_template_part('layouts/duoshuo');
		}else{
			comments_template('', true); 
		}
	?>
	</div><!-- #page Pjax container-->
	
	
	<?php	if(!wp_is_mobile()){?>
		<!--Live 2D 此处有wp_is_mobile()-->
<div id="landlord" style="left:5px;bottom:0px;">
    <div class="message" style="opacity:0"></div>
    <canvas id="live2d" width="500" height="560" class="live2d"></canvas>
    <div class="live_talk_input_body">
    	<div class="live_talk_input_name_body">
        	<input name="name" type="text" class="live_talk_name white_input" id="AIuserName" autocomplete="off" placeholder="你的名字" />
        </div>
        <div class="live_talk_input_text_body">
        	<input name="talk" type="text" class="live_talk_talk white_input" id="AIuserText" autocomplete="off" placeholder="要和我聊什么呀?"/>
            <button type="button" class="live_talk_send_btn" id="talk_send">发送</button>
        </div>
    </div>
    <input name="live_talk" id="live_talk" value="1" type="hidden" />
    <div class="live_ico_box">
    	<div class="live_ico_item type_info" id="showInfoBtn"></div>
        <div class="live_ico_item type_talk" id="showTalkBtn"></div>
        <div class="live_ico_item type_huanzhuang" id="huanzhuangButton"></div>
        <div class="live_ico_item type_music" id="musicButton"></div>
        <div class="live_ico_item type_youdu" id="youduButton"></div>
        <div class="live_ico_item type_quit" id="hideButton"></div>
        <input name="live_statu_val" id="live_statu_val" value="0" type="hidden" />
        <audio src="" style="display:none;" id="live2d_bgm" data-bgm="0" preload="none"></audio>
        <input id="duType" value="douqilai,l2d_caihong" type="hidden">
        <div class="live2d_weiyu_cache" style="display:none;">你好!</div>
        <div class="live2d_weiyu_cache" style="display:none;"><script>
  fetch('https://v1.hitokoto.cn')
    .then(response => response.json())
    .then(data => {
      const hitokoto = document.getElementById('hitokoto')
      hitokoto.innerText = data.hitokoto
    })
    .catch(console.error)
</script></div>
    </div>
</div>
<div id="open_live2d">召唤看板娘</div>
<script>
var message_Path = '/wp-content/themes/Sakura/live2d/';//资源目录,如果目录不对请更改
var talkAPI = "";//如果有类似图灵机器人的聊天接口请填写接口路径
</script>
<script type="text/javascript" src="/wp-content/themes/Sakura/live2d/js/live2d.js"></script>
<script type="text/javascript" src="/wp-content/themes/Sakura/live2d/js/message.js"></script>
<!--code end--><?php } ?>

注意不要在</div><!-- #page Pjax container-->上面插,因为看板娘的Pjax会失效(如果你开了的话),也不要写到<footer></footer>标签里面,这样会导致live2d挤在页脚而样式乱了。

保存即可,再次刷新即可看见看板娘了,注意刷新各种缓存,如果需要Live2D的对话功能,请参考https://www.wikimoe.com/?post=74


努力学习ing