纯代码为WordPress添加emoji表情

其实，WordPress 早在 2.2.0 版本开始就已经支持表情图片了，关于这一点我们可以从 WordPress 的核心文件 wp-includes/functions.php 文件中找到答案（搜索 smilies_init 可以找到定义表情的函数），通过在文章或者评论区输入对应的编码既可以在前端显示出来相应的图片表情。然而对于国内的一些主题，我们会发现即使我们正确输入了表情编码也只能得到一个类似于“🙁”的标识，这是因为由于国内很多主题都使用了代码屏蔽掉了 WordPress 表情图片。

屏蔽WordPress自带表情相关代码

在这个 emoji 表情泛滥的时代里，屏蔽掉表情你是在开玩笑吗？还能不能愉快地玩耍了！然而屏蔽掉表情实则也是有原因的，WordPress 4.2版本之后 WordPress 自带的表情会调用 https://s.w.org/images/core/emoji/2.4/72×72/ 的图片进行渲染，而这个网址已经被封锁在墙外了，这意味着什么我想你已经很清楚了。关于相关的代码我们可以从 wp-includes/formatting.php 中找到，代码太长我就不贴了，大家可自行查看一下。网上对此一般给出的屏蔽代码是这个样子滴：

// WordPress Emoji Delete
remove_action( 'admin_print_scripts' , 'print_emoji_detection_script');
remove_action( 'admin_print_styles' , 'print_emoji_styles');
remove_action( 'wp_head' , 'print_emoji_detection_script', 7);
remove_action( 'wp_print_styles' , 'print_emoji_styles');
remove_filter( 'the_content_feed' , 'wp_staticize_emoji');
remove_filter( 'comment_text_rss' , 'wp_staticize_emoji');
remove_filter( 'wp_mail' , 'wp_staticize_emoji_for_email');

关于 WordPress 中的 emoji表情包源码，如果你想了解更多可查看 wp-includes 文件夹下的 formatting.php、functions.php以及 wp-includes/js 文件夹下的 twemoji.min.js、wp-emoji.js、wp-emoji.min.js、wp-emoji-loader.js、wp-emoji-loader.min.js、wp-emoji-release.min.js 等文件，由于牵涉的文件太多，我就不一一介绍了，大家感兴趣的自己看下吧。

emojis表情本地化

虽然知道了前因后果，我依然想要 emoji 表情怎么办？下面进入正题，说一说 WordPress 如何实现自定义 emoji 表情的添加。其实，原理很简单：如果上帝给我关上一扇门，那我们大不了拐个弯从窗户里爬出来 :evil: ，在主题的 functions.php 文件中添加如下代码：

// 添加自定义表情路径
add_filter('smilies_src','custom_qggemojis_src',1,10);
function custom_qggemojis_src ($img_src, $img, $siteurl){
    return get_stylesheet_directory_uri().'/diy/img/emojis/'.$img;
}
function qgg_init_smilies(){
    global $wpsmiliestrans;
    $wpsmiliestrans = array(
        ':mrgreen:' => 'icon_mrgreen.gif',
        ':neutral:' => 'icon_neutral.gif',
        ':twisted:' => 'icon_twisted.gif',
        ':arrow:' => 'icon_arrow.gif',
        ':shock:' => 'icon_surprised.gif',
        ':smile:' => 'icon_smile.gif',
        ':???:' => 'icon_confused.gif',
        ':cool:' => 'icon_cool.gif',
        ':evil:' => 'icon_evil.gif',
        ':grin:' => 'icon_biggrin.gif',
        ':idea:' => 'icon_idea.gif',
        ':oops:' => 'icon_oops.gif',
        ':razz:' => 'icon_razz.gif',
        ':roll:' => 'icon_rolleyes.gif',
        ':wink:' => 'icon_wink.gif',
        ':cry:' => 'icon_cry.gif',
        ':eek:' => 'icon_eek.gif',
        ':lol:' => 'icon_lol.gif',
        ':mad:' => 'icon_mad.gif',
        ':sad:' => 'icon_sad.gif',
        '8-)' => 'icon_cool.gif',
        '8-O' => 'icon_eek.gif',
        ':-(' => 'icon_sad.gif',
        ':-)' => 'icon_smile.gif',
        ':-?' => 'icon_confused.gif',
        ':-D' => 'icon_biggrin.gif',
        ':-P' => 'icon_razz.gif',
        ':-o' => 'icon_surprised.gif',
        ':-x' => 'icon_mad.gif',
        ':-|' => 'icon_neutral.gif',
        ';-)' => 'icon_wink.gif',
     // This one transformation breaks regular text with frequency.
     // '8)' => "\xf0\x9f\x98\x8e",
        '8O' => 'icon_eek.gif',
        ':(' => 'icon_sad.gif',
        ':)' => 'icon_smile.gif',
        ':?' => 'icon_confused.gif',
        ':D' => 'icon_biggrin.gif',
        ':P' => 'icon_razz.gif',
        ':o' => 'icon_surprised.gif',
        ':x' => 'icon_mad.gif',
        ':|' => 'icon_neutral.gif',
        ';)' => 'icon_wink.gif',
        ':!:' => 'icon_exclaim.gif',
        ':?:' => 'icon_question.gif',
     //自定义
        ':kissing:' => 'icon_kissing.gif',
        ':eating:' => 'icon_eating.gif',
        ':question:' => 'icon_question.gif',
        ':redface:' => 'icon_redface.gif',
        ':confused:' => 'icon_confused.gif',
    );
}
add_action( 'init', 'qgg_init_smilies', 5 );

