Hi there
desperadoj.com

为 WordPress 增加微博、贴吧及其他自定义表情

WordPress 自带的表情不是很好看,而微博 [微博doge] 和贴吧 [贴吧滑稽] 的表情更丰富美观,于是萌生了更换表情的想法,并马上付诸于实践。过程中参考了 重新定义wordpress的表情系统WordPress 4.2+禁用Emoji表情 两篇文章,实现自定义 WordPress 表情、表情分组、鼠标悬浮预览等功能。

演示

表情分组


鼠标悬浮预览效果

实现方法

functions.php 部分

在 functions.php 中添加如下代码,输入对应表情代码后就可以显示相关表情。

//表情

//取当前主题下自定义的表情图片路径
function custom_gitsmilie_src($old, $img) {
	return get_stylesheet_directory_uri() . '/img/emojis/all/' . $img;
}

//移除表情样式 max-height=1em 限制
function reset_smilies_style( $content ) {
	return str_replace( 'class="wp-smiley"', 'class="wp-smiley"', $content );
}

function init_gitsmilie() {
	global $wpsmiliestrans;
	//默认表情文本与表情图片的对应关系(可自定义修改)      
    
	//移除WordPress的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('smilies_src', 'custom_gitsmilie_src', 10, 2);
	add_filter( 'the_content', 'reset_smilies_style', 99 );
	add_filter( 'the_excerpt', 'reset_smilies_style', 99 );
	add_filter( 'comment_text', 'reset_smilies_style', 99 );
}
add_action('init', 'init_gitsmilie', 5); 

