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

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 版本。

参考资料

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/,转载时烦请以链接形式注明原始出处。
声明:我们不销售主机,任何VPS主机均有跑路风险且需定期备份,防止数据丢失。信息以实际为准,评测仅供参考不代表权威!
🍄:Netflix 奈飞 YouTube 合租

升级新版 Google AdSense 代码提升广告效果

2021年7月19日,Google AdSense 最近发布了新版 AdSense 代码。通过新版 AdSense 代码,AdSense 可以更早触发优化功能,从而提升网站上广告效果。新广告代码适用于自动广告和广告单元。 如何获取 Google AdSense 新版代码? 无需采取任何措施。在下次登录 AdSense 后,您将拥有对新广告代码的访…

利用 Google Analytics 追踪 WordPress 站内搜索关键词

Google分析(Google Analytics)是一个由 Google 所提供的网站流量统计服务。Google 分析(Analytics)现在是互联网上使用最广泛的网络分析服务。 利用 Google Analytics 追踪 WordPress 站内搜索关键词 优化内容 如果网站/博客在 Google Analytics 流量统计,利用 Google Analytics 追踪 W…

Google Analytics 异步请求(服务端请求)

感谢伟大的祖国,使得好好的 Google,必须折腾一番才能好好的用起来。Google 搜索如此,Google Analytics 肯定也不例外(网上据说 Google Analytics 没有被屏蔽)。 Google Analytics 支持服务端发送统计信息(via:Jerry Qu),而通过服务端统计可以解决 Google Analytics 连接缓慢问题,提高页面…
浏览: 112 标签:  ,  , 

Gravatar 头像被墙及解决方案 Gravatar 头像国内镜像地址大全

Gravatar 头像真是一言难尽,时而正常时而抽风时而无法访问……就一个 Gravatar 头像,这有啥好强(现代通假字)的呢?(据说是被其它服务连累?) 解决办法 - 调用 ssl/cn 头像链接 历史解决办法:调用 ssl 头像链接——https还是没被墙的,而且速度还不错,直接调用这个最简单了。主题 functi…
浏览: 152 标签:  ,  ,  ,  , 
浏览: 114 标签:  ,  ,  ,  , 

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