如何在WordPress的编辑器中增加表情功能

前言

早在很早之前就有想过给博客增加表情功能，但不知道为什么一直没有倒腾，可能是懒吧

这两天在家没事，于是就去百度找了下增加表情功能的方法，万能度娘，千万能谷哥

准备

阿鲁表情包 整理：晓超云博客

上传

将解压之后的表情包上传到当前主题目录下的images/img

部署

在WordPress后台管理页面，点击外观-编辑，找到function.php文件，添加下面代码

//输出WordPress表情  
function fa_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('template_directory').'/img/smilies/'.rtrim($src_path, "gif").'gif" /></a>';  
    }  
    return $output;  
}  

add_action('media_buttons_context', 'fa_smilies_custom_button');  

function fa_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">'. fa_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;  
}

注：该代码中表情所在的路径为img/smilies，可以根据自身的情况进行修改。

2020年6月20日补充：通过使用和调试，.smilies-wrap img的宽度建议设置为26px。

正常情况，部署代码后，编辑器无论如何都会出现添加表情的按钮，可能会存在点击添加表情按钮不显示表情的情况，

这时候需要排查一下问题，一般是图片路径不对的原因 。

完成了上面的部署之后，你会在使用表情时发现其单独占用一行，这时候就需要添加相应的CSS代码了。

点击外观-编辑，找到style.css文件

.wp-smiley {   
    display: inline-block !important;  
    height:24px !important; 
    max-height: 24px !important;
}

原代码的注释真的有点东西，看了想哭

大概解释一下，第一行代码是将该元素设置成行内块元素，

后面两个都是将图片的高度变大，

!important是将该元素的权重设置为最高。

至此，在编辑器中增加表情功能完成 。

参考

《WordPress代码：在文章中插入表情，丰富文章效果》