if ( !isset( $wpsmiliestrans ) ) {
$wpsmiliestrans = array(
	//微博表情
	'[微博doge]' => '0.png',
	'[微博喵喵]' => '1.png',
	'[微博二哈]' => '2.png',
	'[微博猪头]' => '3.png',
	'[微博兔子]' => '4.png',
	'[微博熊猫]' => '5.png',
	'[微博草泥马]' => '6.png',
	'[微博骷髅]' => '7.png',
	'[微博奥特曼]' => '8.png',
	'[微博抱抱]' => '9.png',
	'[微博摊手]' => '10.png',
	'[微博跪了]' => '11.png',
	'[微博吃瓜]' => '12.png',
	'[微博允悲]' => '13.png',
	'[微博坏笑]' => '14.png',
	'[微博笑cry]' => '15.png',
	'[微博馋嘴]' => '16.png',
	'[微博拜拜]' => '17.png',
	'[微博右哼哼]' => '18.png',
	'[微博左哼哼]' => '19.png',
	'[微博怒骂]' => '20.png',
	'[微博顶]' => '21.png',
	'[微博微笑]' => '22.png',
	'[微博偷笑]' => '23.png',
	'[微博舔屏]' => '24.png',
	'[微博亲亲]' => '25.png',
	'[微博太开心]' => '26.png',
	'[微博挤眼]' => '27.png',
	'[微博摔]' => '28.png',
	'[微博感冒]' => '29.png',
	'[微博可怜]' => '30.png',
	'[微博汗]' => '31.png',
	'[微博色]' => '32.png',
	'[微博可爱]' => '33.png',
	'[微博钱]' => '34.png',
	'[微博思考]' => '35.png',
	'[微博生病]' => '36.png',
	'[微博困]' => '37.png',
	'[微博互粉]' => '38.png',
	'[微博睡]' => '39.png',
	'[微博并不简单]' => '40.png',
	'[微博害羞]' => '41.png',
	'[微博费解]' => '42.png',
	'[微博挖鼻]' => '43.png',
	'[微博悲伤]' => '44.png',
	'[微博打脸]' => '45.png',
	'[微博抓狂]' => '46.png',
	'[微博哈哈]' => '47.png',
	'[微博傻眼]' => '48.png',
	'[微博晕]' => '49.png',
	'[微博鄙视]' => '50.png',
	'[微博哼]' => '51.png',
	'[微博哈欠]' => '52.png',
	'[微博泪]' => '53.png',
	'[微博怒]' => '54.png',
	'[微博闭嘴]' => '55.png',
	'[微博疑问]' => '56.png',
	'[微博白眼]' => '57.png',
	'[微博吐]' => '58.png',
	'[微博黑线]' => '59.png',
	'[微博委屈]' => '60.png',
	'[微博笑而不语]' => '61.png',
	'[微博阴险]' => '62.png',
	'[微博嘘]' => '63.png',
	'[微博嘻嘻]' => '64.png',
	'[微博爱你]' => '65.png',
	'[微博吃惊]' => '66.png',
	'[微博污]' => '67.png',
	'[微博鼓掌]' => '68.png',
	'[微博憧憬]' => '69.png',
	'[微博酷]' => '70.png',
	'[微博失望]' => '71.png',
	'[微博good]' => '72.png',
	'[微博弱]' => '73.png',
	'[微博耶]' => '74.png',
	'[微博来]' => '75.png',
	'[微博握手]' => '76.png',
	'[微博加油]' => '77.png',
	'[微博haha]' => '78.png',
	'[微博拳头]' => '79.png',
	'[微博赞]' => '80.png',
	'[微博ok]' => '81.png',
	'[微博NO]' => '82.png',
	'[微博作揖]' => '83.png',

	//贴吧表情
	'[贴吧呵呵]' => '84.png',
	'[贴吧哈哈]' => '85.png',
	'[贴吧吐舌]' => '83.png',
	'[贴吧啊]' => '87.png',
	'[贴吧酷]' => '88.png',
	'[贴吧怒]' => '89.png',
	'[贴吧开心]' => '90.png',
	'[贴吧汗]' => '91.png',
	'[贴吧泪]' => '92.png',
	'[贴吧黑线]' => '93.png',
	'[贴吧鄙视]' => '94.png',
	'[贴吧不高兴]' => '95.png',
	'[贴吧真棒]' => '96.png',
	'[贴吧钱]' => '97.png',
	'[贴吧疑问]' => '98.png',
	'[贴吧阴险]' => '99.png',
	'[贴吧吐]' => '100.png',
	'[贴吧咦]' => '101.png',
	'[贴吧委屈]' => '102.png',
	'[贴吧花心]' => '103.png',
	'[贴吧呼~]' => '104.png',
	'[贴吧笑眼]' => '105.png',
	'[贴吧冷]' => '106.png',
	'[贴吧太开心]' => '107.png',
	'[贴吧滑稽]' => '108.png',
	'[贴吧勉强]' => '109.png',
	'[贴吧狂汗]' => '110.png',
	'[贴吧乖]' => '111.png',
	'[贴吧睡觉]' => '112.png',
	'[贴吧惊哭]' => '113.png',
	'[贴吧升起]' => '114.png',
	'[贴吧惊讶]' => '115.png',
	'[贴吧喷]' => '116.png',
	'[贴吧爱心]' => '117.png',
	'[贴吧心碎]' => '118.png',
	'[贴吧玫瑰]' => '119.png',
	'[贴吧礼物]' => '120.png',
	'[贴吧彩虹]' => '121.png',
	'[贴吧星星月亮]' => '122.png',
	'[贴吧太阳]' => '123.png',
	'[贴吧钱币]' => '124.png',
	'[贴吧灯泡]' => '125.png',
	'[贴吧茶杯]' => '126.png',
	'[贴吧蛋糕]' => '127.png',
	'[贴吧音乐]' => '128.png',
	'[贴吧haha]' => '129.png',
	'[贴吧胜利]' => '130.png',
	'[贴吧大拇指]' => '131.png',
	'[贴吧弱]' => '132.png',
	'[贴吧OK]' => '133.png',
	);
}

HTML 部分

<!--引用JS,作者是基于jquery库做的,不要忘记库的引用,rl_exp,js即下文的javascript部分-->
<script type="text/javascript" src="https://apps.bdimg.com/libs/jquery/1.9.1/jquery.min.js?ver=5.0"></script>
<script type="text/javascript" src="/wp-content/themes/dux/js/rl_exp.js"></script>

