返回列表 发布新帖
查看: 80|回复: 0

[代码技巧] 子比主题 – 自定义分类表情包教程

[复制链接]
SunJu_FaceMall
社区贡献

315

主题

190

回帖

1万

积分

等级头衔
Icon组别 : 管理员
Icon等级 :

积分成就
   钻石 : 524 颗
   贡献 : 1779 点
   金币 : 12 枚
Icon在线时间 : 1295 小时
Icon注册时间 : 2024-11-22
Icon最后登录 : 2025-11-14

荣誉勋章

会员LV.1会员LV.2会员LV.3会员LV.4会员LV.5会员LV.6会员LV.7会员LV.8会员LV.9会员LV.10

风云·优秀版主

飞流名人堂成员

1

实名认证 手机认证 vip vip-year FLLTCN发表于 2025-10-10 18:01:11 | 查看全部 |阅读模式 浙江金华

资源无需等待,交易就趁现在,全面资源整合网络大咖云集,让你轻松玩转互联网!

您需要 登录 才可以下载或查看,没有账号?立即注册

×
这篇文章当作一个笔记,恐怕后面记不住来看几眼,一款给子比主题自定义表情包的教程,很多站长喜欢自己去做自己的表情包在评论区,所以这篇教程来了!

tengfei_down - 2025-10-10T175312.030.webp
根据子比主题更新最新版本,那么表情包文件代码也有所更新,所以今天更新给大家更新本篇文章,我将保留之前的教程和最新子比主题也就是更新子比商城版本的后的部署!

代码部署



此教程比较复杂,所以跟着我的步骤一步步走,这样才可以实现我们的自定义表情包哦,首先子比商城更新之后我们只改/wp-content/themes/zibll/inc/functions/functions.php这个文件,新版和旧版只改这个文件,其他的正常部署就行!
旧版教程
定位:/wp-content/themes/zibll/inc/functions/functions.php文件里面,然后搜“表情”,如下图

tengfei_down - 2025-10-10T175423.483.webp
接下来就是我们把你想要加入的表情包名称像这样添加在里面,如下图
tengfei_down - 2025-10-10T175447.148.webp
如上图,design就是分类相当于评论区的分类然后suffix是格式如:gif、png(png不行)等等表情包格式,我这里设置的全部都gif格式的,那么你也可以设置gif,那我就以gif的教程分享,如下代码就是图上代码,替换你自带的
  1.     //表情
  2.     if ('smilie' == $type) {
  3.         $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>';
  4.         $smilie_icon_args = array(
  5.                 array(
  6.                         'design' => '豆仔',
  7.                         'suffix' => '.gif',
  8.                         'name' => array('被打', '吃瓜', '超爱', '熬夜', '吃手', '值得肯定', '擦汗', '出家人', '鼓掌', '扶额', '倚墙笑', '我看好你', '呲牙', '抬眼镜', '缺牙笑', '愤怒', '尬笑', '感动', '狗头', '狗头意外', '拜托', '偷偷看', '好的', '滑稽吃瓜', '滑稽狂汗', '滑稽笑', '惊吓', '纠结', '开心', '抠鼻', '狂热', '老虎意外', '泪奔', '裂开', '流鼻涕', '流汗微笑', '蒙面滑稽', '勉强笑', '难以置信', '翻白眼', '傻笑', '思考', '送花', '恶心', '鬼脸', '吐血', '奋斗', '捂脸', '捂嘴笑', '喜欢', '小偷', '笑哭','眩晕', '疑问', '引起不适', '应援', '爆炸', '3d眼镜', '菜狗', '菜狗花', '吵架', '发红包', '滑稽奶茶', '加班', '惊讶', '深思', '耍酷', '小丑', '整理发型', '猪头', '猪头意外', '不好意思', '财神红包', '错误', '打咩', '打牌', '斗鸡眼', '读书', '放鞭炮', '嘿哈', '胡子', '滑稽被子', '击剑', '饥渴', '禁言', '惬意', '送福', '托腮', '有没有搞错', '月饼', '再见', '正确')
  9.                 ),
  10.                 array(
  11.                         'design' => '抖音',
  12.                         'suffix' => '.gif',
  13.                         'name' => array('呲牙笑', '吃瓜', '小鼓掌', '大笑', '强', '大哭', '捂脸笑', '笑哭', '狗头', '翻白眼', '鬼脸', '舔屏', '害羞', '憨笑', '黑脸', '嘿哈', '机智', '奸笑', '金牙', '惊恐', '惊喜', '囧', '泪奔', '礼貌的笑', '灵机一动', '流泪', '摸头', '难过', '哦耶', '泣不成声', '打脸', '亲亲', '色', '耍酷', '衰', '思考', '送心', '哈欠', '微笑', '委屈', '捂脸', '大骂', '捂嘴笑', '调皮', '发呆', '斜眼', '耶', '阴险', '左哼哼', '右哼哼', '愉快', '赞', '皱眉', '666','爱心', '白眼', '抱拳', '比心',)
  14.                 ),
  15.                 array(
  16.                         'design' => '枕边童话',
  17.                         'suffix' => '.gif',
  18.                         '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',)
  19.                 ),
  20.     );
  21.         $smilie_icon      = '';
  22.         $img_url          = get_stylesheet_directory_uri() . '/img/smilies/';
  23.         $lazy_attr        = zib_is_lazy('lazy_other', true) ? 'class="lazyload" data-' : '';
  24.         $but_t            = '';
  25.         foreach ($smilie_icon_args as $smilie_t){
  26.             foreach ($smilie_t['name'] as $smilie_i) {
  27.                 $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>';
  28.             }
  29.             $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>';
  30.         }
  31.         $first='<script>$(".smilie-icon").attr("style","display:none");$(".'.$smilie_icon_args[0]['design'].'").attr("style","display:inline-block")</script>';
  32.         $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>';
  33. }
  34.     //表情结束
