注册时间2024-11-22
最后登录2025-11-14
在线时间1295 小时
UID1
买家信用
卖家信用
风云·优秀版主
|
资源无需等待,交易就趁现在,全面资源整合网络大咖云集,让你轻松玩转互联网!
您需要 登录 才可以下载或查看,没有账号?立即注册
×
这篇文章当作一个笔记,恐怕后面记不住来看几眼,一款给子比主题自定义表情包的教程,很多站长喜欢自己去做自己的表情包在评论区,所以这篇教程来了!
根据子比主题更新最新版本,那么表情包文件代码也有所更新,所以今天更新给大家更新本篇文章,我将保留之前的教程和最新子比主题也就是更新子比商城版本的后的部署!
代码部署
此教程比较复杂,所以跟着我的步骤一步步走,这样才可以实现我们的自定义表情包哦,首先子比商城更新之后我们只改/wp-content/themes/zibll/inc/functions/functions.php这个文件,新版和旧版只改这个文件,其他的正常部署就行!
旧版教程
定位:/wp-content/themes/zibll/inc/functions/functions.php文件里面,然后搜“表情”,如下图
接下来就是我们把你想要加入的表情包名称像这样添加在里面,如下图
如上图,design就是分类相当于评论区的分类然后suffix是格式如:gif、png(png不行)等等表情包格式,我这里设置的全部都gif格式的,那么你也可以设置gif,那我就以gif的教程分享,如下代码就是图上代码,替换你自带的
- //表情
- if ('smilie' == $type) {
- $but = '<a class="but btn-input-expand input-smilie mr6" href="javascript:;"><i class="fa fa-fw fa-smile-o"></i><span class="hide-sm">表情</span></a>';
- $smilie_icon_args = array(
- array(
- 'design' => '豆仔',
- 'suffix' => '.gif',
- 'name' => array('被打', '吃瓜', '超爱', '熬夜', '吃手', '值得肯定', '擦汗', '出家人', '鼓掌', '扶额', '倚墙笑', '我看好你', '呲牙', '抬眼镜', '缺牙笑', '愤怒', '尬笑', '感动', '狗头', '狗头意外', '拜托', '偷偷看', '好的', '滑稽吃瓜', '滑稽狂汗', '滑稽笑', '惊吓', '纠结', '开心', '抠鼻', '狂热', '老虎意外', '泪奔', '裂开', '流鼻涕', '流汗微笑', '蒙面滑稽', '勉强笑', '难以置信', '翻白眼', '傻笑', '思考', '送花', '恶心', '鬼脸', '吐血', '奋斗', '捂脸', '捂嘴笑', '喜欢', '小偷', '笑哭','眩晕', '疑问', '引起不适', '应援', '爆炸', '3d眼镜', '菜狗', '菜狗花', '吵架', '发红包', '滑稽奶茶', '加班', '惊讶', '深思', '耍酷', '小丑', '整理发型', '猪头', '猪头意外', '不好意思', '财神红包', '错误', '打咩', '打牌', '斗鸡眼', '读书', '放鞭炮', '嘿哈', '胡子', '滑稽被子', '击剑', '饥渴', '禁言', '惬意', '送福', '托腮', '有没有搞错', '月饼', '再见', '正确')
- ),
- array(
- 'design' => '抖音',
- 'suffix' => '.gif',
- 'name' => array('呲牙笑', '吃瓜', '小鼓掌', '大笑', '强', '大哭', '捂脸笑', '笑哭', '狗头', '翻白眼', '鬼脸', '舔屏', '害羞', '憨笑', '黑脸', '嘿哈', '机智', '奸笑', '金牙', '惊恐', '惊喜', '囧', '泪奔', '礼貌的笑', '灵机一动', '流泪', '摸头', '难过', '哦耶', '泣不成声', '打脸', '亲亲', '色', '耍酷', '衰', '思考', '送心', '哈欠', '微笑', '委屈', '捂脸', '大骂', '捂嘴笑', '调皮', '发呆', '斜眼', '耶', '阴险', '左哼哼', '右哼哼', '愉快', '赞', '皱眉', '666','爱心', '白眼', '抱拳', '比心',)
- ),
- array(
- 'design' => '枕边童话',
- 'suffix' => '.gif',
- 'name' => array('zbth0', 'zbth1', 'zbth2', 'zbth3', 'zbth4', 'zbth5', 'zbth6', 'zbth7', 'zbth8', 'zbth9', 'zbth10', 'zbth11', 'zbth12', 'zbth13', 'zbth14', 'zbth15', 'zbth16', 'zbth17', 'zbth18', 'zbth19', 'zbth20', 'zbth21', 'zbth22', 'zbth23', 'zbth24',)
- ),
- );
- $smilie_icon = '';
- $img_url = get_stylesheet_directory_uri() . '/img/smilies/';
- $lazy_attr = zib_is_lazy('lazy_other', true) ? 'class="lazyload" data-' : '';
- $but_t = '';
- foreach ($smilie_icon_args as $smilie_t){
- foreach ($smilie_t['name'] as $smilie_i) {
- $smilie_icon .= '<a class="smilie-icon ' .$smilie_t['design']. ' d-smilie" href="javascript:;" data-smilie="' . $smilie_t['design'].'/'.$smilie_i.$smilie_t['suffix'] . '"><img ' . $lazy_attr . 'src="' . $img_url. $smilie_t['design'].'/' . $smilie_i .$smilie_t['suffix']. '" alt="[' . $smilie_i . ']" /></a>';
- }
- $but_t .= '<a class="but btn-input-expand input-smilie mr6" style="flex-shrink: 0;margin-bottom: 2px;margin-top: 2px;"onclick=\'$(".d-smilie").attr("style","display:none");$(".'.$smilie_t['design'].'").attr("style","display:inline-block")\' href="javascript:;""><span>'.$smilie_t['design'].'</span></a>';
- }
- $first='<script>$(".smilie-icon").attr("style","display:none");$(".'.$smilie_icon_args[0]['design'].'").attr("style","display:inline-block")</script>';
- $dropdown = '<div class="dropdown-smilie scroll-y mini-scrollbar" style="width:300px">' . $smilie_icon . '</div><div class="mini-scrollbar" style="display: flex;overflow-x: auto;overflow-y: hidden;width: 300px;">' . $but_t .$first. '</div>';
- }
- //表情结束
复制代码
我们直接替换上图的圈住的代码即可,因为这个版本子比用了case做的,直接替换我下面的代码即可!
- case 'smilie':
- $but = '<a class="but btn-input-expand input-smilie mr6" href="javascript:;"><i class="fa fa-fw fa-smile-o"></i><span class="hide-sm">表情</span></a>';
- $smilie_icon_args = array(
- array(
- 'design' => '豆仔',
- 'suffix' => '.gif',
- 'name' => array('被打', '吃瓜', '超爱', '熬夜', '吃手', '值得肯定', '擦汗', '出家人', '鼓掌', '扶额', '倚墙笑', '我看好你', '呲牙', '抬眼镜', '缺牙笑', '愤怒', '尬笑', '感动', '狗头', '狗头意外', '拜托', '偷偷看', '好的', '滑稽吃瓜', '滑稽狂汗', '滑稽笑', '惊吓', '纠结', '开心', '抠鼻', '狂热', '老虎意外', '泪奔', '裂开', '流鼻涕', '流汗微笑', '蒙面滑稽', '勉强笑', '难以置信', '翻白眼', '傻笑', '思考', '送花', '恶心', '鬼脸', '吐血', '奋斗', '捂脸', '捂嘴笑', '喜欢', '小偷', '笑哭','眩晕', '疑问', '引起不适', '应援', '爆炸', '3d眼镜', '菜狗', '菜狗花', '吵架', '发红包', '滑稽奶茶', '加班', '惊讶', '深思', '耍酷', '小丑', '整理发型', '猪头', '猪头意外', '不好意思', '财神红包', '错误', '打咩', '打牌', '斗鸡眼', '读书', '放鞭炮', '嘿哈', '胡子', '滑稽被子', '击剑', '饥渴', '禁言', '惬意', '送福', '托腮', '有没有搞错', '月饼', '再见', '正确')
- ),
- array(
- 'design' => '抖音',
- 'suffix' => '.gif',
- 'name' => array('呲牙笑', '吃瓜', '小鼓掌', '大笑', '强', '大哭', '捂脸笑', '笑哭', '狗头', '翻白眼', '鬼脸', '舔屏', '害羞', '憨笑', '黑脸', '嘿哈', '机智', '奸笑', '金牙', '惊恐', '惊喜', '囧', '泪奔', '礼貌的笑', '灵机一动', '流泪', '摸头', '难过', '哦耶', '泣不成声', '打脸', '亲亲', '色', '耍酷', '衰', '思考', '送心', '哈欠', '微笑', '委屈', '捂脸', '大骂', '捂嘴笑', '调皮', '发呆', '斜眼', '耶', '阴险', '左哼哼', '右哼哼', '愉快', '赞', '皱眉', '666','爱心', '白眼', '抱拳', '比心',)
- ),
- array(
- 'design' => '枕边童话',
- 'suffix' => '.gif',
- 'name' => array('zbth0', 'zbth1', 'zbth2', 'zbth3', 'zbth4', 'zbth5', 'zbth6', 'zbth7', 'zbth8', 'zbth9', 'zbth10', 'zbth11', 'zbth12', 'zbth13', 'zbth14', 'zbth15', 'zbth16', 'zbth17', 'zbth18', 'zbth19', 'zbth20', 'zbth21', 'zbth22', 'zbth23', 'zbth24',)
- ),
- );
- $smilie_icon = '';
- $img_url = get_stylesheet_directory_uri() . '/img/smilies/';
- $lazy_attr = zib_is_lazy('lazy_other', true) ? 'class="lazyload" data-' : '';
- $but_t = '';
-
- foreach ($smilie_icon_args as $smilie_t) {
- foreach ($smilie_t['name'] as $smilie_i) {
- $smilie_icon .= '<a class="smilie-icon ' . $smilie_t['design'] . ' d-smilie" href="javascript:;" data-smilie="' . $smilie_t['design'] . '/' . $smilie_i . $smilie_t['suffix'] . '">';
- $smilie_icon .= '<img ' . $lazy_attr . 'src="' . $img_url . $smilie_t['design'] . '/' . $smilie_i . $smilie_t['suffix'] . '" alt="[' . $smilie_i . ']" />';
- $smilie_icon .= '</a>';
- }
-
- $but_t .= '<a class="but btn-input-expand input-smilie mr6" style="flex-shrink: 0;margin-bottom: 2px;margin-top: 2px;" ';
- $but_t .= 'onclick=\'$(".d-smilie").hide();$(".' . $smilie_t['design'] . '").show()\' href="javascript:;">';
- $but_t .= '<span>' . $smilie_t['design'] . '</span></a>';
- }
-
- $first_design = $smilie_icon_args[0]['design'];
- $first = '<script>$(".d-smilie").hide();$(".' . $first_design . '").show();</script>';
-
- $dropdown = '<div class="dropdown-smilie scroll-y mini-scrollbar" style="width:300px">' . $smilie_icon . '</div>';
- $dropdown .= '<div class="mini-scrollbar" style="display: flex;overflow-x: auto;overflow-y: hidden;width: 300px;">' . $but_t . $first . '</div>';
- break;
复制代码
接下来我们定位:/wp-content/themes/zibll/img/smilies文件里面,如下图,可以看到我是每个分类一个文件夹,因为他文件夹是对应每个表情包的,所以我的方法是这样,你要是有其他更好的也可以!
那么这三个文件夹就是三个分类的表情包,后面我会打包给你们,然后我们进行下一步,下一步就是非常的这样,跟着我的步骤走就行!
定位:/wp-content/themes/zibll/inc/functions/message/class/message-class.php文件里面,然后搜代码
- <img class="smilie-icon" src="'
复制代码 如下图删掉后面的gif,注意看我注释说的!
为什么要删这个gif呢,那么我来告诉你,这个是你私信的表情包,就是后缀多了gif,
然后我们继续删掉gif,继续定位:/wp-content/themes/zibll/inc/functions/zib-comments-list.php文件
然后我们还是搜刚才的代码,如下图还是删掉gif就可以了
为什么要删这个gif呢,那么我来告诉你,这个是你评论区的表情包,就是后缀多了gif!
教程就到这里了,附件在下面,你上传到/wp-content/themes/zibll/img/smilies里面就可以,让他变成分类表情包
哦,忘了,最后记得将下面的css放到:子比主题–>>自定义CSS样式即可,你也可以不加,因为这个css是调整表情包一行显示5个样式,你也可以不放,我觉得放上去比较美观
- .dropdown-smilie .smilie-icon {
- width: 48px !important;
- }
- .smilie-icon {
- width: 48px !important;
- }
复制代码
文件大小:
2.78 KB
下载次数:
0
下载积分:
贡献 -50 点, 经验 1 值
表情包素材
|
|