自闭主题自定义添加表情

共计7107字,阅读大约24分钟。
自闭主题自定义添加表情 | 一个栈
代码中所用表情
此内容为免费资源,请登录后查看
0积分
免费资源

前言

本篇是在友友的轮子上继续造的

原文:子比主题添加自定义表情包-若歆资源网 (rxs9.cn)

PS:我这里表情已经挂cdn,删去了主题路径获取,适当修改https链接即可

欸嘿,我试试文章能不能加表情代码 [g=洛天依/ty_qianpai.gif] 应该不能,没有过滤

第一步

找到 /wp-content/themes/zibll/inc/functions/ 文件夹,打开你的 functions.php,并来到第1515行

在文件夹内搜索 表情 可以定位到

原文

    //表情
    if ('smilie' == $type) {
        $emojy_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('aoman', 'baiyan', 'bishi', 'bizui', 'cahan', 'ciya', 'dabing', 'daku', 'deyi', 'doge', 'fadai', 'fanu', 'fendou', 'ganga', 'guzhang', 'haixiu', 'hanxiao', 'zuohengheng', 'zhuakuang', 'zhouma', 'zhemo', 'zhayanjian', 'zaijian', 'yun', 'youhengheng', 'yiwen', 'yinxian', 'xu', 'xieyanxiao', 'xiaoku', 'xiaojiujie', 'xia', 'wunai', 'wozuimei', 'weixiao', 'weiqu', 'tuosai', 'tu', 'touxiao', 'tiaopi', 'shui', 'se', 'saorao', 'qiudale', 'se', 'qinqin', 'qiaoda', 'piezui', 'penxue', 'nanguo', 'liulei', 'liuhan', 'lenghan', 'leiben', 'kun', 'kuaikule', 'ku', 'koubi', 'kelian', 'keai', 'jingya', 'jingxi', 'jingkong', 'jie', 'huaixiao', 'haqian', 'aini', 'OK', 'qiang', 'quantou', 'shengli', 'woshou', 'gouyin', 'baoquan', 'aixin', 'bangbangtang', 'xiaoyanger', 'xigua', 'hexie', 'pijiu', 'lanqiu', 'juhua', 'hecai', 'haobang', 'caidao', 'baojin', 'chi', 'dan', 'kulou', 'shuai', 'shouqiang', 'yangtuo', 'youling');
        $smilie_icon      = '';
        $img_url          = 没备份,忘了原来是啥;
        $lazy_attr        = zib_is_lazy('lazy_other', true) ? 'class="lazyload" data-' : '';
        foreach ($smilie_icon_args as $smilie_i) {
            $smilie_icon .= '<a class="smilie-icon" href="javascript:;" data-smilie="' . $smilie_i . '"><img ' . $lazy_attr . 'src="' . $img_url . $smilie_i . '.gif" alt="[' . $smilie_i . ']" /></a>';
        }
                $smilie_icon .= $but;
        $dropdown = '<div class="dropdown-smilie scroll-y mini-scrollbar">' . $smilie_icon . '</div>' . $but;
    }

对照原文酌情修改

    //表情
    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>';
// array变成二维数组,design:表情统称,suffix:表情格式后缀,name:就是原来的名字
        $smilie_icon_args = array(
                array(
                        'design' => '经典',
                        'suffix' => '.gif',
                        'name' => array('aoman', 'baiyan', 'bishi', 'bizui', 'cahan', 'ciya', 'dabing', 'daku', 'deyi', 'doge', 'fadai', 'fanu', 'fendou', 'ganga', 'guzhang', 'haixiu', 'hanxiao', 'zuohengheng', 'zhuakuang', 'zhouma', 'zhemo', 'zhayanjian', 'zaijian', 'yun', 'youhengheng', 'yiwen', 'yinxian', 'xu', 'xieyanxiao', 'xiaoku', 'xiaojiujie', 'xia', 'wunai', 'wozuimei', 'weixiao', 'weiqu', 'tuosai', 'tu', 'touxiao', 'tiaopi', 'shui', 'se', 'saorao', 'qiudale', 'se', 'qinqin', 'qiaoda', 'piezui', 'penxue', 'nanguo', 'liulei', 'liuhan', 'lenghan', 'leiben', 'kun', 'kuaikule', 'ku', 'koubi', 'kelian', 'keai', 'jingya', 'jingxi', 'jingkong', 'jie', 'huaixiao', 'haqian', 'aini', 'OK', 'qiang', 'quantou', 'shengli', 'woshou', 'gouyin', 'baoquan', 'aixin', 'bangbangtang', 'xiaoyanger', 'xigua', 'hexie', 'pijiu', 'lanqiu', 'juhua', 'hecai', 'haobang', 'caidao', 'baojin', 'chi', 'dan', 'kulou', 'shuai', 'shouqiang', 'yangtuo', 'youling')
                ),
                array(
                        'design' => 'B站',
                        'suffix' => '.gif',
                        'name' => array('22_diyi','22_han','22_heshui','22_maimeng','22_tuhun','22_wuyan','22_ye','22_yiwen','33_chijing','33_daku','33_daxiao','33_kuhuo','33_nu','33_weiqv','33_yumen')
                ),
                array(
                        'design' => '不问天',
                        'suffix' => '.png',
                        'name' => array('x1','x2','x3','x4','x5','x6','x7','x8','x9','x10','x11','x12','x13')
                ),
                array(
                        'design' => '洛天依',
                        'suffix' => '.gif',
                        'name' => array('ty_ainio','ty_aojiao','ty_chibaoqunzhong','ty_chiyao','ty_dacall','ty_hhh','ty_huaji','ty_kanchuan','ty_keyi','ty_lengmo','ty_qianpai','ty_qvba','ty_wuyanyidui','ty_xianzhu','ty_xiaomieni','ty_yinyangxiansheng','ty_yiwen')
                ),
                array(
                        'design' => '罗小黑',
                        'suffix' => '.gif',
                        'name' => array('l_chigua','l_damai','l_ganbei','l_guzhang','l_hi','l_jiayou','l_kandianying','l_keai','l_laile','l_nihao','l_qiubaoyang','l_sahua','l_zaima','l_zhaocaidan','l_zilaishui')
                ),
    );
        $smilie_icon      = '';