复制代码

tengfei_down - 2025-10-10T175545.659.webp
我们直接替换上图的圈住的代码即可,因为这个版本子比用了case做的,直接替换我下面的代码即可!
  1.         case 'smilie':
  2.             $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>';
  3.             $smilie_icon_args = array(
  4.                 array(
  5.                     'design' => '豆仔',
  6.                     'suffix' => '.gif',
  7.                     'name' => array('被打', '吃瓜', '超爱', '熬夜', '吃手', '值得肯定', '擦汗', '出家人', '鼓掌', '扶额', '倚墙笑', '我看好你', '呲牙', '抬眼镜', '缺牙笑', '愤怒', '尬笑', '感动', '狗头', '狗头意外', '拜托', '偷偷看', '好的', '滑稽吃瓜', '滑稽狂汗', '滑稽笑', '惊吓', '纠结', '开心', '抠鼻', '狂热', '老虎意外', '泪奔', '裂开', '流鼻涕', '流汗微笑', '蒙面滑稽', '勉强笑', '难以置信', '翻白眼', '傻笑', '思考', '送花', '恶心', '鬼脸', '吐血', '奋斗', '捂脸', '捂嘴笑', '喜欢', '小偷', '笑哭','眩晕', '疑问', '引起不适', '应援', '爆炸', '3d眼镜', '菜狗', '菜狗花', '吵架', '发红包', '滑稽奶茶', '加班', '惊讶', '深思', '耍酷', '小丑', '整理发型', '猪头', '猪头意外', '不好意思', '财神红包', '错误', '打咩', '打牌', '斗鸡眼', '读书', '放鞭炮', '嘿哈', '胡子', '滑稽被子', '击剑', '饥渴', '禁言', '惬意', '送福', '托腮', '有没有搞错', '月饼', '再见', '正确')
  8.                 ),
  9.                 array(
  10.                     'design' => '抖音',
  11.                     'suffix' => '.gif',
  12.                     'name' => array('呲牙笑', '吃瓜', '小鼓掌', '大笑', '强', '大哭', '捂脸笑', '笑哭', '狗头', '翻白眼', '鬼脸', '舔屏', '害羞', '憨笑', '黑脸', '嘿哈', '机智', '奸笑', '金牙', '惊恐', '惊喜', '囧', '泪奔', '礼貌的笑', '灵机一动', '流泪', '摸头', '难过', '哦耶', '泣不成声', '打脸', '亲亲', '色', '耍酷', '衰', '思考', '送心', '哈欠', '微笑', '委屈', '捂脸', '大骂', '捂嘴笑', '调皮', '发呆', '斜眼', '耶', '阴险', '左哼哼', '右哼哼', '愉快', '赞', '皱眉', '666','爱心', '白眼', '抱拳', '比心',)
  13.                 ),
  14.                 array(
  15.                     'design' => '枕边童话',
  16.                     'suffix' => '.gif',
  17.                     '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',)
  18.                 ),
  19.             );
  20.             $smilie_icon = '';
  21.             $img_url = get_stylesheet_directory_uri() . '/img/smilies/';
  22.             $lazy_attr = zib_is_lazy('lazy_other', true) ? 'class="lazyload" data-' : '';
  23.             $but_t = '';
  24.             
  25.             foreach ($smilie_icon_args as $smilie_t) {
  26.                 foreach ($smilie_t['name'] as $smilie_i) {
  27.                     $smilie_icon .= '<a class="smilie-icon ' . $smilie_t['design'] . ' d-smilie" href="javascript:;" data-smilie="' . $smilie_t['design'] . '/' . $smilie_i . $smilie_t['suffix'] . '">';
  28.                     $smilie_icon .= '<img ' . $lazy_attr . 'src="' . $img_url . $smilie_t['design'] . '/' . $smilie_i . $smilie_t['suffix'] . '" alt="[' . $smilie_i . ']" />';
  29.                     $smilie_icon .= '</a>';
  30.                 }
  31.                
  32.                 $but_t .= '<a class="but btn-input-expand input-smilie mr6" style="flex-shrink: 0;margin-bottom: 2px;margin-top: 2px;" ';
  33.                 $but_t .= 'onclick=\'$(".d-smilie").hide();$(".' . $smilie_t['design'] . '").show()\' href="javascript:;">';
  34.                 $but_t .= '<span>' . $smilie_t['design'] . '</span></a>';
  35.             }
  36.             
  37.             $first_design = $smilie_icon_args[0]['design'];
  38.             $first = '<script>$(".d-smilie").hide();$(".' . $first_design . '").show();</script>';
  39.             
  40.             $dropdown = '<div class="dropdown-smilie scroll-y mini-scrollbar" style="width:300px">' . $smilie_icon . '</div>';
  41.             $dropdown .= '<div class="mini-scrollbar" style="display: flex;overflow-x: auto;overflow-y: hidden;width: 300px;">' . $but_t . $first . '</div>';
  42.             break;
复制代码

接下来我们定位:/wp-content/themes/zibll/img/smilies文件里面,如下图,可以看到我是每个分类一个文件夹,因为他文件夹是对应每个表情包的,所以我的方法是这样,你要是有其他更好的也可以!
tengfei_down - 2025-10-10T175631.603.webp

那么这三个文件夹就是三个分类的表情包,后面我会打包给你们,然后我们进行下一步,下一步就是非常的这样,跟着我的步骤走就行!
定位:/wp-content/themes/zibll/inc/functions/message/class/message-class.php文件里面,然后搜代码

  1. <img class="smilie-icon" src="'
复制代码
如下图删掉后面的gif,注意看我注释说的!
tengfei_down - 2025-10-10T175757.069.webp

为什么要删这个gif呢,那么我来告诉你,这个是你私信的表情包,就是后缀多了gif,
然后我们继续删掉gif,继续定位:/wp-content/themes/zibll/inc/functions/zib-comments-list.php文件
然后我们还是搜刚才的代码,如下图还是删掉gif就可以了

tengfei_down - 2025-10-10T175832.589.webp

为什么要删这个gif呢,那么我来告诉你,这个是你评论区的表情包,就是后缀多了gif!
教程就到这里了,附件在下面,你上传到/wp-content/themes/zibll/img/smilies里面就可以,让他变成分类表情包
哦,忘了,最后记得将下面的css放到:子比主题–>>自定义CSS样式即可,你也可以不加,因为这个css是调整表情包一行显示5个样式,你也可以不放,我觉得放上去比较美观

  1. .dropdown-smilie .smilie-icon {
  2.           width: 48px !important;
  3.           }
  4.           .smilie-icon {
  5.           width: 48px !important;
  6.           }
