颜文字是一种神奇的文字，它仅仅用几个符号，就能表现出很多表情，让人一看就懂。

很多输入法已经支持颜文字的输入了，但是，博主在用的微软输入法却迟迟不肯加入颜文字（PS：其实还是有的，但是非常少）。本来我们还可以用微软输入法的 `Z 快捷键来输入，但是…不支持符号啊我摔(╯°口°)╯(┴—┴

这里博主介绍如何不用插件，不修改原文件，只修改主题文件就为 WordPress 的 TinyMCE 编辑器添加颜文字按钮 (｀・ω・´)

演示效果
演示效果

TinyMCE 编辑器是 WordPress 默认的富文本编辑器，如果你没有换成其他编辑器的话，只需要添加几段代码和一个 js 文件就能做到和博主一样的效果。

 

首先，我们需要编辑当前主题的 functions.php 文件。

<?php
add_action( 'init', 'clrs_add_new_mce_buttons' );
// 上面的函数名要和下面的函数名匹配

function clrs_add_new_mce_buttons () {
    // 判断用户是否有使用编辑器的权限
    if ( ! current_user_can( 'edit_posts' ) && ! current_user_can( 'edit_pages' ) ) {
        return;
    }

    // 判断用户是否使用可视化编辑器
    if ( get_user_option( 'rich_editing' ) === 'true' ) {
        add_filter( 'mce_external_plugins', 'clrs_add_mce_plugin' );
        add_filter( 'mce_buttons', 'clrs_mce_register_buttons' );
        // 上面两处的函数名也要和下面的匹配
    }

    // 加载可视化编辑器外部CSS文件
    function clrs_load_mce_out_style () {
        wp_enqueue_style( 'mce-style', get_template_directory_uri() . '/editor.css' );
        // 该样式文件用于显示dashicon图标
    }
    add_action( 'admin_enqueue_scripts', 'clrs_load_mce_out_style' );
}

function clrs_mce_register_buttons ( $buttons ) {
    array_push( $buttons, "facial" );
    // 若想添加多个按钮，就多几个array_push
    return $buttons;
}

function clrs_add_mce_plugin ( $plugin_array ) {
    $plugin_array['facial'] = get_stylesheet_directory_uri() . '/js/facial/plugin.min.js';
    // 颜文字按钮的js路径，博主这里是放在了主题文件夹里，可以修改js的路径
    // $plugin_array['mylink'] = plugins_url( '/plugin.js', __FILE__ );
    // mylink按钮的js路径，默认地址为\wp-includes\js\tinymce\plugins\
    return $plugin_array;
}

这样我们就把 functions.php 编辑完了，接下来我们需要编辑 js 文件。

 

博主这里 js 文件路径是 /主题/js/facial/plugin.min.js

更新：由于博主对 TinyMCE 编辑器不是很懂，不过经过博主下午的奋斗，进一步缩小了 plugin.min.js 的大小，并且更容易定制自己的颜文字包。js 可以用 js 压缩工具把 js 文件压缩为 min.js，体积没减少多少(´･_･`)，本来就不大了嘛╮(￣▽￣)╭

现在可以把颜文字添加在第一行 facial 的后面，颜文字间用英文逗号隔开。但是注意颜文字里不要有英文逗号，不然会出错。

但是打开的窗口的高度没办法自动增加，所以还需要使用者手动增加打开的窗口的高度。

其实是我实在搞不定了，重写太麻烦，能用就好了(〜￣△￣)〜

若您有更好的解决办法，请联系我，谢谢。

也可以通过下面的方法自己写属于自己的按钮，只需要把里面的 facial 换成你想用的名称就好了（￣▽￣）

