WordPress 4.2+ 使用 Twemoji 替换/禁用 WP 默认 Emoji 表情

WordPress 4.2+ 新增 Twitter Em❤️ji 表情,但是默认使用的 CDN —— https://s.w.org/images/core/emoji/11.2.0/72x72/ 在国内无法正常访问。解决办法有两个,一是把表情本地化,二是替换掉默认的链接。

🎉 😜 👯 🍻 🎈 🎤 🎮 🚀 🌉 ✨

使用 Twitter 官方提供 MaxCDN 服务

Twitter 官方提供 MaxCDN 服务:http://twemoji.maxcdn.com/ 在国内可以访问,速度尚可。将默认 CDN 地址修改为 MaxCDN,只需将以下代码粘贴到主题 functions.php 文件即可:

// 替换 WordPress 默认 Emoji 资源地址
function theme_wp_emoji_baseurl( $url ){
return set_url_scheme('//twemoji.maxcdn.com/2/72x72/');
}
add_filter('emoji_url', 'theme_wp_emoji_baseurl');

// WordPress 4.6 新增 SVG 格式资源
function theme_wp_emoji_svgurl($url) {
return set_url_scheme('//twemoji.maxcdn.com/2/svg/');
}
add_filter('emoji_svg_url', 'theme_wp_emoji_svgurl');

Emoji 表情本地化

一般替换掉 WordPress 默认 CDN 就可以了,如果还是觉得 CDN 不稳定,可以把 Emoji 放至博客服务器,与博客共存亡。

Twitter Emoji 项目地址:https://github.com/twitter/twemoji

官网:https://twemoji.twitter.com

下载 twemoji/2/72x72/ 和 twemoji/2/svg/ 内容上传至博客服务器。如网站根目录下 /emoji/72x72/、/emoji/svg/。然后主题 functions.php 文件添加一下代码:

// 替换 WordPress 默认 Emoji 资源地址
function theme_wp_emoji_baseurl( $url ){
return set_url_scheme('//ooxx.com/emoji/72x72/');
}
add_filter('emoji_url', 'theme_wp_emoji_baseurl');

// WordPress 4.6 新增 SVG 格式资源
function theme_wp_emoji_svgurl($url) {
return set_url_scheme('//ooxx.com/emoji/svg/');
}
add_filter('emoji_svg_url', 'theme_wp_emoji_svgurl');

Twemoji 备用下载地址

2020-07-17:twemoji-13.0.1

2021-03-13:twemoji-13.0.2-20210313

2021-05-28:twemoji-13.1.0

使用其它 Emoji 表情

不喜欢 Twitter Emoji 表情?不妨换换 Apple 或者 Google 的 Emoji 表情。

如何下载 Apple Emoji 的 PNG 图片?

参考博友文章:Fooleap

打开 Apple Emoji List — Emojis for iPhone, iPad and macOS 页面,F12 打开开发者工具,Sources -- Snippets -- 粘贴下面代码执行:

var output = '';
$('.emoji-grid img').each(function(){
var url = $(this).data('src');
output += (!!url ? url : $(this).attr('src'))+ '\n';
});
$('body').append('<textarea>'+output+'</textarea>');

执行完切换到 Elements 标签,找到 body 下 textarea,里面内容就是所有表情链接。

地址复制另存为 file.txt。测试最大能获取到 160x160 分辨率表情,获取到的链接为 72x72 规格,若需要 144x144 或者 160x160 分辨率,只需另复制一份并修改其 URL 中的 72 这个数字为 144 或者 160 即可。

怎么批量下载?扔到 VPS 上用 wget 应该是最省心的。

$ mkdir emoji && cd emoji && wget -i file.txt

至于批量重命名可以使用 ReNamer.exe,支持正则,然而我并不会,分好几次才重命名完。

然后按照上面的方法折腾替换即可。

后记:原本打算用 Apple Emoji,后来发现 Twitter 的表情数更多,体积更小,还有体积更小的 SVG……并且 WordPress 4.6 新增 SVG 格式资源,最终用回 Twitter 版本。

WordPress 彻底禁用 Emoji

代码出处:wpjam-basic

// 屏蔽 Emoji
remove_action('admin_print_scripts', 'print_emoji_detection_script');
remove_action('admin_print_styles', 'print_emoji_styles');
remove_action('wp_head', 'print_emoji_detection_script', 7);
remove_action('wp_print_styles', 'print_emoji_styles');
remove_action('embed_head', 'print_emoji_detection_script');
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', 'theme_disable_emoji_tiny_mce_plugin');
function theme_disable_emoji_tiny_mce_plugin($plugins)
{
return array_diff($plugins, array('wpemoji'));
}
add_filter('emoji_svg_url', '__return_false');

