WordPress 4.2+ 替换默认 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');

使用其它 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>');

 1057-get-emoji

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

 1057-get-emoji-2

地址复制另存为 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/
转载时必须以链接形式注明原始出处。
Views: 626 Tags:  ,  ,  ,  , 

Comments:13

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

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

      2019.04.04 08:40 # 回复
      • Yan

        @老杨 今天也重新启用了。twemoji确实是相对漂亮的一套。

        2019.08.07 00:02 # 回复
      • Yan

        @老杨 😁😀🤣😂😄😇😋😍😎🤗

        2019.08.07 00:02 # 回复
  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

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

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

      2019.07.16 12:25 # 回复

发表留言

炒蛋:Vultr 送$25 | 搬瓦工年付$19补货,优惠码 BWH34QMFYT2R | 推荐VPS信息