远方的海
远方的海,WordPress,免费
2015 May 23 19 : 09

WordPress在文章中插入表情(非插件)

您当前的位置: 首页 > WordPress > 正文
欢迎光临远方的海!您可能还对 WordPress建站免费资源最新IT动态 感兴趣,点击开启 悦读 模式。CTRL+D 快捷收藏本文,我们期待您再次光临!
[文章目录]
文章导读

最近真是对表情系统来了个大折腾啊,昨天更新了Wordpress评论中的表情显示,今天也在文章编辑器里面插入表情。之前一篇文章写了如何在评论中插入表情,大家也可以参考:点击前往

下载所需的表情文件

首先 点击下载我们所需要的表情文件,把解压后的smilies文件夹放在主题的images文件夹中。如果你的主题没有images文件夹,请自行创建一个。

在functions.php添加代码

这个步骤要添加两段代码,首先是下面的,这个代码的作用就是在文章编辑器里面增加一个添加表情的按钮,并显示表情图,点击表情图再转化成对应的符号。

效果图如下:

WordPress在文章中插入表情(非插件)

 

好了,下面上这段代码:

//文章输出WordPress表情
function sven_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').'/images/smilies/'.rtrim($src_path, "gif").'gif" /></a>';
}
return $output;
}
add_action('media_buttons_context', 'sven_smilies_custom_button');
function sven_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">'. sven_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;
}

把默认表情替换成自定义表情

接下来,我们还需要把系统默认的表情符号转化成我们自定义的萌萌的表情 ~~还是在functions.php,我们继续加代码喔~~~

 add_filter('smilies_src','sven_smilies_src',1,10);
 function sven_smilies_src ($img_src, $img, $siteurl){
 $img = rtrim($img, "gif");
 return get_bloginfo('template_directory').'/images/smilies/'.$img.'png';
 }

代码参考自:BigFa > http://fatesinger.com/73837

相关文章推荐阅读访问:云落> http://googlo.me/archives/2897.html

OK,大功告成啦!   快去看看你的文章里面有表情了吗~

好文!分享给朋友,或者点个赞吧~

文章信息

分类:WordPress WP技巧

您可能也会喜欢

发表回复

Post Comment


  1. 四夕 :

    我直接用多说评论插件

    2016-9-20
    • Sven水神 :

      给加了一个相关链接,发现博主内页有的友链,我也给你加上~ 主题改的很不错!

      2015-6-1
  2. 一零网赚 :

    来看看

    2015-5-25