原理很简单，原来的话我们需要通过WordPress核心代码将对应的表情符号（类似于’8-O’）解析成对应的表情图片，现在我们屏蔽原有功能后将表情符号对应到新得本地图片地址。注意将代码中 /diy/img/emojis/ 替换为你的表情图片路径，并且注意代码中表情图片的文件名（类似于icon_mrgreen.gif）与你的图片文件名一致。当然你也可以自定义更多图片表情。

评论区添加表情选择

通过上面的设置我们可以通过输入相应的表情符号（类似于’8-O’）在文章或者评论区来使用表情了，但是这么复杂的符号一般谁会记得呢？所以我们需要在评论区添加表情图片让用户了解到自己所使用的表情是哪个并自动输入对应的表情符号。新建一个 qgg-emojis.php 的文件，将下面的代码复制并保存至该文件中。

<script type="text/javascript" language="javascript"> 
/* <![CDATA[ */ 
function qggemoji(tag) { 
    var myField; 
    tag = ' ' + tag + ' '; 
    if (document.getElementById('comment') && document.getElementById('comment').type == 'textarea') { 
        myField = document.getElementById('comment'); 
    } else { 
        return false; 
    } 
    if (document.selection) { 
        myField.focus(); 
        sel = document.selection.createRange(); 
        sel.text = tag; 
        myField.focus(); 
    } else if (myField.selectionStart || myField.selectionStart == '0') { 
        var startPos = myField.selectionStart; 
        var endPos = myField.selectionEnd; 
        var cursorPos = endPos; 
        myField.value = myField.value.substring(0, startPos) 
        + tag 
        + myField.value.substring(endPos, myField.value.length); 
        cursorPos += tag.length; 
        myField.focus(); 
        myField.selectionStart = cursorPos; 
        myField.selectionEnd = cursorPos; 
    } else { 
        myField.value += tag; 
        myField.focus(); 
    } 
} 
/* ]]> */ 
</script> 
<div id="emojis_link" style="display: none;"> 
<a onclick="javascript:qggemoji(':mrgreen:')"><img src="<?php echo site_url(); ?>/wp-content/themes/dux/diy/img/emojis/icon_mrgreen.gif" title="嘿黑" alt="嘿黑" /></a>
<a onclick="javascript:qggemoji(':neutral:')"><img src="<?php echo site_url(); ?>/wp-content/themes/dux/diy/img/emojis/icon_neutral.gif" title="沉默" alt="沉默" /></a>
<a onclick="javascript:qggemoji(':twisted:')"><img src="<?php echo site_url(); ?>/wp-content/themes/dux/diy/img/emojis/icon_twisted.gif" title="扭曲" alt="扭曲" /></a>
<a onclick="javascript:qggemoji(':arrow:')"><img src="<?php echo site_url(); ?>/wp-content/themes/dux/diy/img/emojis/icon_arrow.gif" title="箭头" alt="箭头" /></a>
<a onclick="javascript:qggemoji(':shock:')"><img src="<?php echo site_url(); ?>/wp-content/themes/dux/diy/img/emojis/icon_surprised.gif" title="震惊" alt="震惊" /></a>
<a onclick="javascript:qggemoji(':smile:')"><img src="<?php echo site_url(); ?>/wp-content/themes/dux/diy/img/emojis/icon_smile.gif" title="微笑" alt="微笑" /></a>
<a onclick="javascript:qggemoji(':confused:')"><img src="<?php echo site_url(); ?>/wp-content/themes/dux/diy/img/emojis/icon_confused.gif" title="纠结" alt="纠结" /></a>
<a onclick="javascript:qggemoji(':cool:')"><img src="<?php echo site_url(); ?>/wp-content/themes/dux/diy/img/emojis/icon_cool.gif" title="酷" alt="酷" /></a> 
<a onclick="javascript:qggemoji(':evil:')"><img src="<?php echo site_url(); ?>/wp-content/themes/dux/diy/img/emojis/icon_evil.gif" title="邪恶" alt="邪恶" /></a>
<a onclick="javascript:qggemoji(':grin:')"><img src="<?php echo site_url(); ?>/wp-content/themes/dux/diy/img/emojis/icon_biggrin.gif" title="大笑" alt="大笑" /></a>
<a onclick="javascript:qggemoji(':idea:')"><img src="<?php echo site_url(); ?>/wp-content/themes/dux/diy/img/emojis/icon_idea.gif" title="想法" alt="想法" /></a>
<a onclick="javascript:qggemoji(':oops:')"><img src="<?php echo site_url(); ?>/wp-content/themes/dux/diy/img/emojis/icon_oops.gif" title="囧" alt="囧" /></a> 
<a onclick="javascript:qggemoji(':razz:')"><img src="<?php echo site_url(); ?>/wp-content/themes/dux/diy/img/emojis/icon_razz.gif" title="鼓掌" alt="鼓掌" /></a>
<a onclick="javascript:qggemoji(':roll:')"><img src="<?php echo site_url(); ?>/wp-content/themes/dux/diy/img/emojis/icon_rolleyes.gif" title="白眼" alt="白眼" /></a>
<a onclick="javascript:qggemoji(':wink:')"><img src="<?php echo site_url(); ?>/wp-content/themes/dux/diy/img/emojis/icon_wink.gif" title="眨眼" alt="眨眼" /></a>
<a onclick="javascript:qggemoji(':cry:')"><img src="<?php echo site_url(); ?>/wp-content/themes/dux/diy/img/emojis/icon_cry.gif" title="大哭" alt="大哭" /></a> 
<a onclick="javascript:qggemoji(':eek:')"><img src="<?php echo site_url(); ?>/wp-content/themes/dux/diy/img/emojis/icon_eek.gif" title="舔舌" alt="舔舌" /></a>
<a onclick="javascript:qggemoji(':lol:')"><img src="<?php echo site_url(); ?>/wp-content/themes/dux/diy/img/emojis/icon_lol.gif" title="色" alt="色" /></a>
<a onclick="javascript:qggemoji(':mad:')"><img src="<?php echo site_url(); ?>/wp-content/themes/dux/diy/img/emojis/icon_mad.gif" title="愤怒" alt="愤怒" /></a>
<a onclick="javascript:qggemoji(':sad:')"><img src="<?php echo site_url(); ?>/wp-content/themes/dux/diy/img/emojis/icon_sad.gif" title="伤心" alt="伤心" /></a> 
<a onclick="javascript:qggemoji(':question:')"><img src="<?php echo site_url(); ?>/wp-content/themes/dux/diy/img/emojis/icon_question.gif" title="疑问" alt="疑问" /></a>
<a onclick="javascript:qggemoji(':kissing:')"><img src="<?php echo site_url(); ?>/wp-content/themes/dux/diy/img/emojis/icon_kissing.gif" title="亲亲" alt="亲亲" /></a>
<a onclick="javascript:qggemoji(':eating:')"><img src="<?php echo site_url(); ?>/wp-content/themes/dux/diy/img/emojis/icon_eating.gif" title="吃饭" alt="吃饭" /></a>
<a onclick="javascript:qggemoji(':redface:')"><img src="<?php echo site_url(); ?>/wp-content/themes/dux/diy/img/emojis/icon_redface.gif" title="害羞" alt="害羞" /></a>

