本站之宝 - 二次元看板娘设置教程

手机版打开可能会无法显示，你可以将链接复制到浏览器，设置浏览器标识为电脑，就能看到二次元老婆了 

动态显示，而且这个插件还可以支持换装，换人物，点击一下她就会移动，还会说很多话哦！  刺激吧~

插件为 wordpress 插件，下载后解压直接上传到 wp-content/plugins 文件夹即可

插件文末下载

当然你也可以选择自己做，好处就是任务可以自己选择更多

自己搭建可以增加更多功能，还可以添加聊天

推荐一个 live2sd 模型的网站 YJLAugus

教程开始

1. 先在路径为 wp-content/themes/你的主题名称，文件夹的 header 中 head 标签中加嵌入如下代码，

<link rel="stylesheet" href="/live2d/css/live2d.css" target="_blank" rel="external nofollow" />

2. 接下来就是需要找一个合适的位置插入我们的看板娘元素，注意要在 body 里面代码如下

注意：不同的模型是需要修改的

<div id="landlord" style="left:5px;bottom:0px;">
<div class="message" style="opacity:0"></div>
<canvas id="live2d" width="480" height="640" 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_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 name="live2dBGM" value="音乐地址" type="hidden">
<input id="duType" value="douqilai,l2d_caihong" type="hidden">
</div>
</div>
<div id="open_live2d"> 召唤康纳</div>

3. 然后就是在页面的 body 标签结束前加上如下代码

<script type="text/javascript"src="https://apps.bdimg.com/libs/jquery/1.7.1/jquery.min.js"></script>
<script>
var message_Path = '/live2d/';//资源目录，如果目录不对请更改
var talkAPI = "";//如果有类似图灵机器人的聊天接口请填写接口路径
</script>
<script type="text/javascript" src="live2d/js/live2d.js"></script>
<script type="text/javascript" src="live2d/js/message.js"></script>

4. 如果你想添加聊天功能的话，可以到图灵机器人官网注册账号，然后获取 apikey，前面的接口路径改成 ：网站域名/tlapi.php 即可。下面是 PHP 代码，你需要自己新建一个 tlapi.php 文件到根目录

<?php
//获得聊天
$appkey = ''; //你的 appkey
$talkContent = ""; 
$info=addslashes($_POST['info']);
$userid=addslashes($_POST['userid']);
function send_post($url, $post_data) { 

$postdata = http_build_query($post_data); 
$options = array( 
'http' => array( 
'method' => 'POST', 
'header' => 'Content-type:application/x-www-form-urlencoded', 
'content' => $postdata, 
'timeout' => 15 * 60 // 超时时间 （单位:s）
) 
); 
$context = stream_context_create($options); 
$result = file_get_contents($url, false, $context); 

return $result; 
} 

//使用方法 
$post_data = array( 
'key' => $appkey, 
'info' => $info,
'userid' => $userid,
);
if($appkey==""){
$talkContent = '{"code":"500","text":"我还没学会聊天功能，快和站长联系吧！"}';
}
else{
$talkContent = send_post('http://www.tuling123.com/openapi/api', $post_data);
}
header('Content-type:text/json');
echo $talkContent;
?>

教程到此结束，这里再说一下如果你想修改提示的话可以修改提示的请修改 message.json 文件。

插件及教程搬自小游网

感谢小游大佬提供

插件下载地址 （蓝奏云）：

 反正滑稽就对了