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');
参考资料
大发 - WordPress 4.2+ 使用Emoji表情▼展开
//首先补全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 );
}
twitter emoji这个表情制作方法我记得三年前还写过文章的……想不到这么多年过去了……
@老虎 大发那里的教程,我也弄过,后来删除了……把自带的也禁用掉。现在重新启用……
@老头 今天也重新启用了。twemoji确实是相对漂亮的一套。
@Yan ??还提供 SVG 格式,体积小很多。
@老头 ??????????
忘了说了,本文真香。
@老虎 翻炒的香……
话说SVG的表情好评,挺好的~~emoji应该放评论框表情里~
@夜枫 现在一般输入法都带表情输入,评论框不好放,还得折腾折腾。?
输入法默认 ? ,哈哈。
@郑永 ??基本上新的输入法都带……
add_filter(emoji_url,….),和add_filter(smilies_src,….)两个作用一样,不懂。也就是wp4.2新增的emoji表情和之前的表情是两个功能,还是替代了旧版表情?多谢
@BLACK 后面那个是参考文章的实现方式,补全替换默认表情。不需要两个都使用啊。
我也来试试,最近研究这个呢!???
@简单生活 最简单是自带 Emoji 改 CDN 源加速吧。
@老头 不知道咋回事,我取消了主题禁用emoji,替换了还是没效果,没发现相关js加载?
@简单生活 没有相关js加载,是禁用还没去除吧?或者缓存?
登录状态应该没有缓存,js我没有丢cdn,估计主题哪里还有限制,我再找找,现在显示的是手机emoji,效果不好,只有文字大小?