WordPress Shortcode(短代码)：完全指南

4. TinyMCE编辑器增加短代码按钮
虽然短代码可以方便的为文章添加动态内容，但是这对于普通用户来说可能还是有点复杂，尤其是当参数比较多的时候。大多数用户对于类HTML代码并不熟悉，然而要使用短代码，他们必须记住具体的语法与参数，因为即使是一个小小的语法错误，都可能导致意想不到的结果。

要解决这个，我们可以给 TinyMCE编辑器增加一个按钮，使用户可以通过简单的单击来增加短代码。创建这个按钮仅需两个步骤：

为这个按钮创建一个JS文件
注册按钮与JS文件
4.1 通过JS文件创建按钮
JS文件是通过 TinyMCE API 来注册 TinyMCE 插件的。我们在主题的 js 文件夹下创建 recent-posts.js ，并贴进去下面的代码（需要把图片文件也放在这里）：

(function() {
   tinymce.create('tinymce.plugins.recentposts', {
      init : function(ed, url) {
         ed.addButton('recentposts', {
            title : 'Recent posts',
            image : url+'/recentpostsbutton.png',
            onclick : function() {
               var posts = prompt("调用文章数量", "1");
               var text = prompt("列表标题", "这里是文章列表标题");
 
               if (text != null && text != ''){
                  if (posts != null && posts != '')
                     ed.execCommand('mceInsertContent', false, '[recent-posts posts="'+posts+'"]'+text+'[/recent-posts]');
                  else
                     ed.execCommand('mceInsertContent', false, '[recent-posts]'+text+'[/recent-posts]');
               }
               else{
                  if (posts != null && posts != '')
                     ed.execCommand('mceInsertContent', false, '[recent-posts posts="'+posts+'"]');
                  else
                     ed.execCommand('mceInsertContent', false, '[recent-posts]');
               }
            }
         });
      },
      createControl : function(n, cm) {
         return null;
      },
      getInfo : function() {
         return {
            longname : "Recent Posts",
            author : 'Specs',
            authorurl : 'http://9iphp.com',
            infourl : 'http://9iphp.com/opensystem/wordpress/1094.html',
            version : "1.0"
         };
      }
   });
   tinymce.PluginManager.add('recentposts', tinymce.plugins.recentposts);
})();

如下图所示，我们通过调用 tinymce.create() 创建了一个插件。代码中最重要的是 init() 函数，我们定义了一个名字，一个图标文件及 onclick() 事件处理程序。

在 onclick() 函数的前两行，弹出两个对话框让用户输入调用文章数量及列表标题两个参数，然后根据用户输入，把生成的短代码插入到编辑器中。

最后，TinyMCE插件通过 add() 函数添加到 PluginManager。现在我们已经成功的整合了 [recent-posts] 短代码到Wordpress中。

4.2 注册按钮及TinyMCE插件
创建完 JS 文件后，我们现在需要注册它和短代码按钮。所以我们创建两个函数并把它们绑定到合适的Wordpress过滤器中。

第一个叫做 register_button() 的函数把短代码添加到按钮数组中，在现有按钮和新按钮之间添加分割线。

function register_button( $buttons ) {
   array_push( $buttons, "|", "recentposts" );
   return $buttons;
}

第二个函数 add_plugin() 指出JS文件的路径及文件名。

function add_plugin( $plugin_array ) {
   $plugin_array['recentposts'] = get_template_directory_uri() . '/js/recent-posts.js';
   return $plugin_array;
}

下一步是添加包含前面两个函数的过滤器。register_button() 函数绑定到 mce_buttons 过滤器，这个会在编辑器加载插件的时候执行； add_plugin() 函数绑定到 mce_external_plugins 过滤器，当加载按钮的时候执行。

function my_recent_posts_button() {
 
   if ( ! current_user_can('edit_posts') && ! current_user_can('edit_pages') ) {
      return;
   }
 
   if ( get_user_option('rich_editing') == 'true' ) {
      add_filter( 'mce_external_plugins', 'add_plugin' );
      add_filter( 'mce_buttons', 'register_button' );
   }
 
}

当用户没有对文章在可视化编辑器中编辑的权限时，前面的函数不会执行。

最后把函数勾到Wordpress初始化函数

add_action('init', 'my_recent_posts_button');

4.3 按钮用法
为了检测代码是否正确，我们打开一篇新的文章，这时一个我们刚刚定义的按钮是不是已经出现在第一行的末尾了？