博客在评论的时候使用一些适当的表情可以使评论变得活泼，所以现在也越来越多的博客开启了这一功能

效果见米扑博客：https://blog.mimvp.com/about/#comments

开始很多都是通过插件来实现的，其实一段简单的代码就可以实现这个功能，

这样就免去了调用插件里面的js，这样速度会快很多，基本不影响 WordPress 的载入速度。

添加步骤：

1、下载 smiley.php

smiley.php.tar.gz

将其解压缩并上传至主题的文件夹下。

2、查看或编辑 smiley.php

在主题的文件夹，查看 smiley.php

vim smiley.php

查看米扑博客写好的添加表情代码如下：

<div style="padding-left:10px;">
	<!-- 圆润的表情 -->
	<a href="javascript:grin(':mrgreen:')"><img src="/wp-includes/images/smilies-mipu/regular_smile.gif" alt="blog.mimvp.com" /></a>
	<a href="javascript:grin(':mrgreen:')"><img src="/wp-includes/images/smilies-mipu/embaressed_smile.gif" alt="blog.mimvp.com" /></a>
	<a href="javascript:grin(':mrgreen:')"><img src="/wp-includes/images/smilies-mipu/embarrassed_smile.gif" alt="blog.mimvp.com" /></a>
	<a href="javascript:grin(':mrgreen:')"><img src="/wp-includes/images/smilies-mipu/tongue_smile.gif" alt="blog.mimvp.com" /></a>
	<a href="javascript:grin(':mrgreen:')"><img src="/wp-includes/images/smilies-mipu/tounge_smile.gif" alt="blog.mimvp.com" /></a>
	<a href="javascript:grin(':mrgreen:')"><img src="/wp-includes/images/smilies-mipu/devil_smile.gif" alt="blog.mimvp.com" /></a>
	<a href="javascript:grin(':mrgreen:')"><img src="/wp-includes/images/smilies-mipu/angel_smile.gif" alt="blog.mimvp.com" /></a>
	<a href="javascript:grin(':mrgreen:')"><img src="/wp-includes/images/smilies-mipu/confused_smile.gif" alt="blog.mimvp.com" /></a>
	<a href="javascript:grin(':mrgreen:')"><img src="/wp-includes/images/smilies-mipu/angry_smile.gif" alt="blog.mimvp.com" /></a>
	<a href="javascript:grin(':mrgreen:')"><img src="/wp-includes/images/smilies-mipu/heart.gif" alt="blog.mimvp.com" /></a>
	<a href="javascript:grin(':mrgreen:')"><img src="/wp-includes/images/smilies-mipu/kiss.gif" alt="blog.mimvp.com" /></a>
	<a href="javascript:grin(':mrgreen:')"><img src="/wp-includes/images/smilies-mipu/broken_heart.gif" alt="blog.mimvp.com" /></a>
	<a href="javascript:grin(':mrgreen:')"><img src="/wp-includes/images/smilies-mipu/omg_smile.gif" alt="blog.mimvp.com" /></a>
	<a href="javascript:grin(':mrgreen:')"><img src="/wp-includes/images/smilies-mipu/sad_smile.gif" alt="blog.mimvp.com" /></a>
	<a href="javascript:grin(':mrgreen:')"><img src="/wp-includes/images/smilies-mipu/cry_smile.gif" alt="blog.mimvp.com" /></a>
	<a href="javascript:grin(':mrgreen:')"><img src="/wp-includes/images/smilies-mipu/shades_smile.gif" alt="blog.mimvp.com" /></a>
	<a href="javascript:grin(':mrgreen:')"><img src="/wp-includes/images/smilies-mipu/teeth_smile.gif" alt="blog.mimvp.com" /></a>
	<a href="javascript:grin(':mrgreen:')"><img src="/wp-includes/images/smilies-mipu/thumbs_down.gif" alt="blog.mimvp.com" /></a>
	<a href="javascript:grin(':mrgreen:')"><img src="/wp-includes/images/smilies-mipu/thumbs_up.gif" alt="blog.mimvp.com" /></a>
	<a href="javascript:grin(':mrgreen:')"><img src="/wp-includes/images/smilies-mipu/whatchutalkingabout_smile.gif" alt="blog.mimvp.com" /></a>
	<a href="javascript:grin(':mrgreen:')"><img src="/wp-includes/images/smilies-mipu/wink_smile.gif" alt="blog.mimvp.com" /></a>
	<a href="javascript:grin(':mrgreen:')"><img src="/wp-includes/images/smilies-mipu/lightbulb.gif" alt="blog.mimvp.com" /></a>
	<a href="javascript:grin(':mrgreen:')"><img src="/wp-includes/images/smilies-mipu/envelope.gif" alt="blog.mimvp.com" /></a>