(function () {
    var facial = '(⌒▽⌒),（￣▽￣）,(=・ω・=),(｀・ω・´),(〜￣△￣)〜,(･∀･),(°∀°)ﾉ,(￣3￣),╮(￣▽￣)╭,( ´_ゝ｀),←_←,→_→,(;¬_¬),("▔□▔)/,(ﾟДﾟ≡ﾟдﾟ)!?,Σ(ﾟдﾟ;),Σ( ￣□￣||),(´；ω；`),（/TДT)/,(^・ω・^ ),(｡･ω･｡),(●￣(ｴ)￣●),ε=ε=(ノ≧∇≦)ノ,(´･_･`),(-_-#),（￣へ￣）,(￣ε(#￣) Σ,ヽ(`Д´)ﾉ,(╯°口°)╯(┴—┴,（#-_-)┯━┯,_(:3」∠)_,(笑),(汗),(泣),(苦笑)';

    var facials = facial.split(","),
        str = '[';

    for (var i = 0; i < facials.length; i++) {
        str += "{ text: '" + facials[i] + "', style: 'float: left; margin: 3px;', onclick: function () { e.insertContent(this.text()); e.windowManager.close(); } },";
    }
    str = str.substring(0, str.length - 1) + ']';

    tinymce.PluginManager.add('facial', function (e, url) {
        var obj = eval('(' + str + ')');
        e.addButton('facial', {
            title: '(・ω・ )颜文字',
            icon: 'icon dashicons-smiley',
            type: 'button',
            onclick: function () {
                e.windowManager.open({
                    title: '(・ω・ )颜文字',
                    width: 700,
                    height: 220,
                    buttons: [{text: '取消', onclick: 'close'}],
                    body: [{
                        type: 'buttongroup',
                        items: obj
                    }]
                });
            }
        });
    });
})();

上面是未压缩版，下面是压缩版 js：

(function(){var facial='(⌒▽⌒),（￣▽￣）,(=・ω・=),(｀・ω・´),(〜￣△￣)〜,(･∀･),(°∀°)ﾉ,(￣3￣),╮(￣▽￣)╭,( ´_ゝ｀),←_←,→_→,(;¬_¬),("▔□▔)/,(ﾟДﾟ≡ﾟдﾟ)!?,Σ(ﾟдﾟ;),Σ( ￣□￣||),(´；ω；`),（/TДT)/,(^・ω・^ ),(｡･ω･｡),(●￣(ｴ)￣●),ε=ε=(ノ≧∇≦)ノ,(´･_･`),(-_-#),（￣へ￣）,(￣ε(#￣) Σ,ヽ(`Д´)ﾉ,(╯°口°)╯(┴—┴,（#-_-)┯━┯,_(:3」∠)_,(笑),(汗),(泣),(苦笑)';var facials=facial.split(","),str="[";for(var i=0;i<facials.length;i++){str+="{ text: '"+facials[i]+"', style: 'float: left; margin: 3px;', onclick: function () { e.insertContent(this.text()); e.windowManager.close(); } },"}str=str.substring(0,str.length-1)+"]";tinymce.PluginManager.add("facial",function(e,url){var obj=eval("("+str+")");e.addButton("facial",{title:"(・ω・ )颜文字",icon:"icon dashicons-smiley",type:"button",onclick:function(){e.windowManager.open({title:"(・ω・ )颜文字",width:700,height:220,buttons:[{text:"取消",onclick:"close"}],body:[{type:"buttongroup",items:obj}]})}})})})();

 

我们继续在当前主题目录下添加一个 editor.css 文件，用于显示图标和杀死虫子。

博主这里 css 文件路径是 /主题/editor.css

i.mce-i-icon { padding: 0; font: 400 20px/1 dashicons;  vertical-align: top; -webkit-font-smoothing: antialiased; -moz-osx-font-smoothing: grayscale; }
.mce-btn-group:not(:first-child) { border: none !important; }

 

就是这 3 个文件，你就可以添加一个颜文字按钮，随意地输入颜文字了(￣3￣)

 

参考链接：https://www.gavick.com/blog/wordpress-tinymce-custom-buttons/

原创文章，转载请以链接形式注明出处：https://blog.ttionya.com/article-793.html