WordPress 4.2+ 使用 Twemoji 替换默认 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 备用下载地址

(解压密码 1024,若看不到下载链接,请关闭广告屏蔽插件刷新重试)

2020-07-17:twemoji-13.0.1

使用其它 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 版本。

参考资料

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');

除非注明,沙唐桔文章均为原创,本文地址 https://cyhour.com/1057/,转载时必须以链接形式注明原始出处。
声明:我们不销售主机,选主机需合法使用。任何主机需定期备份,防止数据丢失。信息以实际为准,评测仅供参考不代表权威!

Sublime Text 批量删除文件空白行

不知道为啥,新版本的 WordPress 安装完成后生成的 wp-config.php 文件会被隔行插入一行空行,另外,发现从后台上传本地主题 zip 压缩包进行安装,这个主题的所有文件都会被隔行插入一行空行,这是 bug?我现在用 Sublime Text 3 (和谐版)编辑主题文件,于是找了一下 Sublime Text 删除空行的方法,…
浏览: 86 标签: 

Sublime Text 3 热键失效

今天折腾博客,发现 Sublime Text 3 快速选中多个地方热键(Ctrl+Alt+UP/DOWN)失效,原本以为是老问题:英特尔图形属性占用快捷键,看了一下,并没有。 找了一圈,试了几个工具,没找到是哪个程序快捷键冲突。然后尝试使用 Windows Hotkey Explorer 找找。MD,这货安装完,打开,屏幕噼里啪啦…
浏览: 62 标签:  ,  ,  , 
浏览: 33 标签:  ,  ,  ,  , 

Comments:13

  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 # 回复

发表留言

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