远方的海
远方的海,WordPress,免费
2015 Aug 15 06 : 23

WordPress取消系统emoji表情并用IcoMoon替代

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

自从WordPress更新到4.2以后,Emoji表情就夹杂进来了,不但在header处插入了js代码,也把本来设置的表情弄的是一团糟:大家的QQ表情和字符颜文字都会自动转换成Emoji。

本文介绍,怎么取消原生emoji表情和用icomoon替换emoji表情。

取消Emoji表情的js文件

在主题的functions.php文件中插入下列代码,即可取消头部的js文件:

function disable_emojis_tinymce( $plugins ) {
 return array_diff( $plugins, array( 'wpemoji' ) );
}
function disable_emojis() {
 remove_action( 'wp_head', 'print_emoji_detection_script', 7 );
 remove_action( 'admin_print_scripts', 'print_emoji_detection_script' );
 remove_action( 'wp_print_styles', 'print_emoji_styles' );
 remove_action( 'admin_print_styles', 'print_emoji_styles' ); 
 remove_filter( 'the_content_feed', 'wp_staticize_emoji' );
 remove_filter( 'comment_text_rss', 'wp_staticize_emoji' ); 
 remove_filter( 'wp_mail', 'wp_staticize_emoji_for_email' );
 add_filter( 'tiny_mce_plugins', 'disable_emojis_tinymce' );
}
 add_action( 'init', 'disable_emojis' );

光取消了加载Emoji的代码,可是依然还是达不到我们想要的结果啊,我们继续进行下面的步骤,把丑陋不堪的Emoji表情替换成高端大气上档次的IcoMoon字体,个人觉得随css加载快,也不需要下载多余的表情包,是个很不错的选择。

Emoji转化IcoMoon

下面就是酷酷的icomoon表情啦:        

WordPress取消系统emoji表情并用IcoMoon替代

下面的代码加入主题的functions.php文件中即可替换原生表情。

function smilies_reset() {
global $wpsmiliestrans;
if ( !get_option( 'use_smilies' ) )
return;
$wpsmiliestrans = array(
':mrgreen:' => '<span class="icon-grin grin"></span>',
':neutral:' => '<span class="icon-neutral grin"></span>',
':twisted:' => '<span class="icon-hipster grin"></span>',
':arrow:' => '<span class="icon-arrow-right grin"></span>',
':shock:' => '<span class="icon-shocked grin"></span>',
':smile:' => '<span class="icon-smile grin"></span>',
':???:' => '<span class="icon-confused grin"></span>',
':cool:' => '<span class="icon-cool grin"></span>',
':evil:' => '<span class="icon-evil grin"></span>',
':grin:' => '<span class="icon-grin grin"></span>',
':idea:' => '<span class="icon-star-full grin"></span>',
':oops:' => '<span class="icon-happy grin"></span>',
':razz:' => '<span class="icon-tongue grin"></span>',
':roll:' => '<span class="icon-happy grin"></span>',
':wink:' => '<span class="icon-wink grin"></span>',
':cry:' => '<span class="icon-crying grin"></span>',
':eek:' => '<span class="icon-baffled grin"></span>',
':lol:' => '<span class="icon-crying grin"></span>',
':mad:' => '<span class="icon-frustrated grin"></span>',
':sad:' => '<span class="icon-sad grin"></span>',
':!:' => '<span class="icon-notification grin"></span>',
':?:' => '<span class="icon-smile grin"></span>',
);
}
smilies_reset();

下载IcoMoon字体

接下来就是让主题加载icomoon啦,关于icomoon的使用这里有一篇教程:点击前往,详细的用法就不多说啦,或者你也可以在本文简单的了解一下icomoon怎么用。

一、如果你之前没有使用过icomoon:我们打开Icomoon App,进去选择几个笑脸图标,如图所示:

WordPress取消系统emoji表情并用IcoMoon替代

点击下面的Generate Font,然后会下载得到一个文件夹,解压文件夹,把里面的fonts文件夹拷贝上传到主题的根目录下。

然后打开下载的文件夹里面的style.css文件,把里面的代码,复制到主题的style.css中。然后,我们就大功告成了,看看你之前的Emoji表情是不是都变成了IcoMoon     ?

二、如果你的主题原来就装了icomoon:也不要紧,我们小做修改即可,两个步骤:

  • 首先,把fonts文件夹改名为fontsface,然后把fontsface上传到主题根目录;
  • 然后,把下载的文件夹里面的style.css的前面的代码改改,后面的icon-的格式,全部改成icon_(前面步骤二,替换emoji为Icomoon的代码里面的-也要改成_哦!用文本一键替换即可),再放入主题的style.css,前面的修改如下:
@font-face {
font-family: 'icomoon-face';
src:url('fontsface/icomoon.eot');
src:url('fontsface/icomoon.eot') format('embedded-opentype'),
url('fontsface/icomoon.ttf') format('truetype'),
url('fontsface/icomoon.woff') format('woff'),
url('fontsface/icomoon.svg') format('svg');
font-weight: normal;
font-style: normal;
}

[class^="icon_"], [class*=" icon_"] {
font-family: 'icomoon-face';
speak: none;
font-style: normal;
font-weight: normal;
font-variant: normal;
text-transform: none;
line-height: 1;

/* Better Font Rendering =========== */
-webkit-font-smoothing: antialiased;
-moz-osx-font-smoothing: grayscale;
}

如果你觉得下载icomoon比较麻烦,站长这里有打包好的icomoon,供大家使用,可以直接下载:点击下载

进一步美化IcoMoon

如果你觉得你的icomoon表情没有颜色,样式不好看,可以参考本站的样式,把下面的代码,再加入style.css中:

.grin{
font-size:1.3em;
color:#bfaa1c;
letter-spacing:0
}

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

文章信息

分类:WordPress

您可能也会喜欢

发表回复

Post Comment


  1. 有点蓝 :

    今天在远方的海签到啦,又学了一些Wordpress建站知识!时间:下午12:36:49

    2016-4-26
  2. 2015-10-17
  3. sven水神 :

    今天在远方的海签到啦,又学了一些Wordpress建站知识!时间:下午10:04:26

    2015-8-29
    • Hao :

      @sven 博主你这自己回复自己啊,可惜office365桌面版已经封杀了

      2016-11-30
  4. 众推不靠谱 :

    不错 之前我博客上表情好像就是用这种方法解决的

    2015-8-19