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

原本是在寻找七牛的解决方案，没想到顺便把表情这块先解决了。

先说下基本的：

一般表情图片会放在imges/smilies一类的文件夹中，具体的还要看各自主题。主题的留言表情显示文件一般是localhostwpcontentthemes主题目录includessmiley.php一类的（具体的可见评论.php文件里）。自定义的一般要修改三个文件： 1.表情图片。2.主题的留言表情显示文件。3。在一定情况下需要修改localhostwp-includesfunctions.php文件。现在一一说来。

自定义方式：

1.将表情图片放置在imges/smilies一类的文件夹中或替换里面的表情图片。 2.留言表情显示文件类似localhostwpcontentthemes主题目录includessmiley.php，找到里面有好多

“”标签的地方，就是表情的显示配置，以第一句为例：

 <a href="javascript:grin(':?:')"><img src="<?php bloginfo('template_directory'); ?>/images/smiley/baidu/icon_question.gif" alt="" /></a>

表示显示图片icon_question.gif，回复时会以:?:（留言时会自动填写并解析）。 3.配置留言的解析文件。如果不配置的话输出的表情替代字符在发布时就不能被正确替换成表情图片或者干脆只显示字符没有图片。。。(其实这也是我之前遇到的问题)

配置文件在localhostwp-includesfunctions.php里，打开文件，在2420行开始就是表情和字符的替代关联语句，例如：

 '8-)' => 'icon_cool.gif',
 '8-O' => 'icon_eek.gif',
 ':-(' => 'icon_sad.gif',

1
2
3

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

替代好后就可以预览效果啦~

4.表情分类显示

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

<div class="smenuz">
 <ul>
  <li>
   <a href='Javascript:void(0)'>
   天猫表情
    <!--[if IE 7]>
    <!-->
    </a>
    <!--<![endif]-->
    <!--[if lte IE 6]>
    <table>
    <tr>
    <td>
    <![endif]-->
    <ul>
     <li>
      <a href="javascript:grin(':tm01:')"><img src="<?php bloginfo('url'); ?>/wp-includes/images/smilies/01.gif" title="大笑" alt="" /></a>
      <a href="javascript:grin(':tm02:')"><img src="<?php bloginfo('url'); ?>/wp-includes/images/smilies/02.gif" title="给力" alt="" /></a>
。。。。。。
    </li>
   </ul>
  </ul>
  <!--[if lte IE 6]>
  </td>
  </tr>
  </table>
  </a>
  <![endif]-->
  </li>
 </ul>
</div>

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31

在样式文件中加入以下代码（比如我用的是t-green.cs的绿色样式，就在localhostwp-contentthemesweisaysimplecsst-green.css文件中加入以下样式代码，具体颜色根据自己需要修改）：

.smenuz{font-size:12px;position:relative;z-index:100;}
.smenuz ul{list-style:none;}
.smenuz li {float:left;position:relative;}
.smenuz ul ul {visibility:hidden;position:absolute;left:3px;bottom: 28px;background:rgb(240, 240, 190);}
.smenuz ul ul ul {left:-76px;bottom: 0px;}
.smenuz table {position:absolute; top:0; left:0;}
.smenuz ul li:hover ul, .menu ul a:hover ul{visibility:visible;}
.smenuz 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;}
.smenuz a:hover{background:#6a0000;}
.smenuz ul ul li {border-top: 5px solid rgb(240, 240, 190);clear:both;text-align:center;font-size:12px;width:500px;}
.smenuz ul ul li a{border-radius: 0px;display:block;width:25px;height:25px;margin:0;border:0;float:left;background:rgb(240, 240, 190);}
.smenuz ul ul li a:hover{border:0;background:rgb(240, 240, 190);}

1
2
3
4
5
6
7
8
9
10
11
12

预览效果：

参考资料:wordpress自定义表情及管理不同表情包

预览

除特别注明外，本站所有文章均为竹风清语原创，转载请注明出处来自： wordpress-custom-emoticons-with-different-expressions-and-management-package
License CC BY-SA 4.0 以商业目的使用本网站原创内容需获许可，非商业目的使用授权遵循CC BY-NC 4.0

Loading comments...

14 条评论

Han2014-09-21 08:00:00
:mrgreen: 我的评论无法显示图片了
- 回复
蜜汁炒酸奶 2014-09-22 08:00:00
回复 @Han：。。。怎么回事？这都好久以前的了，记得当初一直没弄出往一个表情组件里嵌套好几组
回复
1
鬼地方2014-07-20 08:00:00
:骷髅: :鄙视: :猪头: :疑问: [al17]
- 回复
彼岸时光网2013-12-30 08:00:00
[al2] 来看看效果，呵呵~
- 回复
蜜汁炒酸奶 2013-12-30 08:00:00
回复 @彼岸时光网： <a href="#div-comment-180" rel="nofollow">@彼岸时光网 </a>欢迎哈，谢谢 [al9]
回复
1
Joe2013-12-30 08:00:00
[al11] 测试一下
- 回复
蜜汁炒酸奶 2013-12-30 08:00:00
回复 @Joe： <a href="#div-comment-179" rel="nofollow">@Joe </a>欢迎 [al9]
回复
1
周良2013-12-30 08:00:00
[al10] [al10]
- 回复
周良2013-12-31 08:00:00
回复 @蜜汁炒酸奶： <a href="#div-comment-182" rel="nofollow">@汐枫 </a> 确实不错的说
回复
蜜汁炒酸奶 2013-12-30 08:00:00
回复 @周良： <a href="#div-comment-178" rel="nofollow">@周良 </a> [al11] [al11]
回复
1
PHP二次开发2013-12-30 08:00:00
赞一个，不错不错。
- 回复
蜜汁炒酸奶 2013-12-30 08:00:00
回复 @PHP二次开发： <a href="#div-comment-177" rel="nofollow">@PHP二次开发 </a>嘻嘻，谢谢
回复
1
xiao2013-12-30 08:00:00
不错啊，来围观下
- 回复
蜜汁炒酸奶 2013-12-30 08:00:00
回复 @xiao： <a href="#div-comment-175" rel="nofollow">@xiao </a>O(∩_∩)O谢谢哈 :grin:
回复
1

预览