参考资料

wp_staticize_emoji()

大发 - WordPress 4.2+ 使用Emoji表情▼展开

下面的代码加到 functions.php 中

//首先补全wp的表情库
function smilies_reset() {
global $wpsmiliestrans, $wp_smiliessearch;

// don't bother setting up smilies if they are disabled
if (!get_option('use_smilies')) {
return;
}

$wpsmiliestrans_fixed = array(
':mrgreen:' => "\xf0\x9f\x98\xa2",
':smile:' => "\xf0\x9f\x98\xa3",
':roll:' => "\xf0\x9f\x98\xa4",
':sad:' => "\xf0\x9f\x98\xa6",
':arrow:' => "\xf0\x9f\x98\x83",
':-(' => "\xf0\x9f\x98\x82",
':-)' => "\xf0\x9f\x98\x81",
':(' => "\xf0\x9f\x98\xa7",
':)' => "\xf0\x9f\x98\xa8",
':?:' => "\xf0\x9f\x98\x84",
':!:' => "\xf0\x9f\x98\x85",
);
$wpsmiliestrans = array_merge($wpsmiliestrans, $wpsmiliestrans_fixed);
}

//替换cdn路径
function static_emoji_url() {

return get_bloginfo('template_directory').'/72x72/';

}
//让文章内容和评论支持emoji并起初emoji加载的乱七八糟的脚本
function reset_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');
add_filter('the_content', 'wp_staticize_emoji');
add_filter('comment_text', 'wp_staticize_emoji',50); //在转换为表情后再转为静态图片
smilies_reset();
add_filter('emoji_url', 'static_emoji_url');
}
add_action('init', 'reset_emojis');

kn007 - WordPress 4.2+禁用Emoji表情▼展开

/**
* Disable the emoji's
*/
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' );
add_filter('emoji_svg_url', '__return_false');
/**
* Filter function used to remove the tinymce emoji plugin.
*
* @param array $plugins
* @return array Difference betwen the two arrays
*/
function disable_emojis_tinymce( $plugins ) {
return array_diff( $plugins, array( 'wpemoji' ) );
}
function smilies_reset() {
global $wpsmiliestrans;
// don't bother setting up smilies if they are disabled
if ( !get_option( 'use_smilies' ) )
return;

$wpsmiliestrans = array(
':mrgreen:' => 'icon_mrgreen.gif',
':neutral:' => 'icon_neutral.gif',
':twisted:' => 'icon_twisted.gif',
':arrow:' => 'icon_arrow.gif',
':shock:' => 'icon_eek.gif',
':smile:' => 'icon_smile.gif',
':???:' => 'icon_confused.gif',
':cool:' => 'icon_cool.gif',
':evil:' => 'icon_evil.gif',
':grin:' => 'icon_biggrin.gif',
':idea:' => 'icon_idea.gif',
':oops:' => 'icon_redface.gif',
':razz:' => 'icon_razz.gif',
':roll:' => 'icon_rolleyes.gif',
':wink:' => 'icon_wink.gif',
':cry:' => 'icon_cry.gif',
':eek:' => 'icon_surprised.gif',
':lol:' => 'icon_lol.gif',
':mad:' => 'icon_mad.gif',
':sad:' => 'icon_sad.gif',
'8-)' => 'icon_cool.gif',
'8-O' => 'icon_eek.gif',
':-(' => 'icon_sad.gif',
':-)' => 'icon_smile.gif',
':-?' => 'icon_confused.gif',
':-D' => 'icon_biggrin.gif',
':-P' => 'icon_razz.gif',
':-o' => 'icon_surprised.gif',
':-x' => 'icon_mad.gif',
':-|' => 'icon_neutral.gif',
';-)' => 'icon_wink.gif',
// This one transformation breaks regular text with frequency.
// '8)' => 'icon_cool.gif',
'8O' => 'icon_eek.gif',
':(' => 'icon_sad.gif',
':)' => 'icon_smile.gif',
':?' => 'icon_confused.gif',
':D' => 'icon_biggrin.gif',
':P' => 'icon_razz.gif',
':o' => 'icon_surprised.gif',
':x' => 'icon_mad.gif',
':|' => 'icon_neutral.gif',
';)' => 'icon_wink.gif',
':!:' => 'icon_exclaim.gif',
':?:' => 'icon_question.gif',
);
}
smilies_reset();

