在 WordPress 中使用 Smilies 表情符号

Question

刚刚发布了一文章，其中不注意有一个类似 :-) 的符号，当时也没觉得特别的，但是当发布文章以后就变成这样 :-) 的一个表情，原来 WordPress 还能这么玩的，虽然这个表情不是很好看的，不过确实以前不知道有这个功能，本文将详细的为你介绍在 WordPress 中使用 Smilies 表情符号。

Smilies 也被称作表情图标（Emoticons），是在文章中用以传达表情的图形。使用它们可为文章增色不少。

WordPress 可以自动转换如:-)等文本表情符号为图像，通常表情符号由几个英文标点符号构成。比如下面的这些：

• ;-) 等于 ;-)
• :-) 等于 :-)
• :-( 等于 :-(
• :-? 等于 :-?

有关表情图标的来历，请见 维基百科上的相关解释。

默认情况下，WordPress 会自动将文本形式的 Smilies 表情转为图形表情。当你在日志中输入 :-) ，在预览时或发布后就会显示为 :-) 。

关闭图形 Smilies 表情

如果你关闭了图形 Smilies 表情，你所输入的普通文本表情就会保留下来。

1. 打开管理面板
2. 选择 设定 -> 撰写
3. 在格式部分，取消转换表情图标，如 :-) 及 :-P 向图形形式的显示。

 

你可以通过以上设置是否开启或关闭图形式表情，关闭表情图标后，如果你在日志中输入了 ;-)，那么在预览时或发布后仍会显示为 ;-) 。因此如果你要使用普通文本取代表情图标的话也是可以的。

Smilies 表情列表

WordPress 自带表情都在 wp-includes/images/smilies 文件夹下，表情符号代码如下表所示：

图标	文本	文本	完整文本	图标	完整文本
:)	:)	:-)	:smile:	:lol:	:lol:
:D	:D	:-D	:grin:	:oops:	:oops:
:(	:(	:-(	:sad:	:cry:	:cry:
:o	:o	:-o	:eek:	:evil:	:evil:
8O	8O	8-O	:shock:	:twisted:	:twisted:
:?	:?	:-?	:???:	:roll:	:roll:
8-)	8)	8-)	:cool:	:!:	:!:
:x	:x	:-x	:mad:	:?:	:?:
:P	:P	:-P	:razz:	:idea:	:idea:
:|	:|	:-|	:neutral:	:arrow:	:arrow:
;)	;)	;-)	:wink:	:mrgreen:	:mrgreen:

调用默认表情符号

由于 WordPress 自带表情都在 wp-includes/images/smilies 文件夹下，所以你可以使用以下方法调用 WordPress 的默认表情符号：

//获取评论表情
function comm_smilies(){
  $a = array( 'mrgreen','razz','sad','smile','oops','grin','eek','???','cool','lol','mad','twisted','roll','wink','idea','arrow','neutral','cry','?','evil','shock','!' );
  $b = array( 'mrgreen','razz','sad','smile','redface','biggrin','surprised','confused','cool','lol','mad','twisted','rolleyes','wink','idea','arrow','neutral','cry','question','evil','eek','exclaim' );
  for( $i=0; $i<22; $i++ ){
    echo '<a title="'.$a[$i].'" href="javascript:grin('."'：".$a[$i]."：'".')"><img src="/wp-includes/images/smilies/icon_'.$b[$i].'.gif" /></a>';
  }
}

将以上代码放入主题的 functions.php 文件中，然后在评论表单指定位置放置该表情。

修改默认表情符号

如果你觉得系统默认的标签符号不够好，也可以自己修改，以本站为例，本周标签包位于主题下的 img/smilies/ 目录中，首先在 functions.php 文件中添加如下代码：

//评论表情改造，如需更换表情，img/smilies/ 下替换
add_filter('smilies_src', 'dtheme_smilies_src', 1, 10); 

//修改评论表情调用路径
function upd_smilies_src ($img_src, $img, $siteurl){
  return get_bloginfo('template_directory').'/img/smilies/'.$img;  //新标签包路径
}

function comm_smilies(){
  $a = array( 'mrgreen','razz','sad','smile','oops','grin','eek','???','cool','lol','mad','twisted','roll','wink','idea','arrow','neutral','cry','?','evil','shock','!' );
  $b = array( 'mrgreen','razz','sad','smile','redface','biggrin','surprised','confused','cool','lol','mad','twisted','rolleyes','wink','idea','arrow','neutral','cry','question','evil','eek','exclaim' );
  for( $i=0;$i<22;$i++ ){
    echo '<a title="'.$a[$i].'" href="javascript：grin('."'：".$a[$i]."：'".')"><img src="'.get_bloginfo('template_directory').'/img/smilies/icon_'.$b[$i].'.gif" /></a>'; //新标签路径
  }
}

然后在评论模板 comments.php 放置表情的位置调用 comm_smilies() 函数：

comm_smilies();

Smilies 表情疑难解惑

为何不能使用？

WordPress 管理员可能禁用了 Smilies 表情。另一种可能就是，/wp-includes/images/smilies 中的 Smilies 表情图片被删除了。

为何只有我不能使用？

如果别人可以使用 Smilies 表情，而唯独你无法使用的话：

在 Smilies 文本前后输入一个空格。这就会避免 Smilies 受到前后其他文本的偶然影响。

确保在smiley文本前后未使用任何引号或其他标点符号。

Smilies 表情图片保存在哪儿？

Smilies 或表情图标图形可在 /wp-includes/images/smilies 目录下找到。

如何显示与众不同的 Smilies 图片？

最简单的办法：

1. 找到 /wp-includes/images/smilies 目录下的 Smilies 表情图片，将它们备份到另一个文件夹下。
2. 注意各 Smilies 表情图片的文件名。你自己的图片文件名必须与这些文件名相符，且格式需为 gif 格式。
3. 为了能够达到预期效果，图片尺寸最好相近。
4. 使用 FTP 程序将新表情文件上传到 /wp-includes/images/smilies 目录下。

如果你准备修改代码：

如果你真的需要修改图片的文件名，就要编辑关联这些图片的文件，vars.php（在WordPress 2.2中，它们位于 functions.php 中），位于 /wp-includes/ 目录下。在调整代码时请多加注意。

你可以参阅相关的详细教程，并了解如何避免修改WP代码，Ars Aranea。

当然还有一些 WordPress 插件也可以用来定制 WordPress 中的 Smilies 表情。

为何我的 Smilies 图片显示是空白的？

如果你最近上传了图片，那么就有可能这些图片是以 ASCII 格式通过 FTP 程序上传的。请重新进行上传，并保证它们以 BINARY 格式传输上去。

某些 FTP 程序具有一种自动检测的设定，这种设定会使用正确的格式进行文件上传，而无需用户进行干预。如果你的 FTP 客户端程序具有此类设定的话，将其打开。

Smiley CSS

WordPress 中的 Smilies 图片在显示于日志中时，会被自动给予一个 wp-smiley 的CSS类别。你可以使用此类别对你的 Smilies 表情进行定制，使它们与其他日志图片显得不同。

举例说来，让日志中的图片显示在内容左侧，并让文字填充在其周围的这种布局可谓屡见不鲜。此布局样式的 CSS 如下：

.post img {
  float: left;
}

这将影响到日志中的所有图片，包括你的 Smilies 图片。要对此进行覆盖以使得 Smilies 表情保持内联的话，你可以在 CSS 中加入如下内容：

img.wp-smiley {
  float: none;
}