如何为WordPress默认编辑器添加表情图标

最后更新于 2013 年 1 月 11 日

在文章《开启WordPress编辑器隐藏的功能》中提到过WordPress隐藏了一些自带的编辑器功能，并描述了如何开启这些功能，但这些功能中不包括表情图标，也就是说表情功能默认就没有集成到WordPress中，WordPress的编辑器是TinyMCE，表情图标是TinyMCE的一个官方插件，本文就介绍一下如何将表情图标加入。

Note：很多插件都能开启TinyMCE所有功能，如果你想了解WordPress中为TinyMCE添加外部插件的机制，或者想自己制作一款精简的编辑器插件，本文对你会有所帮助。

如何添加表情图标

上面说了，表情图标是TinyMCE自带的插件，不信的话去TinyMCE官网下载最新版的TinyMCE，将文件解压缩后查看下面的路径

tinymce/jscripts/tiny_mce/plugins

就能看到所有的插件，如果你再继续找到emotions文件夹，看看该文件夹下的img文件夹，不就是TinyMCE那些古板的表情图标吗。我们要干的活就是把这个emotions文件夹加到WordPress中，并让表情按钮显示在编辑器里。

用插件还是写在主题的functions.php中？

在开始之前先要弄明白代码加到哪里。无论写在插件文件还是主题文件中，都可以实现我们要的功能。区别在于，写在主题的functions.php中可以省略一些插件声明，但重用性差，换了主题就没了。而插件可能写起来麻烦一点点，但不怕换主题，可重用性高。因此这次我们选择将emotions用插件形式放到WordPress中。

写插件声明

既然要用插件，先在插件目录（wp-content/plugins）下创建自己的插件目录吧，用自己的名字命名很不错，自己写自己用，自信满满的。新建一个目录叫sola_emotions，在目录下新建一个php文件叫做sola_emotions.php，这样命名可以让别人一眼看出这个是插件的主文件。将TinyMCE插件目录下的emotions文件夹拷贝到sola_emotions目录下。现在你应该有这样一个目录了

要让WordPress识别你的插件，需要写一段声明，即使你的插件文件空空如也，只要有这一段注释，WordPress就会承认你是一个插件

标准写法，参考wordpress文档

对于我的表情插件，就这样声明一下

<?php
/*
Plugin Name: Sola's TinyMCE Emotions
Plugin URI: https://www.solagirl.net
Description: Add emotions to TinyMCE.
Author: Sola
Version: 1.0
Author URI: https://www.solagirl.net
*/

这时候去WordPress后台的已安装插件页面，就能看到自己的插件了

你可以启用或者停用，除了WordPress自作多情的显示已启用或者停用以外，什么都不会发生，目前这个插件就是打酱油的。

添加表情图标

现在来干正事，既然要添加表情插件，第一步就是将我们插件目录下的emotions文件夹真正的添加到WordPress中，在插件文件里写如下代码

add_filter('mce_external_plugins', 'sola_add_emotion_plugin' );
function sola_add_emotion_plugin( $sola_plugin_array ) {
		$sola_plugin_array['emotions'] = plugin_dir_url( __FILE__ ) .'emotions/editor_plugin.js';
	   
		return $sola_plugin_array;
}

函数的名字尽量起的独特一点，防止与其它插件冲突，可以用自己的名字或者插件名字缩写命名，如果名字太大众再加点随机字符串

plugin_dir_url( __FILE__ )描述插件路径，引用插件下的文件要用这个函数，不能硬编码地址，因为WordPress允许用户更改wp-content的位置。

editor_plugin.js是emotions插件的功能文件，定义了该插件，所以主要就是引入这个文件。

将表情按钮放在编辑器第一排

add_filter("mce_buttons", "sola_add_emotions");
function sola_add_emotions($buttons) {
	$buttons[] = 'emotions'; 
	return $buttons;
}

现在，启用插件，去撰写文章页面看看编辑器，是不是多了个表情按钮

如果你点击表情图标，会发现弹出一个空白窗口。哪里有问题？

图片不显示通常是路径错误，我们没猜错，打开sola_emotions/emotions/emotions.htm文件，这个文件就是弹出窗口的HTML结构，如果你要添加自己的表情，也要修改这个文件，注意一下文件开头head标签内部的脚本路径

<script type="text/javascript" src="../../tiny_mce_popup.js"></script><script type="text/javascript" src="js/emotions.js"></script>

 tiny_mce_popup.js 是tinyMCE的核心文件，在/wp-includes/js/tinymce目录下，这里的相对路径要修改一下，变成

<script type="text/javascript" src="../../../../wp-includes/js/tinymce/tiny_mce_popup.js"></script>

保存文件，刷新撰写文章页面，点击表情图标，现在表情有了

完善插件

写插件要注意的一件事就是在需要的时候才载入代码，例如一个只用于前台页面的js脚本就不应该在后台加载，否则不但浪费了内存，还容易使后台的脚本出错。所以我们也来完善一下插件，编辑器只在后台的所见即所得模式使用，所以对于两种情况不需要加载插件代码：

• 当前登录用户没有撰写文章的权限
• 用户没有使用所见即所得的模式编辑

用代码描述就是这样

function sola_add_tinymce_buttons() {
   // 如果用户没有编辑文章的权限，直接返回
   if ( ! current_user_can('edit_posts') && ! current_user_can('edit_pages') )
     return;
 
   // 只在所见即所得的模式下执行代码
   if ( get_user_option('rich_editing') == 'true') {
     //引入外部插件文件
     add_filter('mce_external_plugins', 'sola_add_emotion_plugin' );
     //向编辑器第一行添加表情按钮
     add_filter("mce_buttons", "sola_add_emotions");
   }
}
add_action('init','sola_add_tinymce_buttons');

add_filter是执行两个函数的前提，所以我们只需要控制什么时候add_filter就可以了

插件的完整代码

<?php
/**
 * @package Sola's TinyMCE Emotions
 * @version 1.0
 */
/*
Plugin Name: Sola's TinyMCE Emotions
Plugin URI: https://www.solagirl.net
Description: Add emotions to TinyMCE.
Author: Sola
Version: 1.0
Author URI: https://www.solagirl.net
*/

function sola_add_tinymce_buttons() {
	// 如果用户没有编辑文章的权限，直接返回
   if ( ! current_user_can('edit_posts') &#038;& ! current_user_can('edit_pages') )
     return;
 
   // 只在所见即所得的模式下执行代码
   if ( get_user_option('rich_editing') == 'true') {
   	 //引入外部插件文件
     add_filter('mce_external_plugins', 'sola_add_emotion_plugin' );
	 //向编辑器第一行添加表情按钮
     add_filter("mce_buttons", "sola_add_emotions");
   }
}
add_action('init','sola_add_tinymce_buttons');
function sola_add_emotion_plugin( $sola_plugin_array ) {
		$sola_plugin_array['emotions'] = plugin_dir_url( __FILE__ ) .'emotions/editor_plugin.js';
	   
		return $sola_plugin_array;
}
function sola_add_emotions($buttons) {
	$buttons[] = 'emotions'; 
	return $buttons;
}
?>

下载完整插件

[download id=29]

下载插件，尝试自己添加自定义表情吧，如果你喜欢折腾的话。