<!--表情按钮-->
<a href="javascript:void(0);" id="rl_exp_btn"><i class="far fa-smile"></i></a>

<!--实现分组,下面都是配合JS来实现的-->
<div class="rl_exp" id="rl_bq" style="display:none;">
<ul class="rl_exp_tab clearfix">
	<li><a href="javascript:void(0);" class="selected">微博</a></li>
	<li><a href="javascript:void(0);">贴吧</a></li>
</ul>
<ul class="rl_exp_main clearfix rl_selected"></ul>
<ul class="rl_exp_main clearfix" style="display:none;"></ul>
<a href="javascript:void(0);" class="close">×</a>
</div>

CSS 样式

/*取消表情边距,设置单行显示*/
.wp-smiley{
	display: inline-block!important;
	margin: 0px!important;
	padding: 0px!important;
}

/*隐藏浏览器的outline,兼容IE*/
.rl_exp a{outline:none;blr:expression(this.onFocus=this.blur());}

/*表情按钮样式*/
#rl_exp_btn{
	line-height:36px;
	margin:5px;
	padding:3px;
	color:#b9babb;
	font-size:20px;
}

/*鼠标悬浮预览*/
#preview{position:absolute;border:1px solid #ccc;background:#f5f5f5;padding:5px;display:none;color:#fff;z-index:1002;}

/*表情框样式*/
.rl_exp{
	margin:0 auto;position:absolute;
	padding:6px;border: 1px solid #D0D0D0;
	box-shadow: 0 1px 1px rgba(0,0,0,.12), 0 1px 1px rgba(0,0,0,.12);
	overflow: hidden;background: none repeat scroll 0 0 white;zoom:1;z-index:1000;
}

