wordpress自定义表情及管理不同表情包

最近在搞一个用wordpress模板的小博客，用的威言威语的weisay simple主题，然后在文章页面觉得评论的图标不是很有特点，想自己写个小模块加一些不同风格的表情进来，在网上找了很多文章，大多全都只是替换个表情的图片包，没有根本上解决真正的添加自定义表情的问题，后来自己摸索出来一些方法，跟大家分享一下~

一、表情的显示：首先是显示问题，在weisay simple主题的留言板上显示了一行wordpress原有的一套表情，想要增加的话首先要下载一套表情的图片，wordpress表情是放在localhost\wp-includes\images\smilies文件夹下，weisay simple主题的留言表情显示文件是localhost\wp-content\themes\weisaysimple\includes\smiley.php文件，打开smiley.php文件，找到中间一大坨的“<a>”标签，就是表情的显示配置，以第一句为例:

1. <a href="javascript：grin(':?:')"><img src="<?php bloginfo('url'); ?>/wp-includes/images/smilies/icon_question.gif" alt="" /></a> 

表示的就是显示icon_question.gif的表情图片，点击时会自动向留言框里输入替代字符:?:（点击发布留言时会自动解析:?:字符为表情图片，这一点在第三部分说明），为了预览显示，先不更改替代字符（修改替换字符后输入没有问题，点击发布后不会被解析成表情图片，详见第三部分），只修改表情的图片名就行，修改后可以预览下效果.

二、表情分包：有没有觉得一大堆表情堆在一起会显得很多？我在参考了http://wenku.baidu.com/view/ff3aea25af45b307e8719752.html 这篇文档的代码后，调整了下样式，将表情分包放在了不同的菜单按钮下，鼠标移到对应按钮才显示对应的表情包，下面是我调整后的代码和样式:

将smiley.php文件中间一大坨的标签语句的代码替换为:

1. <div class="menuz"> 
2.  <ul> 
3.   <li> 
4.    <a href='Javascript:void(0)'> 
5.    天猫表情 
6.     <!--[if IE 7]> 
7.     <!--> 
8.     </a> 
9.     <!--<![endif]--> 
10.     <!--[if lte IE 6]> 
11.     <table> 
12.     <tr> 
13.     <td> 
14.     <![endif]--> 
15.     <ul> 
16.      <li> 
17.       <a href="javascript：grin(':tm01:')"><img src="<?php bloginfo('url'); ?>/wp-includes/images/smilies/01.gif" title="大笑" alt="" /></a> 
18.       <a href="javascript：grin(':tm02:')"><img src="<?php bloginfo('url'); ?>/wp-includes/images/smilies/02.gif" title="给力" alt="" /></a> 
19. 。。。。。。 
20.     </li> 
21.    </ul> 
22.   </ul> 
23.   <!--[if lte IE 6]> 
24.   </td> 
25.   </tr> 
26.   </table> 
27.   </a> 
28.   <![endif]--> 
29.   </li> 
30.  </ul> 
31. </div> 

在样式文件中加入以下代码(比如我用的是t-red.css的红色样式,就在localhost\wp-content\themes\weisaysimple\css\t-red.css文件中加入以下样式代码,具体颜色根据自己需要修改):

1. .menuz{font-size:12px;position:relative;z-index:100;} 
2. .menuz ul{list-style:none;} 
3. .menuz li {float:left;position:relative;} 
4. .menuz ul ul {visibility:hidden;position:absolute;left:3px;bottom: 28px;background:rgb(240, 240, 190);} 
5. .menuz ul ul ul {left:-76px;bottom: 0px;} 
6. .menuz table {position:absolute; top:0; left:0;} 
7. .menuz ul li:hover ul, .menu ul a:hover ul{visibility:visible;} 
8. .menuz a{border-radius: 3px;display:block;border:1px solid #aaa;background:#bc0000;padding:2px 10px;margin:3px;color:#fff;text-decoration:none;text-shadow: 0px 0px #fff;} 
9. .menuz a:hover{background:#6a0000;} 
10. .menuz ul ul li {border-top: 5px solid rgb(240, 240, 190);clear:both;text-align:center;font-size:12px;width:500px;} 
11. .menuz ul ul li a{border-radius: 0px;display:block;width:25px;height:25px;margin:0;border:0;float:left;background:rgb(240, 240, 190);} 
12. .menuz ul ul li a:hover{border:0;background:rgb(240, 240, 190);} 

预览效果:

三、接下来是配置留言的解析文件,如果不配置的话输出的表情替代字符在发布时就不能被正确替换成表情图片或者干脆只显示字符没有图片.

配置文件在localhost\wp-includes\functions.php里,打开文件,在2420行开始就是表情和字符的替代关联语句,例如:

 '8-)' => 'icon_cool.gif',

 '8-O' => 'icon_eek.gif',

 ':-(' => 'icon_sad.gif',

很明显就是会把“8-)”替换为icon_cool.gif表情图片,所以只要在下边配上新增的表情图片文件,并配置上不同的替代字符(此处编辑时记得要跟第一部分的smiley.php文件中的替代字符对应),替代好后就可以预览效果啦~