WordPress 4.2+ 使用Emoji表情

emoji

4.2刚出来的时候我第一时间想到的是先禁用表情,因为当时还没研究这货的原理,所以只能先禁用了,今天刚好有时间,就研究了一下,发现emoji表情还是很好的,有人担心以后不使用后样式会变得难看,其实不难看出,emoji表情已经变的很文字差不多了,mac下浏览器都是支持的,ios8也是直接有了emoji的输入法,安卓下也有相应的输入法。我们在发短信或者朋友圈的时候就会经常使用这个吧。以后PC端也会支持的,这是趋势。

这是直接输入的emoji表情,有木有感觉酷酷的~ ????

emoji表情输入的时候是字符串,支持的浏览器会自动识别并转换为表情,wp为了兼容吧表情直接转换为静态图片,但是使用了wp的cdn,强大的girl friend wall却无法显示这货,所以很多朋友出现了页面卡住的情况。

要实现使用这货我们需要解决这个cdn的问题,还有就是wp并未把所有的表情库翻译成emoji,还有少量漏网之鱼,我们要把这几个补全,防止旧表情失效情况。

个人还是更喜欢twitter扁平化的emoji表情,而且本身也是开源的,非常强大,然后上传到你自己主题文件夹下就可以了。

[download url=”//static.fatesinger.com/emoji72x72.zip”]表情包下载[/download]

实现方法

下面的代码加到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');

输出表情

和我之前写过的添加emoji表情差不多,只不过输出表情的部分变了,具体实现方法参考相关文章,把fa_get_wpsmiliestrans()函数替换为下面就可以了。

function fa_get_wpsmiliestrans(){
    global $wpsmiliestrans;
    $wpsmilies = array_unique($wpsmiliestrans);
    foreach($wpsmilies as $alt => $src_path){
        $emoji = str_replace(array('&#x', ';'), '', wp_encode_emoji($src_path));
        $output .= '<a class="add-smily" data-smilies="'.$alt.'"><img class="wp-smiley" src="'.get_bloginfo('template_directory').'/72x72/'. $emoji .'png" /></a>';
    }
    return $output;
}

这也表情不但满血复活,而且还更加强大了!

Comments : 8

  1. 很不错哦!~~~ :roll:

  2. 下载不了表情 :roll:

    1. @无语

      修复了 :|

  3. 嚓,连续两个表情以上转换会有问题…… ;-) :|

    1. @老杨

      应该不会吧,是不是表情之间没空格啊。

    2. @bigfa 我是直接添加表情代码的哦,有空格……

  4. 请问一下,用了代码之后发现表情多(大于3个)的话,就会出现CSS代码也一起显示出来的的情况,是怎么回事呢?

    就像这样

  5. 图片发不上来 :shock:

发表留言

Smilies powered by wp-alu

Post Comment