WordPress已经自带了一些表情，它们存在于wp-includes/images/smilies文件夹下，只不过默认是“隐藏”的。但是又是不是觉得纯文字的博客很单调无味？今天的教程就是教你非插件版如何在后台编辑器添加表情，并在前端博文中显示~  添加表情后的效果如下图：

如果你也喜欢这套贴吧滑稽表情，猛戳下载连接：WordPress贴吧表情bao包。当然，你也可以自己制作自己喜欢的表情，png，gif都可以~

后台编辑器显示表情

下载好资源后，就需要将这些表情关联到文章编辑器中，在functions.php中加入以下代码：

// /*-----------------------------------------------------------------------------------*/	
// /* 添加表情对应数组
// /*-----------------------------------------------------------------------------------*/
function smilies_reset() {
    global $wpsmiliestrans;
    $wpsmiliestrans = array(':mrgreen:' = >'mrgreen.png', ':exclaim:' = >'exclaim.png', ':neutral:' = >'neutral.png', ':twisted:' = >'twisted.png', ':arrow:' = >'arrow.png', ':eek:' = >'eek.png', ':smile:' = >'smile.png', ':confused:' = >'confused.png', ':cool:' = >'cool.png', ':evil:' = >'evil.png', ':biggrin:' = >'biggrin.png', ':idea:' = >'idea.png', ':redface:' = >'redface.png', ':razz:' = >'razz.png', ':rolleyes:' = >'rolleyes.png', ':wink:' = >'wink.png', ':cry:' = >'cry.png', ':surprised:' = >'surprised.png', ':lol:' = >'lol.png', ':mad:' = >'mad.png', ':drooling:' = >'drooling.png', ':cowboy:' = >'cowboy.png', ':persevering:' = >'persevering.png', ':symbols:' = >'symbols.png', ':shit:' = >'shit.png', );
}
smilies_reset();

// /*-----------------------------------------------------------------------------------*/	
// /* WordPress后台编辑器插入表情
// /*-----------------------------------------------------------------------------------*/
function loper_get_wpsmiliestrans() {
    global $wpsmiliestrans;
    $wpsmilies = array_unique($wpsmiliestrans);
    foreach($wpsmilies as $alt = >$src_path) {
        $output. = '<a class="add-smily" data-smilies="'.$alt.'"><img class="wp-smiley" 
src="'.get_bloginfo('wpurl').'/wp-includes/images/smilies/'.rtrim($src_path, "png").'png" /></a>';
    }
    return $output;
}

// /*-----------------------------------------------------------------------------------*/	
// /* WordPress后台编辑器添加表情按钮
// /*-----------------------------------------------------------------------------------*/
function loper_smilies_custom_button($context) {
    $context. = '<style>.smilies-wrap{background:#fff;border: 1px solid #ccc;
box-shadow: 2px 2px 3px rgba(0, 0, 0, 0.24);padding: 10px;position: absolute;top: 60px;width: 380px;display:none}.smilies-wrap img{
height:24px;width:24px;cursor:pointer;margin-bottom:5px} .is-active.smilies-wrap{display:block}</style><a id="insert-media-button" 
style="position:relative" class="button insert-smilies add_smilies" title="添加表情" data-editor="content" 
href="javascript:;">添加表情</a><div class="smilies-wrap">'.loper_get_wpsmiliestrans().'</div><script>jQuery(document).ready
(function(){jQuery(document).on("click", ".insert-smilies",function() { if(jQuery(".smilies-wrap").hasClass("is-active")){
jQuery(".smilies-wrap").removeClass("is-active");}else{jQuery(".smilies-wrap").addClass("is-active");}});
jQuery(document).on("click", ".add-smily",function() { send_to_editor(" " + jQuery(this).data("smilies") + " ");
jQuery(".smilies-wrap").removeClass("is-active");return false;});});</script>';
    return $context;
}
add_action('media_buttons_context', 'loper_smilies_custom_button');

注意在第一个函数中缩写与图片的对应关系，如果自己使用的主题已经加入了表情，则在第二个函数中修改src的路径，例如我使用的主题中有加入了表情，那么就只需要修改src为：

$output .= '<a class="add-smily" data-smilies="' . $alt . '"><img class="wp-smiley"
src="' . get_bloginfo( 'template_directory' ) . '/images/smilies/' . rtrim( $src_path, "png" ) . 'png" /></a>';

添加表情效果

修改效果如下，编辑文章时的添加表情按钮：

博文中表情的显示：

至此，你已经完成了非插件版在后台编辑器添加表情，并在前端博文中显示的功能