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

沃森博客 2017年9月15日18:24:42WordPress评论148阅读模式
摘要

有时候,一个表情起到无法用语言来描述的作用,相信大家经常用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. ????displayWordPress教程:免插件在文章中插入QQ表情inline-block?!important;?/*为了让表情不会独占一行*/
  3. ????height:24px?!important;/*为了让表情不和默认的CSS代码冲突,让表情显示的大点*/
  4. ????max-heightWordPress教程:免插件在文章中插入QQ表情24px?!important;/*为了让表情不和默认的CSS代码冲突,让表情显示的大点*/
  5. }

看看是不是完美的整上了 :mrgreen:? :neutral:? :evil:? :idea:? :wink:? :eek:? :lol:? :sad:? :!:? WordPress教程:免插件在文章中插入QQ表情

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

  • 博主QQ
  • 2807460584
  • weinxin
  • 博主QQ
  • 2807460584
  • weinxin
沃森博客
  • 本文由 发表于 2017年9月15日18:24:42
  • 转载请务必保留本文链接:https://wosn.net/557.html

发表评论