兰陵の记事簿

Tech Otakus Save The World

兰陵

2017年5月14日

代码>

OwO表情二改&编辑器工具栏表情

好久没有管理优化我的博客了,我这人,一不折腾就是咸鱼,一折腾就像吃了炫迈。之前⑨BIE老说打开我博客电脑要咆哮阴险。本想直接换个主题的,还是算了,懒得重新改。于是我找原因,WP本身就繁重。我测试了一下,打开我的首页,php执行时间为0.8s,蛤?蛤!蛤!
原因就是Crayon Syntax Highlighter这款代码高亮插件。之前我在查看网页源代码的时候就发现,它会把要高亮的代码直接转成html语言。
别说你咋辣么zz,不用highlight.js。因为我以前站点的情况,用起来都差不多,而且Crayon Syntax Highlighter有很多功能。
我这么一关啊,php执行时间从0.8s变成了0.14s,MMP阴险
为了提高用户体验,我到泽泽的博客去看了一下 ,也许我早该用pjax了, :cry: 咸鱼啊。刚优化了执行时长,也为我全站pjax提供了基础 :idea: 。
在修改中我遇到了一个问题,也许只有我遇到吧。开始有pjax加载的趋势,然后完全刷新。怀疑人生 :roll: ???
这种时候,当然是RTFM啦。原因:超时重定向行为喷渣渣主机阴险,禁用

$(document).on('pjax:timeout', function(event) {
  // Prevent default timeout redirection behavior
  event.preventDefault()
})

我并没有配合instantclick使用,因为我这会请求过多出现错误,影响浏览统计等等问题。
用酷容和蓝大人体验了一下修改效果,,美滋滋 :idea:
从最开始我的博客就不怎么支持IE,IE简直。。。当然是原谅它啊滑稽。已对IE访问进行美化,能看能用了。
移动端我也进行了一些细节优化,体验比以前更好。
alu表情不能用了(不改了滑稽),还是用DIYgayOwO表情。我发现泽泽的,和之前多说的一样,点击表情输入的是对应文字。啊~我也要换。于是对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)}
}

效果如下:
编辑器OwO表情
如有问题,欢迎提问doge


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}
/*动画效果和之前相同*/

效果如下:
编辑器OwO表情
以上是根据森七站点的情况进行的修改,如有问题,欢迎提问doge

#一言#

来一发吐槽

  1. Pingback WordPress || 为你的主题添上表情功能 – w候人兮猗-世俗却正义

Title - Artist
0:00