给博客评论增加WOW表情

首页 > 云端折腾笔记 > php云端折腾笔记作者：沁雨寒 2017年9月2日 5:19 星期六热度：1627° 字号：小中大评论：0 条

时间：2017-9-2 5:19 热度：1627° 评论：0 条

原文来自森七

Sxx1314主要修改了一些bug增强了图片兼容性，因为在不少环境中中文名称都无法正常访问。

1.下载OwO表情包及css和js文件，都已整合在附件中。但是需要修改一个地方，就是把css里的图片链接修改为你自己博客链接或者图床链接。随你喜欢
2.上传后查看中文文件名是否显示完整，如果显示不完整或者乱码，请尝试解压后重新打包上传，现在已经全面支持所有环境，包括不支持中文的环境。

3.header.php引用到自己本地的js和css文件，也就是附件中OwO.min.js及OwO.min.css不会引用请参考下面的代码。

<link href="https://blog.sxx1314.com/OwO/OwO.min.css" rel="stylesheet" type="text/css" />
<script src="https://blog.sxx1314.com/OwO/OwO.min.js" type="text/javascript"></script>

4.插入以下代码到模版module.php最后一行

<?php
/**
*替换OwO表情
*by sxx1314 
*https://blog.sxx1314.com/
*/
function comment_add_owo($comment_text) {
$data_OwO = array(
'@(暗地观察)' => '<img src="/OwO/alu/1.png" alt="暗地观察" class="OwO-img">',
'@(便便)' => '<img src="/OwO/alu/2.png" alt="便便" class="OwO-img">',
'@(不出所料)' => '<img src="/OwO/alu/3.png" alt="不出所料" class="OwO-img">',
'@(不高兴)' => '<img src="/OwO/alu/4.png" alt="不高兴" class="OwO-img">',
'@(不说话)' => '<img src="/OwO/alu/5.png" alt="不说话" class="OwO-img">',
'@(抽烟)' => '<img src="/OwO/alu/6.png" alt="抽烟" class="OwO-img">',
'@(呲牙)' => '<img src="/OwO/alu/7.png" alt="呲牙" class="OwO-img">',
'@(大囧)' => '<img src="/OwO/alu/8.png" alt="大囧" class="OwO-img">',
'@(得意)' => '<img src="/OwO/alu/9.png" alt="得意" class="OwO-img">',
'@(愤怒)' => '<img src="/OwO/alu/10.png" alt="愤怒" class="OwO-img">',
'@(尴尬)' => '<img src="/OwO/alu/11.png" alt="尴尬" class="OwO-img">',
'@(高兴)' => '<img src="/OwO/alu/12.png" alt="高兴" class="OwO-img">',
'@(鼓掌)' => '<img src="/OwO/alu/13.png" alt="鼓掌" class="OwO-img">',
'@(观察)' => '<img src="/OwO/alu/14.png" alt="观察" class="OwO-img">',
'@(害羞)' => '<img src="/OwO/alu/15.png" alt="害羞" class="OwO-img">',
'@(汗)' => '<img src="/OwO/alu/16.png" alt="汗" class="OwO-img">',
'@(黑线)' => '<img src="/OwO/alu/17.png" alt="黑线" class="OwO-img">',
'@(欢呼)' => '<img src="/OwO/alu/18.png" alt="欢呼" class="OwO-img">',
'@(击掌)' => '<img src="/OwO/alu/19.png" alt="击掌" class="OwO-img">',
'@(惊喜)' => '<img src="/OwO/alu/20.png" alt="惊喜" class="OwO-img">',
'@(看不见)' => '<img src="/OwO/alu/21.png" alt="看不见" class="OwO-img">',
'@(看热闹)' => '<img src="/OwO/alu/22.png" alt="看热闹" class="OwO-img">',
'@(抠鼻)' => '<img src="/OwO/alu/23.png" alt="抠鼻" class="OwO-img">',
'@(口水)' => '<img src="/OwO/alu/24.png" alt="口水" class="OwO-img">',
'@(哭泣)' => '<img src="/OwO/alu/25.png" alt="哭泣" class="OwO-img">',
'@(狂汗)' => '<img src="/OwO/alu/26.png" alt="狂汗" class="OwO-img">',
'@(蜡烛)' => '<img src="/OwO/alu/27.png" alt="蜡烛" class="OwO-img">',
'@(脸红)' => '<img src="/OwO/alu/28.png" alt="脸红" class="OwO-img">',
'@(内伤)' => '<img src="/OwO/alu/29.png" alt="内伤" class="OwO-img">',
'@(喷水)' => '<img src="/OwO/alu/30.png" alt="喷水" class="OwO-img">',
'@(喷血)' => '<img src="/OwO/alu/31.png" alt="喷血" class="OwO-img">',
'@(期待)' => '<img src="/OwO/alu/32.png" alt="期待" class="OwO-img">',
'@(亲亲)' => '<img src="/OwO/alu/33.png" alt="亲亲" class="OwO-img">',
'@(傻笑)' => '<img src="/OwO/alu/34.png" alt="傻笑" class="OwO-img">',
'@(扇耳光)' => '<img src="/OwO/alu/35.png" alt="扇耳光" class="OwO-img">',
'@(深思)' => '<img src="/OwO/alu/36.png" alt="深思" class="OwO-img">',
'@(锁眉)' => '<img src="/OwO/alu/37.png" alt="锁眉" class="OwO-img">',
'@(投降)' => '<img src="/OwO/alu/38.png" alt="投降" class="OwO-img">',
'@(吐)' => '<img src="/OwO/alu/39.png" alt="吐" class="OwO-img">',
'@(吐舌)' => '<img src="/OwO/alu/40.png" alt="吐舌" class="OwO-img">',
'@(吐血倒地)' => '<img src="/OwO/alu/41.png" alt="吐血倒地" class="OwO-img">',
'@(无奈)' => '<img src="/OwO/alu/42.png" alt="无奈" class="OwO-img">',
'@(无所谓)' => '<img src="/OwO/alu/43.png" alt="无所谓" class="OwO-img">',
'@(无语)' => '<img src="/OwO/alu/44.png" alt="无语" class="OwO-img">',
'@(喜极而泣)' => '<img src="/OwO/alu/45.png" alt="喜极而泣" class="OwO-img">',
'@(献花)' => '<img src="/OwO/alu/46.png" alt="献花" class="OwO-img">',
'@(献黄瓜)' => '<img src="/OwO/alu/47.png" alt="献黄瓜" class="OwO-img">',
'@(想一想)' => '<img src="/OwO/alu/48.png" alt="想一想" class="OwO-img">',
'@(小怒)' => '<img src="/OwO/alu/49.png" alt="小怒" class="OwO-img">',
'@(小眼睛)' => '<img src="/OwO/alu/50.png" alt="小眼睛" class="OwO-img">',
'@(邪恶)' => '<img src="/OwO/alu/51.png" alt="邪恶" class="OwO-img">',
'@(咽气)' => '<img src="/OwO/alu/52.png" alt="咽气" class="OwO-img">',
'@(阴暗)' => '<img src="/OwO/alu/53.png" alt="阴暗" class="OwO-img">',
'@(赞一个)' => '<img src="/OwO/alu/54.png" alt="赞一个" class="OwO-img">',
'@(长草)' => '<img src="/OwO/alu/55.png" alt="长草" class="OwO-img">',
'@(中刀)' => '<img src="/OwO/alu/56.png" alt="中刀" class="OwO-img">',
'@(中枪)' => '<img src="/OwO/alu/57.png" alt="中枪" class="OwO-img">',
'@(中指)' => '<img src="/OwO/alu/58.png" alt="中指" class="OwO-img">',
'@(肿包)' => '<img src="/OwO/alu/59.png" alt="肿包" class="OwO-img">',
'@(皱眉)' => '<img src="/OwO/alu/60.png" alt="皱眉" class="OwO-img">',
'@(装大款)' => '<img src="/OwO/alu/61.png" alt="装大款" class="OwO-img">',
'@(坐等)' => '<img src="/OwO/alu/62.png" alt="坐等" class="OwO-img">',
'@[啊]' => '<img src="/OwO/paopao/1.png" alt="啊" class="OwO-img">',
'@[爱心]' => '<img src="/OwO/paopao/2.png" alt="爱心" class="OwO-img">',
'@[鄙视]' => '<img src="/OwO/paopao/3.png" alt="鄙视" class="OwO-img">',
'@[便便]' => '<img src="/OwO/paopao/4.png" alt="便便" class="OwO-img">',
'@[不高兴]' => '<img src="/OwO/paopao/5.png" alt="不高兴" class="OwO-img">',
'@[彩虹]' => '<img src="/OwO/paopao/6.png" alt="彩虹" class="OwO-img">',
'@[茶杯]' => '<img src="/OwO/paopao/7.png" alt="茶杯" class="OwO-img">',
'@[吃瓜]' => '<img src="/OwO/paopao/8.png" alt="吃瓜" class="OwO-img">',
'@[吃翔]' => '<img src="/OwO/paopao/9.png" alt="吃翔" class="OwO-img">',
'@[大拇指]' => '<img src="/OwO/paopao/10.png" alt="大拇指" class="OwO-img">',
'@[蛋糕]' => '<img src="/OwO/paopao/11.png" alt="蛋糕" class="OwO-img">',
'@[嘚瑟]' => '<img src="/OwO/paopao/12.png" alt="嘚瑟" class="OwO-img">',
'@[灯泡]' => '<img src="/OwO/paopao/13.png" alt="灯泡" class="OwO-img">',
'@[乖]' => '<img src="/OwO/paopao/14.png" alt="乖" class="OwO-img">',
'@[哈哈]' => '<img src="/OwO/paopao/15.png" alt="哈哈" class="OwO-img">',
'@[汗]' => '<img src="/OwO/paopao/16.png" alt="汗" class="OwO-img">',
'@[呵呵]' => '<img src="/OwO/paopao/17.png" alt="呵呵" class="OwO-img">',
'@[黑线]' => '<img src="/OwO/paopao/18.png" alt="黑线" class="OwO-img">',
'@[红领巾]' => '<img src="/OwO/paopao/19.png" alt="红领巾" class="OwO-img">',
'@[呼]' => '<img src="/OwO/paopao/20.png" alt="呼" class="OwO-img">',
'@[花心]' => '<img src="/OwO/paopao/21.png" alt="花心" class="OwO-img">',
'@[滑稽]' => '<img src="/OwO/paopao/22.png" alt="滑稽" class="OwO-img">',
'@[惊恐]' => '<img src="/OwO/paopao/23.png" alt="惊恐" class="OwO-img">',
'@[惊哭]' => '<img src="/OwO/paopao/24.png" alt="惊哭" class="OwO-img">',
'@[惊讶]' => '<img src="/OwO/paopao/25.png" alt="惊讶" class="OwO-img">',
'@[开心]' => '<img src="/OwO/paopao/26.png" alt="开心" class="OwO-img">',
'@[酷]' => '<img src="/OwO/paopao/27.png" alt="酷" class="OwO-img">',
'@[狂汗]' => '<img src="/OwO/paopao/28.png" alt="狂汗" class="OwO-img">',
'@[蜡烛]' => '<img src="/OwO/paopao/29.png" alt="蜡烛" class="OwO-img">',
'@[懒得理]' => '<img src="/OwO/paopao/30.png" alt="懒得理" class="OwO-img">',
'@[泪]' => '<img src="/OwO/paopao/31.png" alt="泪" class="OwO-img">',
'@[冷]' => '<img src="/OwO/paopao/32.png" alt="冷" class="OwO-img">',
'@[礼物]' => '<img src="/OwO/paopao/33.png" alt="礼物" class="OwO-img">',
'@[玫瑰]' => '<img src="/OwO/paopao/34.png" alt="玫瑰" class="OwO-img">',
'@[勉强]' => '<img src="/OwO/paopao/35.png" alt="勉强" class="OwO-img">',
'@[你懂的]' => '<img src="/OwO/paopao/36.png" alt="你懂的" class="OwO-img">',
'@[怒]' => '<img src="/OwO/paopao/37.png" alt="怒" class="OwO-img">',
'@[喷]' => '<img src="/OwO/paopao/38.png" alt="喷" class="OwO-img">',
'@[钱]' => '<img src="/OwO/paopao/39.png" alt="钱" class="OwO-img">',
'@[钱币]' => '<img src="/OwO/paopao/40.png" alt="钱币" class="OwO-img">',
'@[弱]' => '<img src="/OwO/paopao/41.png" alt="弱" class="OwO-img">',
'@[三道杠]' => '<img src="/OwO/paopao/42.png" alt="三道杠" class="OwO-img">',
'@[沙发]' => '<img src="/OwO/paopao/43.png" alt="沙发" class="OwO-img">',
'@[生气]' => '<img src="/OwO/paopao/44.png" alt="生气" class="OwO-img">',
'@[胜利]' => '<img src="/OwO/paopao/45.png" alt="胜利" class="OwO-img">',
'@[手纸]' => '<img src="/OwO/paopao/46.png" alt="手纸" class="OwO-img">',
'@[睡觉]' => '<img src="/OwO/paopao/47.png" alt="睡觉" class="OwO-img">',
'@[酸爽]' => '<img src="/OwO/paopao/48.png" alt="酸爽" class="OwO-img">',
'@[太开心]' => '<img src="/OwO/paopao/49.png" alt="太开心" class="OwO-img">',
'@[太阳]' => '<img src="/OwO/paopao/50.png" alt="太阳" class="OwO-img">',
'@[吐]' => '<img src="/OwO/paopao/51.png" alt="吐" class="OwO-img">',
'@[吐舌]' => '<img src="/OwO/paopao/52.png" alt="吐舌" class="OwO-img">',
'@[挖鼻]' => '<img src="/OwO/paopao/53.png" alt="挖鼻" class="OwO-img">',
'@[委屈]' => '<img src="/OwO/paopao/54.png" alt="委屈" class="OwO-img">',
'@[捂嘴笑]' => '<img src="/OwO/paopao/55.png" alt="捂嘴笑" class="OwO-img">',
'@[犀利]' => '<img src="/OwO/paopao/56.png" alt="犀利" class="OwO-img">',
'@[香蕉]' => '<img src="/OwO/paopao/57.png" alt="香蕉" class="OwO-img">',
'@[小乖]' => '<img src="/OwO/paopao/58.png" alt="小乖" class="OwO-img">',
'@[小红脸]' => '<img src="/OwO/paopao/59.png" alt="小红脸" class="OwO-img">',
'@[笑尿]' => '<img src="/OwO/paopao/60.png" alt="笑尿" class="OwO-img">',
'@[笑眼]' => '<img src="/OwO/paopao/61.png" alt="笑眼" class="OwO-img">',
'@[心碎]' => '<img src="/OwO/paopao/62.png" alt="心碎" class="OwO-img">',
'@[星星月亮]' => '<img src="/OwO/paopao/63.png" alt="星星月亮" class="OwO-img">',
'@[呀咩爹]' => '<img src="/OwO/paopao/64.png" alt="呀咩爹" class="OwO-img">',
'@[药丸]' => '<img src="/OwO/paopao/65.png" alt="药丸" class="OwO-img">',
'@[咦]' => '<img src="/OwO/paopao/66.png" alt="咦" class="OwO-img">',
'@[疑问]' => '<img src="/OwO/paopao/67.png" alt="疑问" class="OwO-img">',
'@[阴险]' => '<img src="/OwO/paopao/68.png" alt="阴险" class="OwO-img">',
'@[音乐]' => '<img src="/OwO/paopao/69.png" alt="音乐" class="OwO-img">',
'@[真棒]' => '<img src="/OwO/paopao/70.png" alt="真棒" class="OwO-img">',
'@[nico]' => '<img src="/OwO/paopao/nico.png" alt="nico" class="OwO-img">',
'@[OK]' => '<img src="/OwO/paopao/OK.png" alt="OK" class="OwO-img">',
'@[what]' => '<img src="/OwO/paopao/what.png" alt="what" class="OwO-img">',
'@[doge]' => '<img src="/OwO/doge.png" alt="doge" class="OwO-img">',
'@[原谅她]' => '<img src="/OwO/1.png" alt="原谅她" class="OwO-img">'
);
return strtr($comment_text,$data_OwO);
}
?>

