WordPress教程:免插件在文章中插入QQ表情

2017年9月15日18:24:42 发表评论 62
摘要

有时候,一个表情起到无法用语言来描述的作用,相信大家经常用QQ表情聊天对这是深有体会。有博客中插入表情不显得那么生硬,情感表达得更充沛,读者浏览起来也更轻松。

WordPress教程:免插件在文章中插入QQ表情

表情包准备

下载表情包,本地解压后上传到你主题目录img目录中,如果没有这个目录就新建一个。

部署代码

把下方代码加入functions.php中,注意代码中第7行的表情地址为img/smilies改为自己的文件路径。

  1. /*?代码?分享自:闲鱼博客?*/
  2. //输出WordPress表情??
  3. function?fa_get_wpsmiliestrans(){
  4. ????global?$wpsmiliestrans;
  5. ????$wpsmilies?=?array_unique($wpsmiliestrans);
  6. ????foreach($wpsmilies?as?$alt?=>?$src_path){
  7. ????????$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>';
  8. ????}
  9. ????return?$output;
  10. }
  11. add_action('media_buttons_context',?'fa_smilies_custom_button');
  12. function?fa_smilies_custom_button($context)?{
  13. ????$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:;">
  14. ????添加表情
  15. ????</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>';
  16. ????return?$context;
  17. }

css美化

完成上面操作后,在写文章的编辑器的上方会见到一个添加表情的字样,说明添加成功。

但是你在使用时会发现发布表情时表情会单独占用一行,而且表情看起来有时候很小而不是原来的大小,这就需要修改下css。

将以下代码加入style.css中:

  1. .wp-smiley?{
  2. ????display:?inline-block?!important;?/*为了让表情不会独占一行*/
  3. ????height:24px?!important;/*为了让表情不和默认的CSS代码冲突,让表情显示的大点*/
  4. ????max-height:?24px?!important;/*为了让表情不和默认的CSS代码冲突,让表情显示的大点*/
  5. }

看看是不是完美的整上了 :mrgreen:? :neutral:? :evil:? :idea:? :wink:? :eek:? :lol:? :sad:? :!:? :?:

AD支持一下沃森博客,请点这里一下!

  • 博主微信
  • 赶快加我来聊天吧
  • weinxin
  • 站长技术资源群
  • 群号:483950522
  • weinxin

发表评论

:?: :razz: :sad: :evil: :!: :smile: :oops: :grin: :eek: :shock: :???: :cool: :lol: :mad: :twisted: :roll: :wink: :idea: :arrow: :neutral: :cry: :mrgreen: