WP笔记

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

在文章《开启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后台的已安装插件页面,就能看到自己的插件了

插件显示在wp后台

你可以启用或者停用,除了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]

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

7条评论

    1. 暂时没空解,这是两年前的方法,3.9以后编辑器api变了不少,应该无法在最新版里用了。

  1. Pingback: WordPress TinyMCE编辑器定制方法总结 | ~SolagirL~

评论已关闭。