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 备用下载地址

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/,转载时必须以链接形式注明原始出处。
声明:我们不销售主机,选主机需合法使用。任何主机需定期备份,防止数据丢失。信息以实际为准,评测仅供参考不代表权威!
🔞:Netflix 奈飞 YouTube 合租免费节点Telegram 频道

优化 WordPress 评论回复通知邮件

用上 G Suite 后,域名邮箱自然也托管到 Google,Gmail 配合 Gmail SMTP 插件使用,还行。更改后回复评论提交速度巨慢,肯定与这个评论回复通知邮件有关。 原本使用 VPS Postfix 直接发送,虽然基本上会进垃圾邮件,但是回复评论提交速度很快。再次尝试使用 wp_schedule_single_event 延迟发送评论…

使用 rclone 将 Google Drive 文件同步至 OneDrive

前几天上了博友「灵尘居」的 Office 365 车,1T OneDrive 到手,手机照片一直喂 Google AI,挺方便的,以前还会同步一份到家里的垃圾西数 NAS,不过并不太自动,后来就懒得弄了。 Google 虽然是大厂,但是数据只有一份,还是怕怕,多一个备份不是坏事。苹果 iCloud 不错,但是贼贵,况且我只有一个…
浏览: 168 标签:  ,  ,  ,  , 

尼康 D7100 中文使用说明书 高清 PDF 电子版免费下载

尼康 D7100 说明书是一份介绍详细尼康 D7100 单反官方教程,推荐购买了 D7100 单反博友下载保存参考,以便随时查看一些常用按键操作和使用技巧。 尼康 D7100 简介 尼康 D7100 搭载先进的对象捕捉性能和成像性能,能够忠实还原拍摄细节。高密度的 51 点自动对焦系统准确捕捉目标对象并进行跟踪,…

全网热门公共 BitTorrent Tracker 列表合集 加速BT下载

BT 下载速度取决于其他下载同一资源的用户上传速度。做种「指上传文件数据给其他 BT 用户的行为」用户越多,你的下载速度越快!如果资源没人提供上传,就会完全没有下载速度,而做种用户靠 Peer、DHT、Tracker 获得。 Tracker 是什么? BT 下载的文件都是其他用户上传给你的。 BT 下载速度…
浏览: 84 标签:  ,  ,  ,  , 

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信息