PIX主题添加自定义表情包

前言

PIX 主题对表情的支持比较有限，只兼容 😊😂🤣 这类基础表情字符，所以我平时写片刻、发评论，一直都在用颜文字将就。今天闲来无事，干脆动手折腾一番，给 PIX 主题加上自定义表情包。

折腾主题前养成备份的好习惯

步骤

表情包按钮支持

PIX主题在评论和发布片刻时有一个可以选择表情的按钮，我们先来修改这个。

代码位置：/pix/inc/pix-comment.php : 第一个函数smile_img()。

替换为以下代码，注意我的网站开了防盗链，实在找不到表情包可以采集一下我的到本地，把表情存在任何文件夹，让ai帮你把链接整理成下面的数组形式就行了。

function smile_img(){

    $smile = '';

    $arr = array(
        '[doge]' => 'https://atmoyu.com/wp-content/themes/pix/img/emoji//bilibili-doge.png',
        //按照以上格式自己添加自定义表情
    );

    foreach($arr as $key => $url){

        $smile .= '<a class="smile_btn" data-tag="'.$key.'">
        <img src="'.$url.'" width="24" height="24" loading="lazy">
        </a>';

    }

    return $smile;

}

前端点击插入表情

PIX的表情插入js会直接插入html标签，评论框一堆html会导致很不好看，所以我们修改一下插入的js，只插入短代码。

代码位置：pix/inc/assets/js/app.js ： 查找a.smile_btn的位置，有两个。

第一个针对片刻，看代码里有textarea#topic_content对应好就行。替换为以下代码

$(document).on("click","a.smile_btn",function(){

    var tag = $(this).data("tag");
    var textarea = $("textarea#topic_content");
    var text = textarea.val();

    textarea.val(text + tag);
    textarea.focus();

})

第二个针对评论区textarea#comment

$(document).on("click", ".com_smile_show a.smile_btn", function(){

    var tag = $(this).data("tag");
    var textarea = $("textarea#comment");
    var text = textarea.val();

    textarea.val(text + tag);
    textarea.focus();

})

内容解析表情

服务器端解析评论区 [表情] 标签并替换为图片：

在主题根目录下的function.php添加以下代码，注意替换表情包数组。

function comment_emoji_replace($text){

    $arr = array(
        '[doge]' => 'https://atmoyu.com/wp-content/themes/pix/img/emoji//bilibili-doge.png',
        //改为你自己的表情包数组
    );

    foreach($arr as $tag => $url){

        $img = '<img class="comment-emoji" src="'.$url.'" width="18" height="18" alt="表情包">';

        $text = str_replace($tag,$img,$text);

    }

    return $text;
}

add_filter('comment_text','comment_emoji_replace');
add_filter('the_content','comment_emoji_replace');

以上代码的作用是针对文章和评论区里的[表情]替换为对应的img。

片刻表情包

PIX主题的片刻并没有使用the_content输出内容，钩子没法生效，而且片刻处理的方式不一样，我们需要修改片刻的输出函数。

代码位置：pix/inc/pix-moment.php : 直接查找moment_excerpt()函数的位置

替换为以下代码

function moment_excerpt(){

    global $post;

    $pid = $post->ID;
    $max = get_op('read_more_num') ? (int)get_op('read_more_num') : 120;

    $content = get_the_content($pid);
    $content = comment_emoji_replace($content);

    if (!get_op('read_more_op') || mb_strlen(strip_tags($content)) <= $max) {
        return $content;
    }

    $last_pos = mb_strrpos($content, '>');
    $cut_pos = $max;

    if ($last_pos !== false && $cut_pos < $last_pos) {
        $cut_pos = $last_pos + 1;
    }

    $exp = mb_substr($content, 0, $cut_pos);
    $other = mb_substr($content, $cut_pos);

    return $exp .
        '<span class="dotd">...</span>' .
        '<span class="rm_hidden">'.$other.'</span>' .
        '<a class="show-more-btn">展开</a>' .
        '<a class="read-less-btn"><i class="ri-arrow-up-line"></i>收起</a>';
}

以上代码除了替换表情外还修复了一些bug，原代码中片刻的内容会被直接截断，这会导致html标签切成两半导致异常，所以采用了高性能方案，直接检测最后一个">"的位置，将截断延后。你有其他更好方案可以自己改改。

表情包与内容对齐

进行之前的步骤后，表情就可以正常插入了，但是还有个问题就是表情与文字没对齐，我们只需要在css中添加以下代码即可。

.comment-emoji{
    vertical-align:sub;
}

如果你觉得表情包太小了，特别是电脑端，可以使用以下css

.comment-emoji {
    vertical-align: sub;
    width: 24px;
    height: 24px;
}

@media (max-width: 540px) {
    .comment-emoji {
        width: 18px;
        height: 18px;
    }
}

总结

折腾了挺久的，也试过插件之类的，效果没现在这个方案好，几乎不影响性能，欢迎在评论区留下表情。