</div>

<div style="padding-left:10px; margin: 10px auto;">
	<!-- 字符动态表情 -->
	<a href="javascript:grin(':mrgreen:')"><img src="/wp-includes/images/smilies-mimvp/icon_confused.gif" alt="blog.mimvp.com" /></a> &nbsp;
	<a href="javascript:grin(':mrgreen:')"><img src="/wp-includes/images/smilies-mimvp/icon_surprised.gif" alt="blog.mimvp.com" /></a> &nbsp;
	<a href="javascript:grin(':mrgreen:')"><img src="/wp-includes/images/smilies-mimvp/icon_cool.gif" alt="blog.mimvp.com" /></a> &nbsp;
	<a href="javascript:grin(':mrgreen:')"><img src="/wp-includes/images/smilies-mimvp/icon_eek.gif" alt="blog.mimvp.com" /></a> &nbsp;
	<a href="javascript:grin(':mrgreen:')"><img src="/wp-includes/images/smilies-mimvp/icon_lol.gif" alt="blog.mimvp.com" /></a> &nbsp;
	<a href="javascript:grin(':mrgreen:')"><img src="/wp-includes/images/smilies-mimvp/icon_mad.gif" alt="blog.mimvp.com" /></a> &nbsp; 
	<a href="javascript:grin(':mrgreen:')"><img src="/wp-includes/images/smilies-mimvp/icon_biggrin.gif" alt="blog.mimvp.com" /></a> &nbsp; 
	<a href="javascript:grin(':mrgreen:')"><img src="/wp-includes/images/smilies-mimvp/icon_neutral.gif" alt="blog.mimvp.com" /></a> &nbsp;
	<a href="javascript:grin(':mrgreen:')"><img src="/wp-includes/images/smilies-mimvp/icon_question.gif" alt="blog.mimvp.com" /></a> &nbsp;
	<a href="javascript:grin(':mrgreen:')"><img src="/wp-includes/images/smilies-mimvp/icon_razz.gif" alt="blog.mimvp.com" /></a> &nbsp;
	<a href="javascript:grin(':mrgreen:')"><img src="/wp-includes/images/smilies-mimvp/icon_cry.gif" alt="blog.mimvp.com" /></a> &nbsp;
	<a href="javascript:grin(':mrgreen:')"><img src="/wp-includes/images/smilies-mimvp/icon_redface.gif" alt="blog.mimvp.com" /></a> &nbsp;
	<a href="javascript:grin(':mrgreen:')"><img src="/wp-includes/images/smilies-mimvp/icon_rolleyes.gif" alt="blog.mimvp.com" /></a> &nbsp;
	<a href="javascript:grin(':mrgreen:')"><img src="/wp-includes/images/smilies-mimvp/icon_sad.gif" alt="blog.mimvp.com" /></a> &nbsp;
	<a href="javascript:grin(':mrgreen:')"><img src="/wp-includes/images/smilies-mimvp/icon_smile.gif" alt="blog.mimvp.com" /></a> &nbsp;
	<a href="javascript:grin(':mrgreen:')"><img src="/wp-includes/images/smilies-mimvp/icon_wink.gif" alt="blog.mimvp.com" /></a>
</div>

3、添加代码到评论位置

在 comments.php 的 textarea 之前的适当位置加入以下代码：

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

简简单单两步就这样代替了 wp-grins 插件，效果可以见我的留言框上一排表情符，如上图米扑博客 - 关于 - 评论框

高级篇

默认的WordPress表情是非常的丑的，所以我们希望自定义表情

最傻瓜式的方法的就是一个一个的替换原来的表情，

当然这就有个弊端，升级WordPress之后又被替换回来了。

WordPress 的默认表情路径

cd wp-includes/images/smilies/

其实 WordPress 已经给我们预留了表情路径的钩子，我们完全可以在主题的函数中自定义这个路径，而不必大费周章去覆盖替换原表情图片。

方法很简单，在 WordPress 主题的 functions.php 文件中加入以下代码就可以了：

function custom_smilies_src ($img_src, $img, $siteurl){
	return get_bloginfo('template_directory').'/includes/smiley/'.$img;
}
add_filter('smilies_src','custom_smilies_src',1,10);

从以上代码中可以看出，我的表情图片是放在主题目录的 includes/smiley 中，

这样可以更方便地随自己的主题进行管理，当然以上只是修改 WordPress 表情的路径。

按照上面的步骤，自己添加自定义，给出一些米扑博客整理好的表情包

下载表情包：weisay_smiley.zip

下载米扑包：smilies-mimvp.tar.gz

效果见米扑博客：https://blog.mimvp.com/about/#comments

参考推荐：

WordPress CKEditor smiley表情工具栏定制