</div>

将新建好的 qgg-emojis.php 文件丢到你主题下，然后我们打开主题文件夹下的 comments.php ，通过以下代码引入 qgg-emojis.php 文件即可，至于位置大家自行调整。

 <!--评论表情-->
<script>
$(document).ready(function () { 
    $("#qgg_emojis").click(function(){ 
        $("#emojis_link").toggle(500);
        if(document.getElementById('qgg_emojis').style.color == ''){
            $("#qgg_emojis").attr('style', 'color:#3cb4f0');
        }else{
            $("#qgg_emojis").attr('style', 'color:;');
        }
    });
});
</script>
<span data-type="comment-insert-smilie" id="qgg_emojis" class="qgg_comment_tags" title="表情"><i class="fa fa-smile-o"></i><?php include(TEMPLATEPATH . '/diy/qgg-emojis.php'); ?></span>

JS代码是我用来设置弹窗的，注意将 /diy/qgg-emojis.php 修改为你放置文件的位置。DUX主题的话在  comments.php  文件中应该有一句注释掉的代码如下：

<!-- <span data-type="comment-insert-smilie" class="muted comt-smilie"><i class="icon-thumbs-up icon12"></i> 表情</span> -->

直接将其替换即可。

CSS样式美化

最后我们用CSS代码美化一下：

/** 评论表情样式 **/
.article-content img.wp-smiley {display: inline-block;}

.qgg_comment_tags{
    line-height:36px;
    margin:5px;
    padding:3px;
    color:#b9babb;
    font-size:24px;
}

#emojis_link{
    margin: 3px;
    padding: 5px;
    line-height:24px;
    width: auto;
    height: auto;
    background: #fbfbfb;
    border: 1px solid #ccd4d9;
    border-radius: 3px;
    position: absolute;
    z-index: 999;
}

CSS样式可能并不适用于你的主题，这个的话大家自行调整一下吧。

注：代码大部分来自网络，出处不详，因为自己在实际设置中发现代码总是缺胳膊少腿的，综合各代码后又稍作了些修改才成功的。