//我这里的url是cdn的,储存路径大概是 img/smilies/洛天依/xxx.gif
        $img_url          = 'https://cdn.seclusion.work/blog/wp-theme/zb-cdn/img/smilies/';
        $lazy_attr        = zib_is_lazy('lazy_other', true) ? 'class="lazyload" data-' : '';
        $but_t            = '';
//二维数组后得foreach两遍
//因为第二第三步的代码读取data-smilie=属性所以限制为gif,在这里可以先破除限制,并且拼接cdn链接
//如果你不分文件夹 类似这样smilies/洛天依/xxx.gif,请自行删除拼接的$smilie_t['design']
        foreach ($smilie_icon_args as $smilie_t){
            foreach ($smilie_t['name'] as $smilie_i) {
                $smilie_icon .= '<a class="smilie-icon ' .$smilie_t['design']. '" 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>';
            }
//这里的onclick是分类方法,哎不想写太多屎山代码就这样凑合吧,分类实现是隐藏全部表情再放出对应 design的表情
            $but_t .= '<a class="but btn-input-expand input-smilie mr6" onclick=\'$(".smilie-icon").attr("style","display:none");$(".'.$smilie_t['design'].'").attr("style","display:inline-block")\' href="javascript:;""><span>'.$smilie_t['design'].'</span></a>';
        }

// 第一次打开显示第一个分类,这里的style是解决评论区表情消失
        $first='<style>.smilie-icon-comment{width:48px;padding:3px;display:inline!important}</style><script>$(".smilie-icon").attr("style","display:none");$(".'.$smilie_icon_args[0]['design'].'").attr("style","display:inline-block;width:48px;")</script>';
//这里的width是行内式,不需要请删除,或者修改成适合你主题的,自闭默认为width:260px
        $dropdown = '<div class="dropdown-smilie scroll-y mini-scrollbar" style="width:340px">' . $smilie_icon . '</div>' . $but_t .$first;

第二步

找到 inc\functions\message\class 文件夹,打开 message-class.php,大约在141行,我代码面目全非了,你们看看是匹配正则表达式 g=.*? 什么的

            //图片信息cdn化 https://cdn.seclusion.work/blog/wp-theme/zb-cdn/img/smilies/分类/表情.png
            $con = preg_replace('/\[g=(.*?)\]/', '<img class="smilie-icon" src="https://cdn.seclusion.work/blog/wp-theme/zb-cdn/img/smilies/$1">', $con);

这里的 $1 原文拼接了 .gif 后缀,删除即可,因为在第一步的二维数组我们已经拼接了自定义后缀。

第三步

找到 inc\functions 文件夹,打开 zib-comments-list.php ,大约在337行,还是那个正则表达式限制了后缀,和上一步同理

    $cont = preg_replace('/\[g=(.*?)\]/', '<img class="smilie-icon-comment" style="width:48px;padding:3px;display:inline!important" src="https://cdn.seclusion.work/blog/wp-theme/zb-cdn/img/smilies/$1" alt="表情[$1]' . zib_get_delimiter_blog_name() . '">', $cont);

总结

  • 翻车一定是哪里没拼接成你的CDN地址,注意看看F12网络卡里的标红是拼接成了什么鬼链接
  • 不修改url不走cdn的话,直接把表情放在主题 img\smilies 目录即可,分类不分类请详看第一步

修订

2022.9.19 1
  • 修复评论区表情消失
温馨提示:本文最后更新于2022-09-19 01:32:17,某些文章具有时效性,若有错误或已失效,请在下方留言或联系雅舍站长
© 版权声明
THE END
有所帮助就支持一下吧
点赞7当赏 分享
箴言区 共9条
头像
达瓦里希请发言...
提交
头像

昵称

取消
昵称表情代码图片
    • 头像丫头0
    • 栈长的头像 | 一个栈大栈栈长LV6作者0
      • 头像丫头1