为 WordPress 增加微博、贴吧及其他自定义表情
|
4,740
|
1
|
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" style="height: 1em; max-height: 1em;"', '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;
}

/*表情按钮样式*/
#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();  //调用初始化函数。
});

资源下载

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

下载地址

EmojiWordPress教程

评论

  1. DesperadoJ
    博主
    Chrome 68.0.3440.106
    6 年前
    2018-8-23 0:02:18

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

发送评论 编辑评论 


				

			

						

				

					

						

							

								
							

							
						

					

				

				

					

						

							

								
							

							
						

					

				

				

					

						

							

								
							

							
							
													

					

				

			

			
			

				

					
				

			

				

											

							
							
						

																					

							
							
						

										
					
											
						

	

		
|´・ω・)ノ
ヾ(≧∇≦*)ゝ
(☆ω☆)
（╯‵□′）╯︵┴─┴
￣﹃￣
(/ω＼)
∠( ᐛ 」∠)＿
(๑•̀ㅁ•́ฅ)
→_→
୧(๑•̀⌄•́๑)૭
٩(ˊᗜˋ*)و
(ノ°ο°)ノ
(´இ皿இ｀)
⌇●﹏●⌇
(ฅ´ω`ฅ)
(╯°A°)╯︵○○○
φ(￣∇￣o)
ヾ(´･ ･｀｡)ノ"
( ง ᵒ̌皿ᵒ̌)ง⁼³₌₃
(ó﹏ò｡)
Σ(っ °Д °;)っ
( ,,´･ω･)ﾉ"(´っω･｀｡)
╮(╯▽╰)╭
o(*////▽////*)q
＞﹏＜
( ๑´•ω•) "(ㆆᴗㆆ)
😂
😀
😅
😊
🙂
🙃
😌
😍
😘
😜
😝
😏
😒
🙄
😳
😡
😔
😫
😱
😭
💩
👻
🙌
🖕
👍
👫
👬
👭
🌚
🌝
🙈
💊
😶
🙏
🍦
🍉
😣
Source: github.com/k4yt3x/flowerhd
	

	

		
颜文字
Emoji
小恐龙
花!
	


									

			

			
			
		

	






上一篇
下一篇