好久没有管理优化我的博客了，我这人，一不折腾就是咸鱼，一折腾就像吃了炫迈。之前⑨BIE老说打开我博客电脑要咆哮。本想直接换个主题的，还是算了，懒得重新改。于是我找原因，WP本身就繁重。我测试了一下，打开我的首页，php执行时间为0.8s，蛤？蛤！蛤！原因就是Crayon Syntax Highlighter这款代码高亮插件。之前我在查看网页源代码的时候就发现，它会把要高亮的代码直接转成html语言。别说你咋辣么zz，不用highlight.js。因为我以前站点的情况，用起来都差不多，而且Crayon Syntax Highlighter有很多功能。我这么一关啊，php执行时间从0.8s变成了0.14s，MMP为了提高用户体验，我到泽泽的博客去看了一下 ，也许我早该用pjax了， 咸鱼啊。刚优化了执行时长，也为我全站pjax提供了基础 。在修改中我遇到了一个问题，也许只有我遇到吧。开始有pjax加载的趋势，然后完全刷新。怀疑人生 ？？？这种时候，当然是RTFM啦。原因：超时重定向行为渣渣主机，禁用$(document).on('pjax:timeout', function(event) {
// Prevent default timeout redirection behavior
event.preventDefault()
})
我并没有配合instantclick使用，因为我这会请求过多出现错误，影响浏览统计等等问题。用酷容和蓝大人体验了一下修改效果，，美滋滋 从最开始我的博客就不怎么支持IE，IE简直。。。当然是原谅它啊。已对IE访问进行美化，能看能用了。移动端我也进行了一些细节优化，体验比以前更好。alu表情不能用了（不改了），还是用DIYgay的OwO表情。我发现泽泽的，和之前多说的一样，点击表情输入的是对应文字。啊~我也要换。于是对OwO进行了二改，自己动手，丰衣足食。我的想法是，使用文字代替表情，但是在读取的时候，对于文字替换成表情图片。以下是我对OwO.min.js进行的修改。我有颜文字、阿鲁和泡泡表情，有文字重复的，于是我用@()和@[]进行区别，以下适合本站，其他酌情修改。"use strict";
function _classCallCheck(e, t) {
if (!(e instanceof t)) throw new TypeError("Cannot call a class as a function");
}
var _createClass = function() {
function e(e, t) {
for (var a = 0; a < t.length; a++) {
var s = t[a];
s.enumerable = s.enumerable || !1, s.configurable = !0, "value" in s && (s.writable = !0),
Object.defineProperty(e, s.key, s);
}
}
return function(t, a, s) {
return a && e(t.prototype, a), s && e(t, s), t;
};
}();
!function() {
var e = function() {
function e(t) {
var a = this;
_classCallCheck(this, e);
var s = {
logo:"OwO表情",
container:document.getElementsByClassName("OwO")[0],
target:document.getElementsByTagName("textarea")[0],
position:"down",
width:"100%",
maxHeight:"250px",
api:"https://api.anotherhome.net/OwO/OwO.json"
};
for (var n in s) s.hasOwnProperty(n) && !t.hasOwnProperty(n) && (t[n] = s[n]);
this.container = t.container, this.target = t.target, "up" === t.position && this.container.classList.add("OwO-up");
var i = new XMLHttpRequest();
i.onreadystatechange = function() {
4 === i.readyState && (i.status >= 200 && i.status < 300 || 304 === i.status ? (a.odata = JSON.parse(i.responseText),
a.init(t)) :console.log("OwO data request was unsuccessful: " + i.status));
}, i.open("get", t.api, !0), i.send(null);
}
return _createClass(e, [ {
key:"init",
value:function(e) {
var t = this;
this.area = e.target, this.packages = Object.keys(this.odata);
for (var a = '\n <div class="OwO-logo"><span>' + e.logo + '</span></div>\n <div class="OwO-body" style="width: ' + e.width + '">', s = 0; s < this.packages.length; s++) {
//此处开始，也可以根据类型(this.odata[this.packages[s]].type)来判断文字和图片
if(s==0){
//颜文字
a += '\n <ul class="OwO-items OwO-items-' + this.odata[this.packages[s]].type + '" style="max-height: ' + (parseInt(e.maxHeight) - 53 + "px") + ';">';
for (var n = this.odata[this.packages[s]].container, i = 0; i < n.length; i++) a += '\n <li class="OwO-item" title="' + n[i].text + '" data-OwO=\'' + n[i].icon + '\'>' + n[i].icon + "</li>";
a += "\n </ul>";
}
else if(s==1){
//阿鲁
a += '\n <ul class="OwO-items OwO-items-' + this.odata[this.packages[s]].type + '" style="max-height: ' + (parseInt(e.maxHeight) - 53 + "px") + ';">';
for (var n = this.odata[this.packages[s]].container, i = 0; i < n.length; i++) a += '\n <li class="OwO-item" title="' + n[i].text + '" data-OwO="@(' + n[i].text + ')">' + n[i].icon + "</li>";
a += "\n </ul>";
}
else {
//泡泡
a += '\n <ul class="OwO-items OwO-items-' + this.odata[this.packages[s]].type + '" style="max-height: ' + (parseInt(e.maxHeight) - 53 + "px") + ';">';
for (var n = this.odata[this.packages[s]].container, i = 0; i < n.length; i++) a += '\n <li class="OwO-item" title="' + n[i].text + '" data-OwO="@[' + n[i].text + ']">' + n[i].icon + "</li>";
a += "\n </ul>";
}
//此处结束
}
a += '\n <div class="OwO-bar">\n <ul class="OwO-packages">';
for (var o = 0; o < this.packages.length; o++) a += "\n <li><span>" + this.packages[o] + "</span></li>";
a += "\n </ul>\n </div>\n </div>\n ",
this.container.innerHTML = a, this.logo = this.container.getElementsByClassName("OwO-logo")[0],
this.logo.addEventListener("click", function() {
t.toggle();
}), this.container.getElementsByClassName("OwO-body")[0].addEventListener("click", function(e) {
var a = null;
if (e.target.classList.contains("OwO-item") ? a = e.target :e.target.parentNode.classList.contains("OwO-item") && (a = e.target.parentNode),
a) {
var s = t.area.selectionEnd, n = t.area.value;
//原a.innerHTML读取OwO-item里的html内容，修改为读取data-OwO属性值
t.area.value = n.slice(0, s) + a.getAttribute("data-OwO") + n.slice(s), t.area.focus(),
t.toggle();
}
}), this.packagesEle = this.container.getElementsByClassName("OwO-packages")[0];
for (var c = function(e) {
!function(a) {
t.packagesEle.children[e].addEventListener("click", function() {
t.tab(a);
});
}(e);
}, l = 0; l < this.packagesEle.children.length; l++) c(l);
this.tab(0);
}
}, {
key:"toggle",
value:function() {
this.container.classList.contains("OwO-open") ? this.container.classList.remove("OwO-open") :this.container.classList.add("OwO-open");
}
}, {
key:"tab",
value:function(e) {
var t = this.container.getElementsByClassName("OwO-items-show")[0];
t && t.classList.remove("OwO-items-show"), this.container.getElementsByClassName("OwO-items")[e].classList.add("OwO-items-show");
var a = this.container.getElementsByClassName("OwO-package-active")[0];
a && a.classList.remove("OwO-package-active"), this.packagesEle.getElementsByTagName("li")[e].classList.add("OwO-package-active");
}
} ]), e;
}();
"undefined" != typeof module && "undefined" != typeof module.exports ? module.exports = e :window.OwO = e;
}();
//# sourceMappingURL=OwO.min.js.map
然后在function.php里添加代码（顺便加@评论者，表情和@都不写入数据库）<?php
/**
*添加@评论者及替换OwO表情
*by 兰陵
*https://blog.thkira.com/
*/
function comment_add_owo($comment_text, $comment = '') {
if($comment->comment_parent > 0) {
$comment_text = '<a href="#comment-' . $comment->comment_parent . '" title="' .get_comment_author( $comment->comment_parent ) . '" style="color:#3f51b5;">@' .get_comment_author( $comment->comment_parent ) . '</a> ' . $comment_text;
}
$data_OwO = array(
'@(暗地观察)' => '<img src="/OwO/alu/暗地观察.png" alt="暗地观察" style="vertical-align: middle;">',
'@(便便)' => '<img src="/OwO/alu/便便.png" alt="便便" style="vertical-align: middle;">',
'@(不出所料)' => '<img src="/OwO/alu/不出所料.png" alt="不出所料" style="vertical-align: middle;">',
'@(不高兴)' => '<img src="/OwO/alu/不高兴.png" alt="不高兴" style="vertical-align: middle;">',
'@(不说话)' => '<img src="/OwO/alu/不说话.png" alt="不说话" style="vertical-align: middle;">',
'@(抽烟)' => '<img src="/OwO/alu/抽烟.png" alt="抽烟" style="vertical-align: middle;">',
'@(呲牙)' => '<img src="/OwO/alu/呲牙.png" alt="呲牙" style="vertical-align: middle;">',
'@(大囧)' => '<img src="/OwO/alu/大囧.png" alt="大囧" style="vertical-align: middle;">',
'@(得意)' => '<img src="/OwO/alu/得意.png" alt="得意" style="vertical-align: middle;">',
'@(愤怒)' => '<img src="/OwO/alu/愤怒.png" alt="愤怒" style="vertical-align: middle;">',
'@(尴尬)' => '<img src="/OwO/alu/尴尬.png" alt="尴尬" style="vertical-align: middle;">',
'@(高兴)' => '<img src="/OwO/alu/高兴.png" alt="高兴" style="vertical-align: middle;">',
'@(鼓掌)' => '<img src="/OwO/alu/鼓掌.png" alt="鼓掌" style="vertical-align: middle;">',
'@(观察)' => '<img src="/OwO/alu/观察.png" alt="观察" style="vertical-align: middle;">',
'@(害羞)' => '<img src="/OwO/alu/害羞.png" alt="害羞" style="vertical-align: middle;">',
'@(汗)' => '<img src="/OwO/alu/汗.png" alt="汗" style="vertical-align: middle;">',
'@(黑线)' => '<img src="/OwO/alu/黑线.png" alt="黑线" style="vertical-align: middle;">',
'@(欢呼)' => '<img src="/OwO/alu/欢呼.png" alt="欢呼" style="vertical-align: middle;">',
'@(击掌)' => '<img src="/OwO/alu/击掌.png" alt="击掌" style="vertical-align: middle;">',
'@(惊喜)' => '<img src="/OwO/alu/惊喜.png" alt="惊喜" style="vertical-align: middle;">',
'@(看不见)' => '<img src="/OwO/alu/看不见.png" alt="看不见" style="vertical-align: middle;">',
'@(看热闹)' => '<img src="/OwO/alu/看热闹.png" alt="看热闹" style="vertical-align: middle;">',
'@(抠鼻)' => '<img src="/OwO/alu/抠鼻.png" alt="抠鼻" style="vertical-align: middle;">',
'@(口水)' => '<img src="/OwO/alu/口水.png" alt="口水" style="vertical-align: middle;">',
'@(哭泣)' => '<img src="/OwO/alu/哭泣.png" alt="哭泣" style="vertical-align: middle;">',
'@(狂汗)' => '<img src="/OwO/alu/狂汗.png" alt="狂汗" style="vertical-align: middle;">',
'@(蜡烛)' => '<img src="/OwO/alu/蜡烛.png" alt="蜡烛" style="vertical-align: middle;">',
'@(脸红)' => '<img src="/OwO/alu/脸红.png" alt="脸红" style="vertical-align: middle;">',
'@(内伤)' => '<img src="/OwO/alu/内伤.png" alt="内伤" style="vertical-align: middle;">',
'@(喷水)' => '<img src="/OwO/alu/喷水.png" alt="喷水" style="vertical-align: middle;">',
'@(喷血)' => '<img src="/OwO/alu/喷血.png" alt="喷血" style="vertical-align: middle;">',
'@(期待)' => '<img src="/OwO/alu/期待.png" alt="期待" style="vertical-align: middle;">',
'@(亲亲)' => '<img src="/OwO/alu/亲亲.png" alt="亲亲" style="vertical-align: middle;">',
'@(傻笑)' => '<img src="/OwO/alu/傻笑.png" alt="傻笑" style="vertical-align: middle;">',
'@(扇耳光)' => '<img src="/OwO/alu/扇耳光.png" alt="扇耳光" style="vertical-align: middle;">',
'@(深思)' => '<img src="/OwO/alu/深思.png" alt="深思" style="vertical-align: middle;">',
'@(锁眉)' => '<img src="/OwO/alu/锁眉.png" alt="锁眉" style="vertical-align: middle;">',
'@(投降)' => '<img src="/OwO/alu/投降.png" alt="投降" style="vertical-align: middle;">',
'@(吐)' => '<img src="/OwO/alu/吐.png" alt="吐" style="vertical-align: middle;">',
'@(吐舌)' => '<img src="/OwO/alu/吐舌.png" alt="吐舌" style="vertical-align: middle;">',
'@(吐血倒地)' => '<img src="/OwO/alu/吐血倒地.png" alt="吐血倒地" style="vertical-align: middle;">',
'@(无奈)' => '<img src="/OwO/alu/无奈.png" alt="无奈" style="vertical-align: middle;">',
'@(无所谓)' => '<img src="/OwO/alu/无所谓.png" alt="无所谓" style="vertical-align: middle;">',
'@(无语)' => '<img src="/OwO/alu/无语.png" alt="无语" style="vertical-align: middle;">',
'@(喜极而泣)' => '<img src="/OwO/alu/喜极而泣.png" alt="喜极而泣" style="vertical-align: middle;">',
'@(献花)' => '<img src="/OwO/alu/献花.png" alt="献花" style="vertical-align: middle;">',
'@(献黄瓜)' => '<img src="/OwO/alu/献黄瓜.png" alt="献黄瓜" style="vertical-align: middle;">',
'@(想一想)' => '<img src="/OwO/alu/想一想.png" alt="想一想" style="vertical-align: middle;">',
'@(小怒)' => '<img src="/OwO/alu/小怒.png" alt="小怒" style="vertical-align: middle;">',
'@(小眼睛)' => '<img src="/OwO/alu/小眼睛.png" alt="小眼睛" style="vertical-align: middle;">',
'@(邪恶)' => '<img src="/OwO/alu/邪恶.png" alt="邪恶" style="vertical-align: middle;">',
'@(咽气)' => '<img src="/OwO/alu/咽气.png" alt="咽气" style="vertical-align: middle;">',
'@(阴暗)' => '<img src="/OwO/alu/阴暗.png" alt="阴暗" style="vertical-align: middle;">',
'@(赞一个)' => '<img src="/OwO/alu/赞一个.png" alt="赞一个" style="vertical-align: middle;">',
'@(长草)' => '<img src="/OwO/alu/长草.png" alt="长草" style="vertical-align: middle;">',
'@(中刀)' => '<img src="/OwO/alu/中刀.png" alt="中刀" style="vertical-align: middle;">',
'@(中枪)' => '<img src="/OwO/alu/中枪.png" alt="中枪" style="vertical-align: middle;">',
'@(中指)' => '<img src="/OwO/alu/中指.png" alt="中指" style="vertical-align: middle;">',
'@(肿包)' => '<img src="/OwO/alu/肿包.png" alt="肿包" style="vertical-align: middle;">',
'@(皱眉)' => '<img src="/OwO/alu/皱眉.png" alt="皱眉" style="vertical-align: middle;">',
'@(装大款)' => '<img src="/OwO/alu/装大款.png" alt="装大款" style="vertical-align: middle;">',
'@(坐等)' => '<img src="/OwO/alu/坐等.png" alt="坐等" style="vertical-align: middle;">',
'@[啊]' => '<img src="/OwO/paopao/啊.png" alt="啊" style="vertical-align: middle;">',
'@[爱心]' => '<img src="/OwO/paopao/爱心.png" alt="爱心" style="vertical-align: middle;">',
'@[鄙视]' => '<img src="/OwO/paopao/鄙视.png" alt="鄙视" style="vertical-align: middle;">',
'@[便便]' => '<img src="/OwO/paopao/便便.png" alt="便便" style="vertical-align: middle;">',
'@[不高兴]' => '<img src="/OwO/paopao/不高兴.png" alt="不高兴" style="vertical-align: middle;">',
'@[彩虹]' => '<img src="/OwO/paopao/彩虹.png" alt="彩虹" style="vertical-align: middle;">',
'@[茶杯]' => '<img src="/OwO/paopao/茶杯.png" alt="茶杯" style="vertical-align: middle;">',
'@[吃瓜]' => '<img src="/OwO/paopao/吃瓜.png" alt="吃瓜" style="vertical-align: middle;">',
'@[吃翔]' => '<img src="/OwO/paopao/吃翔.png" alt="吃翔" style="vertical-align: middle;">',
'@[大拇指]' => '<img src="/OwO/paopao/大拇指.png" alt="大拇指" style="vertical-align: middle;">',
'@[蛋糕]' => '<img src="/OwO/paopao/蛋糕.png" alt="蛋糕" style="vertical-align: middle;">',
'@[嘚瑟]' => '<img src="/OwO/paopao/嘚瑟.png" alt="嘚瑟" style="vertical-align: middle;">',
'@[灯泡]' => '<img src="/OwO/paopao/灯泡.png" alt="灯泡" style="vertical-align: middle;">',
'@[乖]' => '<img src="/OwO/paopao/乖.png" alt="乖" style="vertical-align: middle;">',
'@[哈哈]' => '<img src="/OwO/paopao/哈哈.png" alt="哈哈" style="vertical-align: middle;">',
'@[汗]' => '<img src="/OwO/paopao/汗.png" alt="汗" style="vertical-align: middle;">',
'@[呵呵]' => '<img src="/OwO/paopao/呵呵.png" alt="呵呵" style="vertical-align: middle;">',
'@[黑线]' => '<img src="/OwO/paopao/黑线.png" alt="黑线" style="vertical-align: middle;">',
'@[红领巾]' => '<img src="/OwO/paopao/红领巾.png" alt="红领巾" style="vertical-align: middle;">',
'@[呼]' => '<img src="/OwO/paopao/呼.png" alt="呼" style="vertical-align: middle;">',
'@[花心]' => '<img src="/OwO/paopao/花心.png" alt="花心" style="vertical-align: middle;">',
'@[滑稽]' => '<img src="/OwO/paopao/滑稽.png" alt="滑稽" style="vertical-align: middle;">',
'@[惊恐]' => '<img src="/OwO/paopao/惊恐.png" alt="惊恐" style="vertical-align: middle;">',
'@[惊哭]' => '<img src="/OwO/paopao/惊哭.png" alt="惊哭" style="vertical-align: middle;">',
'@[惊讶]' => '<img src="/OwO/paopao/惊讶.png" alt="惊讶" style="vertical-align: middle;">',
'@[开心]' => '<img src="/OwO/paopao/开心.png" alt="开心" style="vertical-align: middle;">',
'@[酷]' => '<img src="/OwO/paopao/酷.png" alt="酷" style="vertical-align: middle;">',
'@[狂汗]' => '<img src="/OwO/paopao/狂汗.png" alt="狂汗" style="vertical-align: middle;">',
'@[蜡烛]' => '<img src="/OwO/paopao/蜡烛.png" alt="蜡烛" style="vertical-align: middle;">',
'@[懒得理]' => '<img src="/OwO/paopao/懒得理.png" alt="懒得理" style="vertical-align: middle;">',
'@[泪]' => '<img src="/OwO/paopao/泪.png" alt="泪" style="vertical-align: middle;">',
'@[冷]' => '<img src="/OwO/paopao/冷.png" alt="冷" style="vertical-align: middle;">',
'@[礼物]' => '<img src="/OwO/paopao/礼物.png" alt="礼物" style="vertical-align: middle;">',
'@[玫瑰]' => '<img src="/OwO/paopao/玫瑰.png" alt="玫瑰" style="vertical-align: middle;">',
'@[勉强]' => '<img src="/OwO/paopao/勉强.png" alt="勉强" style="vertical-align: middle;">',
'@[你懂的]' => '<img src="/OwO/paopao/你懂的.png" alt="你懂的" style="vertical-align: middle;">',
'@[怒]' => '<img src="/OwO/paopao/怒.png" alt="怒" style="vertical-align: middle;">',
'@[喷]' => '<img src="/OwO/paopao/喷.png" alt="喷" style="vertical-align: middle;">',
'@[钱]' => '<img src="/OwO/paopao/钱.png" alt="钱" style="vertical-align: middle;">',
'@[钱币]' => '<img src="/OwO/paopao/钱币.png" alt="钱币" style="vertical-align: middle;">',
'@[弱]' => '<img src="/OwO/paopao/弱.png" alt="弱" style="vertical-align: middle;">',
'@[三道杠]' => '<img src="/OwO/paopao/三道杠.png" alt="三道杠" style="vertical-align: middle;">',
'@[沙发]' => '<img src="/OwO/paopao/沙发.png" alt="沙发" style="vertical-align: middle;">',
'@[生气]' => '<img src="/OwO/paopao/生气.png" alt="生气" style="vertical-align: middle;">',
'@[胜利]' => '<img src="/OwO/paopao/胜利.png" alt="胜利" style="vertical-align: middle;">',
'@[手纸]' => '<img src="/OwO/paopao/手纸.png" alt="手纸" style="vertical-align: middle;">',
'@[睡觉]' => '<img src="/OwO/paopao/睡觉.png" alt="睡觉" style="vertical-align: middle;">',
'@[酸爽]' => '<img src="/OwO/paopao/酸爽.png" alt="酸爽" style="vertical-align: middle;">',
'@[太开心]' => '<img src="/OwO/paopao/太开心.png" alt="太开心" style="vertical-align: middle;">',
'@[太阳]' => '<img src="/OwO/paopao/太阳.png" alt="太阳" style="vertical-align: middle;">',
'@[吐]' => '<img src="/OwO/paopao/吐.png" alt="吐" style="vertical-align: middle;">',
'@[吐舌]' => '<img src="/OwO/paopao/吐舌.png" alt="吐舌" style="vertical-align: middle;">',
'@[挖鼻]' => '<img src="/OwO/paopao/挖鼻.png" alt="挖鼻" style="vertical-align: middle;">',
'@[委屈]' => '<img src="/OwO/paopao/委屈.png" alt="委屈" style="vertical-align: middle;">',
'@[捂嘴笑]' => '<img src="/OwO/paopao/捂嘴笑.png" alt="捂嘴笑" style="vertical-align: middle;">',
'@[犀利]' => '<img src="/OwO/paopao/犀利.png" alt="犀利" style="vertical-align: middle;">',
'@[香蕉]' => '<img src="/OwO/paopao/香蕉.png" alt="香蕉" style="vertical-align: middle;">',
'@[小乖]' => '<img src="/OwO/paopao/小乖.png" alt="小乖" style="vertical-align: middle;">',
'@[小红脸]' => '<img src="/OwO/paopao/小红脸.png" alt="小红脸" style="vertical-align: middle;">',
'@[笑尿]' => '<img src="/OwO/paopao/笑尿.png" alt="笑尿" style="vertical-align: middle;">',
'@[笑眼]' => '<img src="/OwO/paopao/笑眼.png" alt="笑眼" style="vertical-align: middle;">',
'@[心碎]' => '<img src="/OwO/paopao/心碎.png" alt="心碎" style="vertical-align: middle;">',
'@[星星月亮]' => '<img src="/OwO/paopao/星星月亮.png" alt="星星月亮" style="vertical-align: middle;">',
'@[呀咩爹]' => '<img src="/OwO/paopao/呀咩爹.png" alt="呀咩爹" style="vertical-align: middle;">',
'@[药丸]' => '<img src="/OwO/paopao/药丸.png" alt="药丸" style="vertical-align: middle;">',
'@[咦]' => '<img src="/OwO/paopao/咦.png" alt="咦" style="vertical-align: middle;">',
'@[疑问]' => '<img src="/OwO/paopao/疑问.png" alt="疑问" style="vertical-align: middle;">',
'@[阴险]' => '<img src="/OwO/paopao/阴险.png" alt="阴险" style="vertical-align: middle;">',
'@[音乐]' => '<img src="/OwO/paopao/音乐.png" alt="音乐" style="vertical-align: middle;">',
'@[真棒]' => '<img src="/OwO/paopao/真棒.png" alt="真棒" style="vertical-align: middle;">',
'@[nico]' => '<img src="/OwO/paopao/nico.png" alt="nico" style="vertical-align: middle;">',
'@[OK]' => '<img src="/OwO/paopao/OK.png" alt="OK" style="vertical-align: middle;">',
'@[what]' => '<img src="/OwO/paopao/what.png" alt="what" style="vertical-align: middle;">'
);
return strtr($comment_text,$data_OwO);
}
add_filter( 'comment_text' , 'comment_add_owo', 20, 2);
?>
附上我使用的表情及OwO.json文件（OwO.json太长就不贴出来了）下载大概之后就会长期咸鱼了WordPress后台编辑器工具栏表情网友突然问道这个可不可以在编辑文章的时候添加表情，这个肯定是可以的。但是我对WP的钩子不太熟悉，于是我去查了下，实现了所需要的功能。首先在function.php里添加代码（这里把文字替换为表情输出，文章页面都可以）<?php
/**
*替换文章页面OwO表情
*by 兰陵
*https://blog.thkira.com/
*/
//文章替换表情
function content_OwO($content) {
$data_OwO = array(
//数组和上面相同，篇幅过长，我就不贴了，可以把两个函数合并
);
return strtr($content,$data_OwO);
}
add_filter( 'the_content' , 'content_OwO' );
function edit_OwO() {
//判断用户是否有编辑文章和页面的权限
if ( ! current_user_can('edit_posts') && ! current_user_can('edit_pages') ) {
return;
}
//判断用户是否使用可视化编辑器
if ( get_user_option('rich_editing') == 'true' ) {
add_filter( 'mce_external_plugins', 'add_plugin' );
add_filter( 'mce_buttons', 'register_OwO_button' );
}
}
add_action('init', 'edit_OwO');
function add_plugin( $plugin_array ) {
$plugin_array['OwO'] = get_template_directory_uri() . '/js/OwO_button.js'; //OwO按钮的js路径
return $plugin_array;
}
function register_OwO_button( $buttons ) {
array_push( $buttons, "OwO" );//添加一个OwO按钮
return $buttons;
}
?>
在编辑器中引入的js，OwO自带的css和js肯定是不能用的，于是我自己写了一个，不同的博客情况不同，仅供参考/*******************************************************************************
* @author 兰陵
* @site https://blog.thkira.com/
*******************************************************************************/
(function() {
loadCss("./css/OwO_button.css");//OwO按钮的css路径
function loadCss(url) {
var link = document.createElement("link");
link.type = "text/css";
link.rel = "stylesheet";
link.href = url;
document.getElementsByTagName("head")[0].appendChild(link);
}
function getHtml() {
var s = "";
var xmlhttp;
var url = "OwO.min.json";
if (window.XMLHttpRequest) xmlhttp = new XMLHttpRequest(); else xmlhttp = new ActiveXObject("Microsoft.XMLHTTP");
xmlhttp.onreadystatechange = function() {
if (xmlhttp.readyState == 4 && xmlhttp.status == 200) {
var json = JSON.parse(xmlhttp.responseText);
for (var i = 0; i < Object.keys(json).length; i++) {
if (i == 0) for (var a = 0, n = json[Object.keys(json)[i]].container; a < n.length; a++) {//颜文字
s += '<li title="' + n[a].text + '" data-OwO=\'' + n[a].icon + '\'>' + n[a].icon + "</li>";
} else if (i == 1) for (var a = 0, n = json[Object.keys(json)[i]].container; a < n.length; a++) {//阿鲁
s += '<li title="' + n[a].text + '" data-OwO="@(' + n[a].text + ')">' + n[a].icon + "</li>";
} else for (var a = 0, n = json[Object.keys(json)[i]].container; a < n.length; a++) {//泡泡
s += '<li title="' + n[a].text + '" data-OwO="@[' + n[a].text + ']">' + n[a].icon + "</li>";
}
}
}
};
xmlhttp.open("GET", url, false);//同步加载
xmlhttp.send();
return '<ul class="OwO-button">' + s + "</ul>";
}
tinymce.PluginManager.add("OwO", function(editor, url) {
editor.addButton("OwO", {
type:"panelbutton",
panel:{
classes:"smily",
role:"application",
autohide:true,
html:getHtml,
onclick:function(e) {
var linkElm = editor.dom.getParent(e.target, "li");
if (linkElm) {
editor.insertContent(linkElm.getAttribute("data-OwO"));
this.hide();
}
}
},
tooltip:"OwO表情",//为你的按钮取个漂亮的名字
image:"dogelv.png"//OwO按钮图标
});
});
})();
适合本站的样式：.OwO-button{-webkit-user-select:none;-moz-user-select:none;-ms-user-select:none;user-select:none;position:relative;width:320px!important;height:250px!important;padding:10px!important;margin:0!important;overflow-y:scroll}
.OwO-button li{list-style-type:none;float:left;background:#f7f7f7;padding:5px 10px;border-radius:5px;display:inline-block;font-size:12px;line-height:14px;margin:0 10px 12px 0;cursor:pointer;-webkit-transition:.3s;transition:.3s}
.OwO-button li:hover{background:#eee;box-shadow:0 2px 2px 0 rgba(0,0,0,.14),0 3px 1px -2px rgba(0,0,0,.2),0 1px 5px 0 rgba(0,0,0,.12);-webkit-animation:a 5s infinite ease-in-out;animation:a 5s infinite ease-in-out}
.OwO-button li img{max-width:100%}
@-webkit-keyframes a{2%{-webkit-transform:translateY(1.5px) rotate(1.5deg);transform:translateY(1.5px) rotate(1.5deg)}
4%{-webkit-transform:translateY(-1.5px) rotate(-.5deg);transform:translateY(-1.5px) rotate(-.5deg)}
6%{-webkit-transform:translateY(1.5px) rotate(-1.5deg);transform:translateY(1.5px) rotate(-1.5deg)}
8%{-webkit-transform:translateY(-1.5px) rotate(-1.5deg);transform:translateY(-1.5px) rotate(-1.5deg)}
10%{-webkit-transform:translateY(2.5px) rotate(1.5deg);transform:translateY(2.5px) rotate(1.5deg)}
12%{-webkit-transform:translateY(-.5px) rotate(1.5deg);transform:translateY(-.5px) rotate(1.5deg)}
14%{-webkit-transform:translateY(-1.5px) rotate(1.5deg);transform:translateY(-1.5px) rotate(1.5deg)}
16%{-webkit-transform:translateY(-.5px) rotate(-1.5deg);transform:translateY(-.5px) rotate(-1.5deg)}
18%{-webkit-transform:translateY(.5px) rotate(-1.5deg);transform:translateY(.5px) rotate(-1.5deg)}
20%{-webkit-transform:translateY(-1.5px) rotate(2.5deg);transform:translateY(-1.5px) rotate(2.5deg)}
22%{-webkit-transform:translateY(.5px) rotate(-1.5deg);transform:translateY(.5px) rotate(-1.5deg)}
24%{-webkit-transform:translateY(1.5px) rotate(1.5deg);transform:translateY(1.5px) rotate(1.5deg)}
26%{-webkit-transform:translateY(.5px) rotate(.5deg);transform:translateY(.5px) rotate(.5deg)}
28%{-webkit-transform:translateY(.5px) rotate(1.5deg);transform:translateY(.5px) rotate(1.5deg)}
30%{-webkit-transform:translateY(-.5px) rotate(2.5deg);transform:translateY(-.5px) rotate(2.5deg)}
32%,34%{-webkit-transform:translateY(1.5px) rotate(-.5deg);transform:translateY(1.5px) rotate(-.5deg)}
36%{-webkit-transform:translateY(-1.5px) rotate(2.5deg);transform:translateY(-1.5px) rotate(2.5deg)}
38%{-webkit-transform:translateY(1.5px) rotate(-1.5deg);transform:translateY(1.5px) rotate(-1.5deg)}
40%{-webkit-transform:translateY(-.5px) rotate(2.5deg);transform:translateY(-.5px) rotate(2.5deg)}
42%{-webkit-transform:translateY(2.5px) rotate(-1.5deg);transform:translateY(2.5px) rotate(-1.5deg)}
44%{-webkit-transform:translateY(1.5px) rotate(.5deg);transform:translateY(1.5px) rotate(.5deg)}
46%{-webkit-transform:translateY(-1.5px) rotate(2.5deg);transform:translateY(-1.5px) rotate(2.5deg)}
48%{-webkit-transform:translateY(-.5px) rotate(.5deg);transform:translateY(-.5px) rotate(.5deg)}
50%{-webkit-transform:translateY(.5px) rotate(.5deg);transform:translateY(.5px) rotate(.5deg)}
52%{-webkit-transform:translateY(2.5px) rotate(2.5deg);transform:translateY(2.5px) rotate(2.5deg)}
54%{-webkit-transform:translateY(-1.5px) rotate(1.5deg);transform:translateY(-1.5px) rotate(1.5deg)}
56%{-webkit-transform:translateY(2.5px) rotate(2.5deg);transform:translateY(2.5px) rotate(2.5deg)}
58%{-webkit-transform:translateY(.5px) rotate(2.5deg);transform:translateY(.5px) rotate(2.5deg)}
60%{-webkit-transform:translateY(2.5px) rotate(2.5deg);transform:translateY(2.5px) rotate(2.5deg)}
62%{-webkit-transform:translateY(-.5px) rotate(2.5deg);transform:translateY(-.5px) rotate(2.5deg)}
64%{-webkit-transform:translateY(-.5px) rotate(1.5deg);transform:translateY(-.5px) rotate(1.5deg)}
66%{-webkit-transform:translateY(1.5px) rotate(-.5deg);transform:translateY(1.5px) rotate(-.5deg)}
68%{-webkit-transform:translateY(-1.5px) rotate(-.5deg);transform:translateY(-1.5px) rotate(-.5deg)}
70%{-webkit-transform:translateY(1.5px) rotate(.5deg);transform:translateY(1.5px) rotate(.5deg)}
72%{-webkit-transform:translateY(2.5px) rotate(1.5deg);transform:translateY(2.5px) rotate(1.5deg)}
74%{-webkit-transform:translateY(-.5px) rotate(.5deg);transform:translateY(-.5px) rotate(.5deg)}
76%{-webkit-transform:translateY(-.5px) rotate(2.5deg);transform:translateY(-.5px) rotate(2.5deg)}
78%{-webkit-transform:translateY(-.5px) rotate(1.5deg);transform:translateY(-.5px) rotate(1.5deg)}
80%{-webkit-transform:translateY(1.5px) rotate(1.5deg);transform:translateY(1.5px) rotate(1.5deg)}
82%{-webkit-transform:translateY(-.5px) rotate(.5deg);transform:translateY(-.5px) rotate(.5deg)}
84%{-webkit-transform:translateY(1.5px) rotate(2.5deg);transform:translateY(1.5px) rotate(2.5deg)}
86%{-webkit-transform:translateY(-1.5px) rotate(-1.5deg);transform:translateY(-1.5px) rotate(-1.5deg)}
88%{-webkit-transform:translateY(-.5px) rotate(2.5deg);transform:translateY(-.5px) rotate(2.5deg)}
90%{-webkit-transform:translateY(2.5px) rotate(-.5deg);transform:translateY(2.5px) rotate(-.5deg)}
92%{-webkit-transform:translateY(.5px) rotate(-.5deg);transform:translateY(.5px) rotate(-.5deg)}
94%{-webkit-transform:translateY(2.5px) rotate(.5deg);transform:translateY(2.5px) rotate(.5deg)}
96%{-webkit-transform:translateY(-.5px) rotate(1.5deg);transform:translateY(-.5px) rotate(1.5deg)}
98%{-webkit-transform:translateY(-1.5px) rotate(-.5deg);transform:translateY(-1.5px) rotate(-.5deg)}
0%,to{-webkit-transform:translate(0) rotate(0);transform:translate(0) rotate(0)}
}
@keyframes a{2%{-webkit-transform:translateY(1.5px) rotate(1.5deg);transform:translateY(1.5px) rotate(1.5deg)}
4%{-webkit-transform:translateY(-1.5px) rotate(-.5deg);transform:translateY(-1.5px) rotate(-.5deg)}
6%{-webkit-transform:translateY(1.5px) rotate(-1.5deg);transform:translateY(1.5px) rotate(-1.5deg)}
8%{-webkit-transform:translateY(-1.5px) rotate(-1.5deg);transform:translateY(-1.5px) rotate(-1.5deg)}
10%{-webkit-transform:translateY(2.5px) rotate(1.5deg);transform:translateY(2.5px) rotate(1.5deg)}
12%{-webkit-transform:translateY(-.5px) rotate(1.5deg);transform:translateY(-.5px) rotate(1.5deg)}
14%{-webkit-transform:translateY(-1.5px) rotate(1.5deg);transform:translateY(-1.5px) rotate(1.5deg)}
16%{-webkit-transform:translateY(-.5px) rotate(-1.5deg);transform:translateY(-.5px) rotate(-1.5deg)}
18%{-webkit-transform:translateY(.5px) rotate(-1.5deg);transform:translateY(.5px) rotate(-1.5deg)}
20%{-webkit-transform:translateY(-1.5px) rotate(2.5deg);transform:translateY(-1.5px) rotate(2.5deg)}
22%{-webkit-transform:translateY(.5px) rotate(-1.5deg);transform:translateY(.5px) rotate(-1.5deg)}
24%{-webkit-transform:translateY(1.5px) rotate(1.5deg);transform:translateY(1.5px) rotate(1.5deg)}
26%{-webkit-transform:translateY(.5px) rotate(.5deg);transform:translateY(.5px) rotate(.5deg)}
28%{-webkit-transform:translateY(.5px) rotate(1.5deg);transform:translateY(.5px) rotate(1.5deg)}
30%{-webkit-transform:translateY(-.5px) rotate(2.5deg);transform:translateY(-.5px) rotate(2.5deg)}
32%,34%{-webkit-transform:translateY(1.5px) rotate(-.5deg);transform:translateY(1.5px) rotate(-.5deg)}
36%{-webkit-transform:translateY(-1.5px) rotate(2.5deg);transform:translateY(-1.5px) rotate(2.5deg)}
38%{-webkit-transform:translateY(1.5px) rotate(-1.5deg);transform:translateY(1.5px) rotate(-1.5deg)}
40%{-webkit-transform:translateY(-.5px) rotate(2.5deg);transform:translateY(-.5px) rotate(2.5deg)}
42%{-webkit-transform:translateY(2.5px) rotate(-1.5deg);transform:translateY(2.5px) rotate(-1.5deg)}
44%{-webkit-transform:translateY(1.5px) rotate(.5deg);transform:translateY(1.5px) rotate(.5deg)}
46%{-webkit-transform:translateY(-1.5px) rotate(2.5deg);transform:translateY(-1.5px) rotate(2.5deg)}
48%{-webkit-transform:translateY(-.5px) rotate(.5deg);transform:translateY(-.5px) rotate(.5deg)}
50%{-webkit-transform:translateY(.5px) rotate(.5deg);transform:translateY(.5px) rotate(.5deg)}
52%{-webkit-transform:translateY(2.5px) rotate(2.5deg);transform:translateY(2.5px) rotate(2.5deg)}
54%{-webkit-transform:translateY(-1.5px) rotate(1.5deg);transform:translateY(-1.5px) rotate(1.5deg)}
56%{-webkit-transform:translateY(2.5px) rotate(2.5deg);transform:translateY(2.5px) rotate(2.5deg)}
58%{-webkit-transform:translateY(.5px) rotate(2.5deg);transform:translateY(.5px) rotate(2.5deg)}
60%{-webkit-transform:translateY(2.5px) rotate(2.5deg);transform:translateY(2.5px) rotate(2.5deg)}
62%{-webkit-transform:translateY(-.5px) rotate(2.5deg);transform:translateY(-.5px) rotate(2.5deg)}
64%{-webkit-transform:translateY(-.5px) rotate(1.5deg);transform:translateY(-.5px) rotate(1.5deg)}
66%{-webkit-transform:translateY(1.5px) rotate(-.5deg);transform:translateY(1.5px) rotate(-.5deg)}
68%{-webkit-transform:translateY(-1.5px) rotate(-.5deg);transform:translateY(-1.5px) rotate(-.5deg)}
70%{-webkit-transform:translateY(1.5px) rotate(.5deg);transform:translateY(1.5px) rotate(.5deg)}
72%{-webkit-transform:translateY(2.5px) rotate(1.5deg);transform:translateY(2.5px) rotate(1.5deg)}
74%{-webkit-transform:translateY(-.5px) rotate(.5deg);transform:translateY(-.5px) rotate(.5deg)}
76%{-webkit-transform:translateY(-.5px) rotate(2.5deg);transform:translateY(-.5px) rotate(2.5deg)}
78%{-webkit-transform:translateY(-.5px) rotate(1.5deg);transform:translateY(-.5px) rotate(1.5deg)}
80%{-webkit-transform:translateY(1.5px) rotate(1.5deg);transform:translateY(1.5px) rotate(1.5deg)}
82%{-webkit-transform:translateY(-.5px) rotate(.5deg);transform:translateY(-.5px) rotate(.5deg)}
84%{-webkit-transform:translateY(1.5px) rotate(2.5deg);transform:translateY(1.5px) rotate(2.5deg)}
86%{-webkit-transform:translateY(-1.5px) rotate(-1.5deg);transform:translateY(-1.5px) rotate(-1.5deg)}
88%{-webkit-transform:translateY(-.5px) rotate(2.5deg);transform:translateY(-.5px) rotate(2.5deg)}
90%{-webkit-transform:translateY(2.5px) rotate(-.5deg);transform:translateY(2.5px) rotate(-.5deg)}
92%{-webkit-transform:translateY(.5px) rotate(-.5deg);transform:translateY(.5px) rotate(-.5deg)}
94%{-webkit-transform:translateY(2.5px) rotate(.5deg);transform:translateY(2.5px) rotate(.5deg)}
96%{-webkit-transform:translateY(-.5px) rotate(1.5deg);transform:translateY(-.5px) rotate(1.5deg)}
98%{-webkit-transform:translateY(-1.5px) rotate(-.5deg);transform:translateY(-1.5px) rotate(-.5deg)}
0%,to{-webkit-transform:translate(0) rotate(0);transform:translate(0) rotate(0)}
}
效果如下：如有问题，欢迎提问Emlog后台编辑器工具栏表情之前森七一直跑来骚扰我问我怎么弄，他使用的是Emlog。我也没用过啊，我也不知道钩子，自己去读文档！。。。最后还是我去弄了_(:з」∠)_根据他的情况，评论的替换我是直接在模板module.php里修改函数的。之后他一直闹要像我后台一样的添加表情_(:з」∠)_我没用过Emlog啊，要哭。我去看了一下，Emlog使用的是KindEditor编辑器，也就是说我无法像WP一样添加动作。于是我读了一下KindEditor的文档，了解怎么做了。如果像官方说的那样，添加到各个编辑页面，那岂不是要编辑很多文件，于是我直接对KindEditor进行了修改（其实，像官方说的那个添加插件，我没成功。而且直接修改还更方便一些）步骤1.添加plugins/owo/owo.js文件/*******************************************************************************
* @author 兰陵
* @site https://blog.thkira.com/
*******************************************************************************/
KindEditor.plugin("owo", function(K) {
var editor = this, name = "owo", wrapperDiv = "";
editor.clickToolbar(name, function() {
if (!wrapperDiv) wrapperDiv = getHtml();
var menu = editor.createMenu({
name:name,
width:320
});
menu.div.append(wrapperDiv);
var obj = document.getElementById("OwO-button");
obj.addEventListener("click", function(ev) {
var target = ev.target;
if (target.getAttribute("alt")) {
editor.insertHtml(target.outerHTML);
editor.hideMenu();
}
});
});
});
function getHtml() {
var s = "";
var xmlhttp;
var url = "./editor/plugins/owo/OwO.min.json";
if (window.XMLHttpRequest) xmlhttp = new XMLHttpRequest(); else xmlhttp = new ActiveXObject("Microsoft.XMLHTTP");
xmlhttp.onreadystatechange = function() {
if (xmlhttp.readyState == 4 && xmlhttp.status == 200) {
var json = JSON.parse(xmlhttp.responseText);
for (var i = 1; i < Object.keys(json).length; i++) {
for (var a = 0, n = json[Object.keys(json)[i]].container; a < n.length; a++) {
s += '<li title="' + n[a].text + '">' + n[a].icon + "</li>";
}
}
}
};
xmlhttp.open("GET", url, false);
xmlhttp.send();
return '<ul id="OwO-button">' + s + "</ul>";
}
2.定义语言修改lang/zh_CN.js，添加一组owo : 'owo表情'
3.向items数组里添加owo，定义工具栏图标及owo的CSS①修改kindeditor.js，在最后的items数组里把owo添加到你觉得合适的位置，并且引入css文件loadCss("editor/plugins/owo/owo.css");
function loadCss(url) {
var link = document.createElement("link");
link.type = "text/css";
link.rel = "stylesheet";
link.href = url;
document.getElementsByTagName("head")[0].appendChild(link);
}
②加载需要的css文件（示例）.ke-icon-owo{background-image:url('图标地址')!important;background-size:16px;width:16px;height:16px}
#OwO-button{-webkit-user-select:none;-moz-user-select:none;-ms-user-select:none;user-select:none;position:relative;width:360px!important;height:250px!important;padding:10px!important;margin:0!important;overflow-y:scroll}
#OwO-button li{list-style-type:none;float:left;background:#f7f7f7;padding:5px 10px;border-radius:5px;display:inline-block;font-size:12px;line-height:14px;margin:0 10px 12px 0;cursor:pointer;-webkit-transition:.3s;transition:.3s}
#OwO-button li:hover{background:#eee;box-shadow:0 2px 2px 0 rgba(0,0,0,.14),0 3px 1px -2px rgba(0,0,0,.2),0 1px 5px 0 rgba(0,0,0,.12);-webkit-animation:a 5s infinite ease-in-out;animation:a 5s infinite ease-in-out}
#OwO-button li img{max-width:100%}
.OwO-img{border:none;vertical-align:middle}
/*动画效果和之前相同*/
效果如下：以上是根据森七站点的情况进行的修改，如有问题，欢迎提问
评论
403条评论- 浮生未歇i Lv.1
Chrome 63.0.3239.132 
Windows 7 回复
试试好不好用
广东省深圳市 鹏博士长城宽带
rain_king Lv.1
Chrome 55.0.2883.87 
Windows 7 x64 Edition 回复
不错，支持
山东省青岛市 联通
xiaomo Lv.2
Firefox 61.0 
Windows 回复
下载链接挂了
广西 电信
xiaomo Lv.2
Firefox 61.0 
Windows 回复
不错，支持
广西 电信
gogome Lv.1
Firefox 62.0 
Windows 回复
为什么回复了也不行·。
江苏省盐城市 联通
相信 Lv.1
Firefox 62.0 
Windows 回复
这个可以有啊
江苏省盐城市 联通
林熙词 Lv.1
QQbrowser 
Android 6.0.1 回复
hjdjdj好的好的回电话
福建省厦门市 电信
prm612 Lv.1
Chrome 68.0.3440.84 
Windows 7 x64 Edition 回复
链接失效了，求重发
浙江省杭州市 电信
prm612 Lv.1
Chrome 68.0.3440.84 
Windows 7 x64 Edition 回复
666厉害了
浙江省杭州市 电信
百晓 Lv.1
uBrowser 8.7 
Windows 7 x64 Edition 回复
不错哦 看看
广东省深圳市 移动