add_filter( 'the_content', 'reset_smilies_style', 99 );
add_filter( 'the_excerpt', 'reset_smilies_style', 99 );
add_filter( 'comment_text', 'reset_smilies_style', 99 );

/**
* Reset Smilies Style
*/
function reset_smilies_style( $content ) {
return str_replace( 'class="wp-smiley" style="height: 1em; max-height: 1em;"', 'class="wp-smiley"', $content );
}

除非注明,垃圾站文章均为网络收集,本文地址 https://cyhour.com/1057/,转载时烦请以链接形式注明原始出处。
声明:我们不销售主机,任何VPS主机均有跑路风险且需定期备份,防止数据丢失。信息以实际为准,评测仅供参考不代表权威!
🍄:Netflix 奈飞 YouTube 合租

WordPress 数据库常用 SQL 语句

WordPress 数据库存储了站点所有信息,数据库对站点来说至关重要,一般情况下不要折腾数据库。但是很多情况下,使用 SQL 语句批量修改站点内容,大大提高效率。下面 SQL 语句均收集自网络,操作需谨慎。所有的SQL语句都是假定你的数据库的前缀是"wp_" ,如果你使用不同的表前缀,请自行修改。 温馨…
浏览: 43 标签:  ,  , 

Bitcron 初体验

去年看 UNEE 博主 Bitcron 体验文 的时候就申请过邀请码,不过发了两次邮件都没要到邀请码。反正也只是体验一下,也就作罢了。 Farbox 很久以前开始用 Farbox,当然了,一直只是试用状态程度的试用。比如现在还在用:参观一下。Bitcron 很像 Farbox,前者可以看作是后者的升级版? 从 FarBox…
浏览: 151 标签:  ,  , 

WordPress 文章 tag 标签使用 ID 形式固定链接

WordPress 设置中可以设定使用 post_id 作为文章/页面「固定链接」形式,但是无法设置文章 tag 标签也使用 ID 形式固定链接。 WordPress 文章 tag 标签的固定链接默认使用标签的别名,如果标签没有设置别名,并且标签名字带中文,那么固定链接就会带有中文,然后被 urlencode 转义成类似下面的…
浏览: 28 标签:  ,  ,  , 

希捷 西数 东芝 SMR 叠瓦式硬盘完整列表 硬盘购买指南

CMR(Conventional Magnetic Recording)又称作 PMR(Perpendicular Magnetic Recording)垂直写入技术,这是传统硬盘技术。SMR(Shingled Magneting Recording),叠瓦式记录技术,可以提高储存数据资料密度,从而提高硬盘储存容量。 SMR 叠瓦式硬盘优势在于大容量、低价格(性价比更高),缺点是…
浏览: 66 标签:  ,  ,  ,  , 

Comments:18

  1. twitter emoji这个表情制作方法我记得三年前还写过文章的……想不到这么多年过去了……

    2019.04.03 21:44 # 回复
    1楼
    • @老虎 大发那里的教程,我也弄过,后来删除了……把自带的也禁用掉。现在重新启用……

      2019.04.04 08:40 # 回复
  2. 忘了说了,本文真香。

    2019.04.03 21:45 # 回复
    2楼
  3. 话说SVG的表情好评,挺好的~~emoji应该放评论框表情里~

    2019.04.06 00:56 # 回复
    3楼
    • @夜枫 现在一般输入法都带表情输入,评论框不好放,还得折腾折腾。😇

      2019.04.06 08:41 # 回复
  4. 输入法默认 😔 ,哈哈。

    2019.04.12 10:31 # 回复
    4楼
  5. 垃圾站-BLACK
    BLACK

    add_filter(emoji_url,….),和add_filter(smilies_src,….)两个作用一样,不懂。也就是wp4.2新增的emoji表情和之前的表情是两个功能,还是替代了旧版表情?多谢

    2019.07.14 08:00 # 回复
    5楼
    • @BLACK 后面那个是参考文章的实现方式,补全替换默认表情。不需要两个都使用啊。

      2019.07.16 12:25 # 回复
  6. 我也来试试,最近研究这个呢!😂😂😂

    2021.02.20 11:10 # 回复
    6楼
  7. 登录状态应该没有缓存,js我没有丢cdn,估计主题哪里还有限制,我再找找,现在显示的是手机emoji,效果不好,只有文字大小🧐

    2021.02.21 11:37 # 回复
    7楼

发表留言

Vultr 送$100,搬瓦工年付最低$49,优惠码 BWH3HYATVBJW,更多推荐VPS信息