wordpress评论添加自定义emoji表情

制作 2025-05-29 手机阅读 225

wordpress评论默认是不支持表情的，有很多插件可以实现，这里手动DIY来添加这个功能，使用我们自己喜欢的gif文件替换WP自带的，从而本地化。

1、加载emoji表情路径文件

在评论页面(comments.php)合适的显示位置，引入smiley.php文件

<?php include(TEMPLATEPATH . '/smilies/smiley.php'); ?>

如果不想让表情列表显示，点击按钮显示，代码如下：

<div id="emoji-layer" style="display: none;">

<?php include(TEMPLATEPATH . '/smilies/smiley.php'); ?>

</div><button type="button" id="emoji-btn" onclick="showEmojiLayer()">表情</button>

觉得按钮不美观，想把iconfont按钮放在评论框内，替换掉button按钮，将下面代码放在评论框后面，调整style。代码如下：

温馨提示：此处内容需要您 回复评论 后才能查看

2、下载emoji表情包与smiley.php文件，将smiley文件文件夹上传至主题根目录。

下载地址

本站下载

3、修复表情包引入

WordPress4.2之后，使用了Emoji表情，原有自定义表情快捷符号无法再转换为表情图片gif，而我们引入的是gif文件，这样并不会显示的，所以需要禁用前台与后台的相关emoji表情加载脚本，加入以下代码至主题的functions.php内：

//获取当前主题下\smilies\下表情图片路径

function custom_smilies_src($src, $img){return get_bloginfo('template_directory').'/smilies/' . $img;}

add_filter('smilies_src', 'custom_smilies_src', 10, 2);

if ( !isset( $wpsmiliestrans ) ) {

$wpsmiliestrans = array(

'[ok]'=> 'ok.gif',

'[aixin]'=> 'aixin.gif',

'[aoman]'=> 'aoman.gif',

'[baoquan]'=> 'baoquan.gif',

'[bizui]'=> 'bizui.gif',

'[cahan]'=> 'cahan.gif',

'[caidao]'=> 'caidao.gif',

'[ciya]'=> 'ciya.gif',

'[dabing]'=> 'dabing.gif',

'[doge]'=> 'doge.gif',

'[fadai]'=> 'fadai.gif',

'[ganga]'=> 'ganga.gif',

'[guzhang]'=> 'guzhang.gif',

'[haixiu]'=> 'haixiu.gif',

'[hanxiao]'=> 'hanxiao.gif',

'[huaixiao]'=> 'huaixiao.gif',

'[jie]'=> 'jie.gif',

'[jingkong]'=> 'jingkong.gif',

'[keai]'=> 'keai.gif',

'[koubi]'=> 'koubi.gif',

'[ku]'=> 'ku.gif',

'[leiben]'=> 'leiben.gif',

'[lenghan]'=> 'lenghan.gif',

'[liuhan]'=> 'liuhan.gif',

'[nanguo]'=> 'nanguo.gif',

'[penxue]'=> 'penxue.gif',

'[piezui]'=> 'piezui.gif',

'[qiang]'=> 'qiang.gif',

'[qinqin]'=> 'qinqin.gif',

'[quantou]'=> 'quantou.gif',

'[se]'=> 'se.gif',

'[shengli]'=> 'shengli.gif',

'[shuai]'=> 'shuai.gif',

'[tiaopi]'=> 'tiaopi.gif',

'[touxiao]'=> 'touxiao.gif',

'[tuosai]'=> 'tuosai.gif',

'[weiqu]'=> 'weiqu.gif',

'[woshou]'=> 'woshou.gif',

'[wozuimei]'=> 'wozuimei.gif',

'[wunai]'=> 'wunai.gif',

'[xiaojiujie]'=> 'xiaojiujie.gif',

'[xiaoku]'=> 'xiaoku.gif',

'[xieyanxiao]'=> 'xieyanxiao.gif',

'[xigua]'=> 'xigua.gif',

'[yinxian]'=> 'yinxian.gif',

'[yiwen]'=> 'yiwen.gif',

'[youling]'=> 'youling.gif',

'[yun]'=> 'yun.gif',

);

}