/*分组标签样式*/
.rl_exp ul{list-style:none;margin:0;padding:0;}
.rl_exp ul li{display:list-item;}
.rl_exp ul.rl_exp_tab{
	margin:-6px -6px 6px;padding:6px 6px 0;list-style:none;overflow:hidden;
	border-bottom:1px solid #d0d0d0;border-top:1px solid #fff;
	background: -moz-linear-gradient(center top , #F6F6F6, #E5E5E5) repeat scroll 0 0 transparent;
	background: -webkit-gradient(linear,center top ,center bottom,from(#f6f6f6),to(#E5E5E5)) repeat scroll 0 0 transparent;
	filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='#f6f6f6', endColorstr='#E5E5E5');
}
.rl_exp ul.rl_exp_tab li{float:left;margin-right:10px;display:list-item;text-align: -webkit-match-parent;}
.rl_exp ul.rl_exp_tab li a{
	display: block;padding: 3px 7px;font-size:14px;text-decoration: none;color: #979797;border: 1px solid #c3c3c3;
	margin-bottom: -1px;
}
.rl_exp ul.rl_exp_tab li a.selected{zoom:1;background: #fff;border-bottom: 1px solid #fff;box-shadow: none;text-shadow: none;}

/*表情内容样式*/
.rl_exp_main{margin:0;padding:0;}
.rl_exp_item{
	cursor:pointer;float:left;border:1px solid #fce089;overflow:hidden;margin:-1px 0 0 -1px;padding:4px;text-align:center;
	background: #fef9e7;
}
.rl_exp_item:hover{border:1px solid #0095cd;background:#fff9ec;position:relative;z-index:1001;}
.rl_exp_item img{
	display:inline-block;*zoom:1;border:0;
	width:22px;
	height:22px;
}

/*关闭按钮样式*/
.close{
	position:absolute;right:6px;top:6px;text-decoration:none;
	font-family: "Helvetica Neue", Helvetica, Arial, sans-serif;font-size:20px;line-height:12px;
	color:#000;text-shadow:0 1px 0 #fff;opacity:0.2;filter:alpha(opacity=20);
}
.close:hover,.close:focus{
	color:#000;cursor:pointer;opacity:0.4;filter:alpha(opacity=40);
}

/*公共清浮类,摘自bootstrap*/
.clearfix{*zoom:1;}
.clearfix:before,.clearfix:after{display:table;line-height:0;content:"";}
.clearfix:after{clear:both;}

Javascript 部分

/*
*	评论表情渲染JS
*	@author:	小毛(微博:BUPT朱小毛)
*	@data:		2013年2月17日
*	@version:	1.0
*	@rely:		jQuery
*/
$(function(){
	/*
	*		参数说明
	*		baseUrl:	【字符串】表情路径的基地址
	*		pace:		【数字】表情弹出层淡入淡出的速度
	*		dir:		【数组】保存表情包文件夹名字
	*		text:		【二维数组】保存表情包title文字
	*		num:		【数组】保存表情包表情个数
	*		isExist:	【数组】保存表情是否加载过,对于加载过的表情包不重复请求。
	*/
	var rl_exp = {
		baseUrl:	'/wp-content/themes/dux/img/emojis/',
		pace:		200,
		dir:		['weibo','tieba'],
		text:[			/*表情包title文字,自己补充*/
			[
				'微博doge','微博喵喵','微博二哈','微博猪头','微博兔子','微博熊猫','微博草泥马','微博骷髅','微博奥特曼','微博抱抱','微博摊手','微博跪了','微博吃瓜','微博允悲','微博坏笑','微博笑cry','微博馋嘴','微博拜拜','微博右哼哼','微博左哼哼','微博怒骂','微博顶','微博微笑','微博偷笑','微博舔屏','微博亲亲','微博太开心','微博挤眼','微博衰','微博感冒','微博可怜','微博汗','微博色','微博可爱','微博钱','微博思考','微博生病','微博困','微博互粉','微博睡','微博并不简单','微博害羞','微博费解','微博挖鼻','微博悲伤','微博打脸','微博抓狂','微博哈哈','微博傻眼','微博晕','微博鄙视','微博哼','微博哈欠','微博泪','微博怒','微博闭嘴','微博疑问','微博白眼','微博吐','微博黑线','微博委屈','微博笑而不语','微博阴险','微博嘘','微博嘻嘻','微博爱你','微博吃惊','微博污','微博鼓掌','微博憧憬','微博酷','微博失望','微博good','微博弱','微博耶','微博来','微博握手','微博加油','微博haha','微博拳头','微博赞','微博ok','微博NO','微博作揖'
			],
			[
				'贴吧呵呵','贴吧哈哈','贴吧吐舌','贴吧啊','贴吧酷','贴吧怒','贴吧开心','贴吧汗','贴吧泪','贴吧黑线','贴吧鄙视','贴吧不高兴','贴吧真棒','贴吧钱','贴吧疑问','贴吧阴险','贴吧吐','贴吧咦','贴吧委屈','贴吧花心','贴吧呼~','贴吧笑眼','贴吧冷','贴吧太开心','贴吧滑稽','贴吧勉强','贴吧狂汗','贴吧乖','贴吧睡觉','贴吧惊哭','贴吧升起','贴吧惊讶','贴吧喷','贴吧爱心','贴吧心碎','贴吧玫瑰','贴吧礼物','贴吧彩虹','贴吧星星月亮','贴吧太阳','贴吧钱币','贴吧灯泡','贴吧茶杯','贴吧蛋糕','贴吧音乐','贴吧haha','贴吧胜利','贴吧大拇指','贴吧弱','贴吧OK'
			],
		],
		num:		[84,50],
		isExist:	[0,0],
		bind:	function(i){
			$("#rl_bq .rl_exp_main").eq(i).find('.rl_exp_item').each(function(){
				$(this).bind('click',function(){
					rl_exp.insertText(document.getElementById('comment'),' '+'['+$(this).find('img').attr('title')+']'+' ');
					$('#rl_bq').fadeOut(rl_exp.pace);
				});
			});
		},


		/*加载表情包函数*/
		loadImg:function(i){
			var node = $("#rl_bq .rl_exp_main").eq(i);
			for(var j = 0; j<rl_exp.num[i];j++){
				var domStr = 	'<li class="rl_exp_item">' +
									'<img class="emoji" src="' + rl_exp.baseUrl + '' + rl_exp.dir[i] + '/' + j + '.png" alt="' + rl_exp.text[i][j] + '" title="' + rl_exp.text[i][j] + '" />' +
								'</li>';
				$(domStr).appendTo(node);

			/*鼠标悬停显示预览*/
				xOffset =-25;
				yOffset =-30;
		       	   $(".emoji").hover(function(e){
		
					$("body").append("<div id='preview'><img src='"+ this.src +"'/></div>");								 
					$("#preview")
						.css("top",(e.pageY - xOffset) + "px")
						.css("left",(e.pageX + yOffset) + "px")
						.fadeIn("fast");
			    },
				function(){
					$("#preview").remove();
			    });	
				$(".emoji").mousemove(function(e){
					$("#preview")
						.css("top",(e.pageY - xOffset) + "px")
						.css("left",(e.pageX + yOffset) + "px");
			    });	

			}
			rl_exp.isExist[i] = 1;
			rl_exp.bind(i);
		},

		/*在textarea里光标后面插入文字*/
		insertText:function(obj,str){
			obj.focus();
			if (document.selection) {
				var sel = document.selection.createRange();
				sel.text = str;
			} else if (typeof obj.selectionStart == 'number' && typeof obj.selectionEnd == 'number') {
				var startPos = obj.selectionStart,
					endPos = obj.selectionEnd,
					cursorPos = startPos,
					tmpStr = obj.value;
				obj.value = tmpStr.substring(0, startPos) + str + tmpStr.substring(endPos, tmpStr.length);
				cursorPos += str.length;
				obj.selectionStart = obj.selectionEnd = cursorPos;
			} else {
				obj.value += str;
			}
		},
		init:function(){
			$("#rl_bq > ul.rl_exp_tab > li > a").each(function(i){
				$(this).bind('click',function(){
					if( $(this).hasClass('selected') )
						return;
					if( rl_exp.isExist[i] == 0 ){
						rl_exp.loadImg(i);
					}
					$("#rl_bq > ul.rl_exp_tab > li > a.selected").removeClass('selected');
					$(this).addClass('selected');
					$('#rl_bq .rl_selected').removeClass('rl_selected').hide();
					$('#rl_bq .rl_exp_main').eq(i).addClass('rl_selected').show();
				});
			});
			/*绑定表情弹出按钮响应,初始化弹出默认表情。*/
			$("#rl_exp_btn").bind('click',function(){
				if( rl_exp.isExist[0] == 0 ){
					rl_exp.loadImg(0);
				}
				var w = $(this).position();
				$('#rl_bq').css({left:w.left,top:w.top+30}).fadeIn(400);
			});
			/*绑定关闭按钮*/
			$('#rl_bq a.close').bind('click',function(){
				$('#rl_bq').fadeOut(rl_exp.pace);
			});
			/*绑定document点击事件,对target不在rl_bq弹出框上时执行rl_bq淡出,并阻止target在弹出按钮的响应。*/
			$(document).bind('click',function(e){
				var target = $(e.target);
				if( target.closest("#rl_exp_btn").length == 1 )
					return;
				if( target.closest("#rl_bq").length == 0 ){
					$('#rl_bq').fadeOut(rl_exp.pace);
				}
			});
		}
	};
	rl_exp.init();	//调用初始化函数。
});

资源下载

下面提供本博客所使用的微博及贴吧表情包资源,增添或删减表情注意保持命名序号连续,并修改上文代码中的对应路径。

赞(2) 打赏
本文采用 CC BY-NC 4.0 进行许可,转载请注明出处:如风 » 为 WordPress 增加微博、贴吧及其他自定义表情

评论 1

  • 昵称 (必填)
  • 邮箱 (必填)
  • 网址
  1. #1

    微博表情包是我最爱的表情包 [微博doge] [微博喵喵] [微博二哈]

    DesperadoJWindows 10 | Chrome 68.0.3440.106 | 2年前 (2018-08-23)回复

觉得文章有用就打赏一下文章作者

微信扫一扫打赏