改CSS
修改main.css
/*菜单栏样式*/
.position .fa {
line-height: 40px;
padding: 1px 8px;
}
/* 表情字体颜色弹窗样式 */
#smiley {
background-color: #EEEEEE;
padding: 3px 5px;
position: relative;
line-height: 0;
}
#smiley img {
display: inline-block;
padding: 14px;
cursor: pointer;
}
#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: 99999;
}
#fontcolor a {
display: inline-block;
height: 20px;
width: 21px;
}
#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;
}
修改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');?>
这里代码放的位置可以放在<div class=”comt-box”>的外面~
<?php include(TEMPLATEPATH . '/smiley.php');?>
<div class="comt-box">
<textarea placeholder="<?php echo _hui('comment_text') ?>" class="input-block-level comt-area" name="comment" id="comment" cols="100%" rows="3" tabindex="1" onkeydown="if(event.ctrlKey&&event.keyCode==13){document.getElementById('submit').click();return false};"></textarea>
<div class="comt-ctrl">
<div class="comt-tips"><?php comment_id_fields(); do_action('comment_form', $post->ID); ?></div>
<button type="submit" name="submit" id="submit" tabindex="5"><?php echo _hui('comment_submit_text') ? _hui('comment_submit_text') : '提交评论' ?></button>
<!-- <span data-type="comment-insert-smilie" class="muted comt-smilie"><i class="icon-thumbs-up icon12"></i> 表情</span> -->
</div>
</div>
<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>
最后把JS文件放到模版js目录下，smiley.php放模版根目录。在footer.php中引用该js，放到</body>前就可以。
<script type="text/javascript" src="<?php echo get_template_directory_uri(); ?>/js/comments.js"></script>
js文件和smiley.php下载地址：
效果：
![](data:image/svg+xml;charset=utf-8,<svg height="356" width="1005" xmlns="http://www.w3.org/2000/svg" version="1.1"/>)
现在还有个问题，现在的表情在评论框选择的时候跟最后呈现的不一致，这是因为emoji导致的，所以需要解决一下~~
把下面这段代码加入到functions.php中。
/**
* 替换emjo表情修复WordPress升级4.2自定义表情的各种问题
*/
function disable_emoji($plugins) {
if (is_array($plugins)) {
return array_diff($plugins, array(
'wpemoji'
));
} else {
return array();
}
}
//取当前主题下images\smilies\下表情图片路径
function custom_smilie_src($old, $img) {
return get_stylesheet_directory_uri() . '/img/smilies/' . $img;
}
function init_fixsmilie() {
global $wpsmiliestrans;
//默认表情文本与表情图片的对应关系(可自定义修改)
$wpsmiliestrans = array(
':mrgreen:' => 'icon_mrgreen.gif',
':neutral:' => 'icon_neutral.gif',
':twisted:' => 'icon_twisted.gif',
':arrow:' => 'icon_arrow.gif',
':shock:' => 'icon_eek.gif',
':smile:' => 'icon_smile.gif',
':???:' => 'icon_confused.gif',
':cool:' => 'icon_cool.gif',
':evil:' => 'icon_evil.gif',
':grin:' => 'icon_biggrin.gif',
':idea:' => 'icon_idea.gif',
':oops:' => 'icon_redface.gif',
':razz:' => 'icon_razz.gif',
':roll:' => 'icon_rolleyes.gif',
':wink:' => 'icon_wink.gif',
':cry:' => 'icon_cry.gif',
':eek:' => 'icon_surprised.gif',
':lol:' => 'icon_lol.gif',
':mad:' => 'icon_mad.gif',
':sad:' => 'icon_sad.gif',
'8-)' => 'icon_cool.gif',
'8-O' => 'icon_eek.gif',
':-(' => 'icon_sad.gif',
':-)' => 'icon_smile.gif',
':-?' => 'icon_confused.gif',
':-D' => 'icon_biggrin.gif',
':-P' => 'icon_razz.gif',
':-o' => 'icon_surprised.gif',
':-x' => 'icon_mad.gif',
':-|' => 'icon_neutral.gif',
';-)' => 'icon_wink.gif',
'8O' => 'icon_eek.gif',
':(' => 'icon_sad.gif',
':)' => 'icon_smile.gif',
':?' => 'icon_confused.gif',
':D' => 'icon_biggrin.gif',
':P' => 'icon_razz.gif',
':o' => 'icon_surprised.gif',
':x' => 'icon_mad.gif',
':|' => 'icon_neutral.gif',
';)' => 'icon_wink.gif',
':!:' => 'icon_exclaim.gif',
':?:' => 'icon_question.gif',
);
//移除WordPress4.2版本更新所带来的Emoji钩子同时挂上主题自带的表情路径
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_emoji');
add_filter('smilies_src', 'custom_smilie_src', 10, 2);
}
add_action('init', 'init_fixsmilie', 5);
不过最后还是遗留了问题，首页评论小工具处的表情不显示，显示的是一个灰色的方块，如果有大神看到希望能指点指点
![[mcj]WordPress评论框美化添加表情功能](https://ypyssl.machunjie.com/machunjie/20190710203037.png_machunjie.png)
![](data:image/svg+xml;charset=utf-8,<svg height="322" width="351" xmlns="http://www.w3.org/2000/svg" version="1.1"/>)