wordpress评论添加emoji表情

1、加载emoji表情路径文件
在评论页面(comments.php)合适的位置，引入smiley.php文件

<?php include(TEMPLATEPATH . '/smiley.php'); ?>
<script type="text/javascript" language="javascript">
/* <![CDATA[ */
    function grin(tag) {
    	var myField;
    	tag = ' ' + tag + ' ';
        if (document.getElementById('comment') && document.getElementById('comment').type == 'textarea') {
    		myField = document.getElementById('comment');
    	} else {
    		return false;
    	}
    	if (document.selection) {
    		myField.focus();
    		sel = document.selection.createRange();
    		sel.text = tag;
    		myField.focus();
    	}
    	else if (myField.selectionStart || myField.selectionStart == '0') {
    		var startPos = myField.selectionStart;
    		var endPos = myField.selectionEnd;
    		var cursorPos = endPos;
    		myField.value = myField.value.substring(0, startPos)
    					  + tag
    					  + myField.value.substring(endPos, myField.value.length);
    		cursorPos += tag.length;
    		myField.focus();
    		myField.selectionStart = cursorPos;
    		myField.selectionEnd = cursorPos;
    	}
    	else {
    		myField.value += tag;
    		myField.focus();
    	}
    }
/* ]]> */
</script>
<div id="smilelink">
<a onclick="javascript:grin(':?:')"><img src="<?php echo get_template_directory_uri(); ?>/images/smilies/icon_question.gif" title="疑问" alt="疑问" /></a>
<a onclick="javascript:grin(':razz:')"><img src="<?php echo get_template_directory_uri(); ?>/images/smilies/icon_razz.gif" title="抓狂" alt="抓狂" /></a>
<a onclick="javascript:grin(':sad:')"><img src="<?php echo get_template_directory_uri(); ?>/images/smilies/icon_sad.gif" title="汗" alt="汗" /></a>
<a onclick="javascript:grin(':evil:')"><img src="<?php echo get_template_directory_uri(); ?>/images/smilies/icon_evil.gif" title="委屈" alt="委屈" /></a>
<a onclick="javascript:grin(':!:')"><img src="<?php echo get_template_directory_uri(); ?>/images/smilies/icon_exclaim.gif" title="鄙视" alt="鄙视" /></a>
<a onclick="javascript:grin(':smile:')"><img src="<?php echo get_template_directory_uri(); ?>/images/smilies/icon_smile.gif" title="微笑" alt="微笑" /></a>
<a onclick="javascript:grin(':oops:')"><img src="<?php echo get_template_directory_uri(); ?>/images/smilies/icon_redface.gif" title="可爱" alt="可爱" /></a>
<a onclick="javascript:grin(':grin:')"><img src="<?php echo get_template_directory_uri(); ?>/images/smilies/icon_biggrin.gif" title="坏笑" alt="坏笑" /></a>
<a onclick="javascript:grin(':eek:')"><img src="<?php echo get_template_directory_uri(); ?>/images/smilies/icon_surprised.gif" title="吃惊" alt="吃惊" /></a>
<a onclick="javascript:grin(':shock:')"><img src="<?php echo get_template_directory_uri(); ?>/images/smilies/icon_eek.gif" title="狂晕" alt="狂晕" /></a>
<a onclick="javascript:grin(':???:')"><img src="<?php echo get_template_directory_uri(); ?>/images/smilies/icon_confused.gif" title="可怜" alt="可怜" /></a>
<a onclick="javascript:grin(':cool:')"><img src="<?php echo get_template_directory_uri(); ?>/images/smilies/icon_cool.gif" title="酷" alt="酷" /></a>
<a onclick="javascript:grin(':lol:')"><img src="<?php echo get_template_directory_uri(); ?>/images/smilies/icon_lol.gif" title="奸" alt="奸" /></a>
<a onclick="javascript:grin(':mad:')"><img src="<?php echo get_template_directory_uri(); ?>/images/smilies/icon_mad.gif" title="怒" alt="怒" /></a>
<a onclick="javascript:grin(':twisted:')"><img src="<?php echo get_template_directory_uri(); ?>/images/smilies/icon_twisted.gif" title="狂" alt="狂" /></a>
<a onclick="javascript:grin(':roll:')"><img src="<?php echo get_template_directory_uri(); ?>/images/smilies/icon_rolleyes.gif" title="馋" alt="馋" /></a>
<a onclick="javascript:grin(':wink:')"><img src="<?php echo get_template_directory_uri(); ?>/images/smilies/icon_wink.gif" title="调皮" alt="调皮" /></a>
<a onclick="javascript:grin(':idea:')"><img src="<?php echo get_template_directory_uri(); ?>/images/smilies/icon_idea.gif" title="色" alt="色" /></a>
<a onclick="javascript:grin(':arrow:')"><img src="<?php echo get_template_directory_uri(); ?>/images/smilies/icon_arrow.gif" title="囧" alt="囧" /></a>
<a onclick="javascript:grin(':neutral:')"><img src="<?php echo get_template_directory_uri(); ?>/images/smilies/icon_neutral.gif" title="偷笑" alt="偷笑" /></a>
<a onclick="javascript:grin(':cry:')"><img src="<?php echo get_template_directory_uri(); ?>/images/smilies/icon_cry.gif" title="哭" alt="哭" /></a>
<a onclick="javascript:grin(':mrgreen:')"><img src="<?php echo get_template_directory_uri(); ?>/images/smilies/icon_mrgreen.gif" title="嘿" alt="嘿" /></a>
</div>

2、下载emoji表情包
很明显上面的文件我把emoji表情包/images/smilies/下面
百度网盘下载：http://pan.baidu.com/s/1c1NQyis
3、修复表情包引入
WordPress4.2之后，使用了Emoji表情，原有自定义表情快捷符号无法再转换为表情图片gif，而我们引入的是gif文件，这样并不会显示的，所以需要禁用前台与后台的相关emoji表情加载脚本，并修改css文件调整大小。加入以下代码至主题的functions.php内：

 
/**
 * 替换emjo表情修复WordPress升级4.2自定义表情的各种问题
 */
function disable_emoji($plugins) {
if (is_array($plugins)) {
return array_diff($plugins, array(
'wpemoji'
));
} else {
return array();
}
}
//取当前主题下images\smilies\下表情图片路径
function custom_smilie_src($old, $img) {
return get_stylesheet_directory_uri() . '/images/smilies/' . $img;
}
function init_fixsmilie() {
global $wpsmiliestrans;
add_filter('smilies_src','fa_smilies_src',1,10);
//默认表情文本与表情图片的对应关系(可自定义修改)
$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',
'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',
);
//移除WordPress4.2版本更新所带来的Emoji钩子同时挂上主题自带的表情路径
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_emoji');
add_filter('smilies_src', 'custom_smilie_src', 10, 2);
}
add_action('init', 'init_fixsmilie', 5);

这样你可以灵活的DIY,替换增加你喜欢的表情图标，文件的路径等等，轻松实现了WordPress评论插件表情功能，已经在WordPress4.7经过测试。

发布日期： 作者： 511遇见

所属分类： Wordpress 综合 标签： 　　

没有相关文章!

相关文章: