表情包准备
下载表情包，本地解压后上传到你主题目录img目录中，如果没有这个目录就新建一个。
部署代码
把下方代码加入functions.php中，注意代码中第7行的表情地址为img/smilies改为自己的文件路径。
- /*?代码?分享自：闲鱼博客?*/
- //输出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;
- }
css美化
完成上面操作后，在写文章的编辑器的上方会见到一个添加表情的字样，说明添加成功。
但是你在使用时会发现发布表情时表情会单独占用一行，而且表情看起来有时候很小而不是原来的大小，这就需要修改下css。
将以下代码加入style.css中：
- .wp-smiley?{
- ????display
inline-block?!important;?/*为了让表情不会独占一行*/ - ????height:24px?!important;/*为了让表情不和默认的CSS代码冲突，让表情显示的大点*/
- ????max-height24px?!important;/*为了让表情不和默认的CSS代码冲突，让表情显示的大点*/
- }
看看是不是完美的整上了 :mrgreen:? :neutral:? :evil:? :idea:? :wink:? :eek:? :lol:? :sad:? :!:? 
评论