纯代码给WordPress文章和评论添加OwO表情教程

2022-11-11 19:29:49 浏览数 (1)

之前折腾过一次评论表情，源码来自网络，可以说是非常强大，表情图标可以说是和手机系统一样充裕，但对于网站评论用就显得太过于杂乱了。 虽然所有的图标都分好类了，但不是12类别中的每个图标都会用到，增加用户发表评论的时间，对于网站的体验感来说是非常差的。

这两天本来想着精简一下，但修改源码时发现里面代码比较复杂，有些图标使用的还是背景定位来实现的，查找位置非常麻烦，有些代码根据正常删减竟然出现整个都不显示了，最后不得不放弃，也因此想着更换另外一种表情。

于是便找到了今天的主角OwO表情，其实上次也想着折腾过，但当时只想着搬运（复制/粘贴），没有仔细研究，以致于后面没有成功直接就放弃了。

OwO是一款可爱且实用的js表情符号插件。OwO表情符号插件可以在文本域或输入框中输入表情符号，它支持颜文字、Emoji、图片等，支持移动端，表情数据从一个可以自定义的json接口读取。

配置方法

下载OwO表情插件文件，并把OwO.json、OwO.min.css和OwO.min.js放入自己网站适当的位置。

下载地址见文末。

在页面中引入OwO.min.css和OwO.min.js文件。

html

代码语言：javascript复制
<link rel="stylesheet" href="OwO.min.css">
<script src="OwO.min.js"></script>

打开主题文件夹下面的comment.php文件，找到textarea并在class项加上OwO-textarea，同时加上表情符号容器。最后代码类似下面：

html

代码语言：javascript复制
<!-- 目标元素 -->
<textarea class="OwO-textarea"></textarea>
<!-- 表情符号容器 -->
<div class="OwO"></div>

初始化插件，在底部加上下面的代码。

js

代码语言：javascript复制
var OwO_demo = new OwO({
logo: 'OωO表情',
container: document.getElementsByClassName('OwO')[0],
target: document.getElementsByClassName('OwO-textarea')[0],
api: './OwO.json',
position: 'down',
width: '100%',
maxHeight: '250px'
});

参数说明如下：

  1. logo：按钮上的文本，默认为”OωO表情”
  2. container：OwO表情符号的容器
  3. target：OwO表情符号的目标textarea或input元素（注意与textarea的class名称一致）
  4. api：OwO表情符号使用的json数据（注意与自己的文件路径一致）
  5. position：OwO表情符号body的位置
  6. width：OwO表情符号body的宽度

注意事项

图片表情：位置及格式必须与上面js文件中的一致 至此表情基本配置完成并可以正常使用了，但发现发表文字表情都会在评论框上显示，而发表图片表情时就会显示图片的html代码:

html

代码语言：javascript复制
<img src="haha.gif">

这样在评论框不仅太占地方，而且也不美观。研究OwO.json时会发现显示的内容就是json文件中的icon数据。

json

代码语言：javascript复制
"文字": {
"type": "emoticon",
"container": [
{
"icon": "^_^",
"text": "xwz"
}
]
},
"Emoji": {
"type": "emoji",
"container": [
{
"icon": "


	


json javascript html https 网络安全 




	






	

 0 人点赞