WordPress 默认评论表情是非常丑陋的，一般都会DIY定制成自己的表情。

例如，米扑博客的表情定制，如下图：

米扑给评论框添加表情、加粗、斜体、引用、代码、图片等功能

1. 添加自定义css到主题目录下的 style.css

/** comment smiles css **/
/*菜单栏样式*/
.position {
    margin-top: 12px;
    margin-bottom: -12px;
}
.position .fa {
  line-height: 40px;
  padding: 1px 8px;
  font-size: 18px;
  color: #555;
  margin: 0 0.5%;
}

/* 表情字体颜色弹窗样式 */
#smiley {
   background-color: #EEEEEE;
   padding: 3px 5px;
   position: relative;
   line-height: 0;
   z-index:999;
}
#smiley img {
    display: inline-block;
    padding: 5px;
    cursor: pointer;
    z-index:999;
}
#smiley::after {
    position: absolute;
    top: -5px;
    left: 8px;
    width: 0;
    height: 0;
    vertical-align: top;
    border-bottom: 5px solid #1FA3E1;
    border-right: 5px solid rgba(0, 0, 0, 0);
    border-left: 5px solid rgba(0, 0, 0, 0);
    content: "";
}
#fontcolor {
    width: 453px;
    height: auto;
    line-height: 20px;
    padding: 3px 1px;
    border: 1px #e0e0e0 solid;
    z-index: 999;
}
#fontcolor a {
    display: inline-block;
    height: 20px;
    width: 21px;
    z-index:999;
}
#fontcolor::after {
    border-bottom: 5px solid #1FA3E1;
    border-left: 5px solid transparent;
    content: "";
    border-right: 5px solid transparent;
    vertical-align: top;
    height: 0px;
    width: 0px;
    left: 82px;
    top: 108.2px;
    position: absolute;
}

2. 下载表情和代码文件

下载米扑博客整理好的压缩文件：mimvp-smiles.tar.gz

1）解压后，把其中一套表情（如 smilies-qq）拷贝到主题下的images文件夹下，并命名为 smiles

cp -r smilies-qq images/smilies

2）解压后，把 smiley.php 文件拷贝到主题目录下

3. 调用自定义表情

在主题目录下的 comments.php 评论模板文件里，

vim comments.php

添加如下代码

<div class="position">
 <a href="javascript:;" id="comment-smiley" title="表情"><b><i class="fa fa-smile-o"></i></b></a>
 <a href="javascript:" id="font-color" title="颜色"><b><i class="fa fa-font"></i></b></a>
 <a href="javascript:SIMPALED.Editor.img()" title="插图片"><b><i class="fa fa-image"></i></b></a>
 <a href="javascript:SIMPALED.Editor.strong()" title="粗体"><b><i class="fa fa-bold"></i></b></a>
 <a href="javascript:SIMPALED.Editor.em()" title="斜体"><b><i class="fa fa-italic"></i></b></a>
 <a href="javascript:SIMPALED.Editor.quote()" title="引用"><b><i class="fa fa-quote-left"></i></b></a>
 <a href="javascript:SIMPALED.Editor.ahref()" title="插链接"><b><i class="fa fa-link"></i></b></a>
 <a href="javascript:SIMPALED.Editor.del()" title="删除线"><b><i class="fa fa-strikethrough"></i></b></a>
 <a href="javascript:SIMPALED.Editor.underline()" title="下划线"><b><i class="fa fa-underline"></i></b></a>
 <a href="javascript:SIMPALED.Editor.code()" title="插代码"><b><i class="fa fa-file-code-o"></i></b></a>
 </div> 
<?php include(TEMPLATEPATH . '/smiley.php'); ?>

到这里，评论框添加表情、加粗等功能，已经添加完成

但是，你刷新网页，可能无法显示工具栏，这是因为还没有安装字体图标 font awesome 字体

4. 添加 font awesome 字体

方式1：安装插件

font awesome 4 menus 官网：

font awesome 4 menus 插件：

fontawesome 官网：http://fontawesome.dashgame.com

方式2：代码实现（推荐）

1）下载米扑博客整理好的代码

awesome.tar.gz

2）添加调用代码到主题下的 functions.php

// 调用awesome图标字体功能
include("awesome/main.php");

3）再刷新评论框

文字图标是不是都显示出来了哈

嗯，到这里其实还没完，对于 WordPress 4.8 版本以上，默认用的emoji 表情

也就是说，你选用的表情，可能在评论里显示是emoji，不是你自定义的表情

5. 禁用WordPress默认的emoji表情

方法1：安装插件

disable-emojis 官网： https://wordpress.org/plugins/disable-emojis/

disable-emojis 插件： disable-emojis.1.7.zip

方法2：代码实现（推荐）

添加下面的代码到主题的functions.php 文件，代码其实就是来源上面的插件：

// WordPress Disable the emoji's
function disable_emojis() {
    remove_action( 'wp_head', 'print_emoji_detection_script', 7 );
    remove_action( 'admin_print_scripts', 'print_emoji_detection_script' );
    remove_action( 'wp_print_styles', 'print_emoji_styles' );
    remove_action( 'admin_print_styles', 'print_emoji_styles' );    
    remove_filter( 'the_content_feed', 'wp_staticize_emoji' );
    remove_filter( 'comment_text_rss', 'wp_staticize_emoji' );    
    remove_filter( 'wp_mail', 'wp_staticize_emoji_for_email' );
    add_filter( 'tiny_mce_plugins', 'disable_emojis_tinymce' );
    add_filter( 'wp_resource_hints', 'disable_emojis_remove_dns_prefetch', 10, 2 );
}
add_action( 'init', 'disable_emojis' );

function disable_emojis_tinymce( $plugins ) {
    if ( is_array( $plugins ) ) {
            return array_diff( $plugins, array( 'wpemoji' ) );
    } else {
            return array();
    }
}
function disable_emojis_remove_dns_prefetch( $urls, $relation_type ) {
    if ( 'dns-prefetch' == $relation_type ) {
        $emoji_svg_url_bit = 'https://s.w.org/images/core/emoji/';
        foreach ( $urls as $key => $url ) {
                if ( strpos( $url, $emoji_svg_url_bit ) !== false ) {
                        unset( $urls[$key] );
                }
        }
    }
    return $urls;
}

最后，WordPress 的效果图如本文一开头截图的，评论框表情也是自定义的

参考推荐：

WordPress 代码实现评论表情功能

WordPress CKEditor smiley表情工具栏定制