复制代码
2025-10-10 18:00 上传
文件大小:
2.78 KB
下载次数:
0
下载积分:
贡献 -50 点, 经验 1 值
表情包素材
严禁发布违规违法的信息内容链接,违者经审查后予以警告或封号处理!

本帖被以下淘专辑推荐:

路虽远,行则将至;事虽难,做则必成。
您需要登录后才可以回帖 登录 | 立即注册

本版积分规则

飞流广播+ 发布

系统消息:柒沐已经连续答对3道难题,逆天学霸谁与争锋?!#每日答题#
10-30 17:02
系统消息:柒沐已经连续答对10道难题,逆天学霸谁与争锋?!#每日答题#
10-09 09:07
系统消息:柒沐已经连续答对3道难题,逆天学霸谁与争锋?!#每日答题#
09-24 09:00
系统消息:柒沐已经连续答对3道难题,逆天学霸谁与争锋?!#每日答题#
09-11 11:40
系统消息:柒沐已经连续答对3道难题,逆天学霸谁与争锋?!#每日答题#
09-02 09:17
系统消息:柒沐已经连续答对3道难题,逆天学霸谁与争锋?!#每日答题#
08-27 08:56
系统消息:柒沐已经连续答对3道难题,逆天学霸谁与争锋?!#每日答题#
08-20 15:12
系统消息:柒沐已经连续答对3道难题,逆天学霸谁与争锋?!#每日答题#
08-03 10:22
系统消息:柒沐已经连续答对10道难题,逆天学霸谁与争锋?!#每日答题#
06-30 08:57
系统消息:柒沐已经连续答对3道难题,逆天学霸谁与争锋?!#每日答题#
06-18 09:14
系统消息:清风网络已经连续答对10道难题,逆天学霸谁与争锋?!#每日答题#
04-11 09:40
系统消息:清风网络已经连续答对3道难题,逆天学霸谁与争锋?!#每日答题#
04-10 09:31
系统消息:IXM77777已经连续答对3道难题,逆天学霸谁与争锋?!#每日答题#
04-09 13:44
系统消息:清风网络已经连续答对3道难题,逆天学霸谁与争锋?!#每日答题#
04-09 09:22
系统消息:柒沐已经连续答对10道难题,逆天学霸谁与争锋?!#每日答题#
04-09 08:52
系统消息:清风网络已经连续答对3道难题,逆天学霸谁与争锋?!#每日答题#
04-08 09:24
系统消息:柒沐已经连续答对3道难题,逆天学霸谁与争锋?!#每日答题#
04-07 09:02
系统消息:柒沐已经连续答对10道难题,逆天学霸谁与争锋?!#每日答题#
02-27 09:35
系统消息:柒沐已经连续答对3道难题,逆天学霸谁与争锋?!#每日答题#
02-26 09:06
系统消息:柒沐已经连续答对3道难题,逆天学霸谁与争锋?!#每日答题#
02-25 08:49
站内通告

提供资源交易、信息共享、靓号交流、技术变现、学习问答、兴趣娱乐等全面服务。

1.丰富功能系统,扩展社区特色玩法,打造最好的互联网聚集圈子。

2.准确信息真实交易,安全快捷又方便,让虚拟交易面对面。

3. 天上不会掉馅饼,话术骗术迷人心,切勿脱离平台线下交易,被骗与平台无关!

4. 欺诈骗钱,违规违法将视情受到警告&禁言&封号甚至检举至👮🏻‍♀️处理!

官方Q群:123129钉推群:BAYR2383 站长QQ:3220000000

投诉/建议/商务合作联系

fl@fllt.cn

严禁私下交易,被骗与本站无关。
违反交易细则,取证立查严惩。
  • 钉钉新帖推送群
  • 官方交流QQ群
  • 站长唯一微信号

👮曝光Ta|🧿小黑屋|📴手机页|飞流网 ( 渝ICP备2025054677号-1|电信增值许可 渝B2-20250789 )|网站地图

GMT+8, 2025-11-16 14:27 , Processed in 0.100043 second(s), 62 queries, MemCached On , Gzip On.

Based on XJ-TX X3.5 Licensed

飞流论坛 HanAnalytics icp Astro vhAstro-Theme

关灯 在本版发帖
扫一扫添加微信客服
QQ客服返回顶部
快速回复 返回顶部 返回列表