5、再module.php文件中找到你的发表评论表单中<textarea代码，找不到的请参考代码

<?php endif; ?>
   <p><textarea name="comment" id="comment" rows="12" tabindex="4" class="OwO-textarea"></textarea></p>
   <div title="OwO" class="OwO"></div>
   <script>var OwO_demo = new OwO({
    logo: 'OωO表情',
    container: document.getElementsByClassName('OwO')[0],
    target: document.getElementsByClassName('OwO-textarea')[0],
    api: '/OwO/OwO.min.json',
    position: 'up',
    width: '100%',
    maxHeight: '250px'
   });</script>
   <div class="fbpl"><?php echo $verifyCode; ?> <input type="submit" id="comment_submit" value="发表评论" tabindex="6"><span id="top2"><a href="##top_banner" class="hint--left hint--bounce" data-hint="返回顶部"><img src="<?php echo TEMPLATE_URL; ?>images/top2.png"></a></span><div id="gaodu1"></div></div>
   <input type="hidden" name="pid" id="comment-pid" value="0" size="22" tabindex="1"/>

6.找到这段代码之后，在class中添加OwO-textarea代码，如果存在class请在最后一个值空一格添加 OwO-textarea 比如你的class中是这样的class="demo demo1"那么你只需要class="demo demo1 OwO-textarea"这样添加即可如果没有class值那么就创建一个，如上图，如下代码：
```
class="OwO-textarea"
```

7.更改class之后在后添加如下代码:

<div title="OwO" class="OwO"></div>
<script>var OwO_demo = new OwO({
logo: 'OωO表情',
container: document.getElementsByClassName('OwO')[0],
target: document.getElementsByClassName('OwO-textarea')[0],
api: '/OwO/OwO.min.json',
position: 'down',
width: '100%',
maxHeight: '250px'
});</script>

8.当这一切都已添加之后，你的评论框应该存在一个OwO表情的按钮，可以正常添加表情.在你的评论列表函数中找到echo $comment['content']（也就是输出评论内容）的代码，接着在echo $comment['content']改成echo comment_add_owo($comment['content'])，具体模版变通操作
```
<div class="comment-content"><?php echo comment_add_owo($comment['content']); ?></div>
```
9.教程到此为止应该可以正常评论添加表情，以及输出表情了，竟然再改的时候重定义向到自己的博客，以免出现cdn缓存导致等等错误，还需要随时刷新浏览器缓存。一步一步弄下去应该就能正常使用了。

提取密码：

以下是评论可见内容(未评论)

此处内容已隐藏，评论刷新一下可见！

下载地址：

文件名称：WOW表情文件

文件大小：2MB适用版本：

更新日期：20170902作者信息：sxx1314

点击下载