wordpress进阶教程(二十九):给wordpress默认编辑器添加自定义按钮
在前面的短代码应用教程中，可以通过短代码来做一些重复的事情，比如你希望在文章内某位置添加广告、情景：有时候我们需要添加一些固定的内容，比如你希望在每篇文章内添加广告，你可以用一个短代码来实现，比如建立一个段代码[myadvert]来输出一个固定好的广告，不过有的人还是嫌麻烦，或者不会英语，写了短代码也记不住，那可以考虑给wordpress默认编辑器添加一个自定义的按钮，点击按钮，自动插入你需要的内容。
文章参考自：http://www.tutorialchip.com/wordpress/wordpress-shortcode-tinymce-button-tutorial-part-2/
效果：
我们要添加一个自定义的按钮“谷歌广告”，当我们点击这个按钮的时候，自动插入我们需要的内容，插入的内容自定，你可以直接插入广告代码，也可以插入一个短代码。
步骤一、添加以下代码到functions.php
//初始化时执行myadvert_button函数 add_action('init', 'myadvert_button'); function myadvert_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' ); } } function register_button( $buttons ) { array_push( $buttons, "|", "myadvert" ); //添加 一个myadvert按钮 //array_push( $buttons, "|", "mylink" ); //添加一个mylink按钮 return $buttons; } function add_plugin( $plugin_array ) { $plugin_array['myadvert'] = get_bloginfo( 'template_url' ) . '/js/myadvert.js'; //myadvert按钮的js路径 //$plugin_array['mylink'] = get_bloginfo( 'template_url' ) . '/js/mylink.js'; //mylink按钮的js路径 return $plugin_array; } (function() { tinymce.create('tinymce.plugins.myadvert', { //注意这里有个 myadvert init : function(ed, url) { ed.addButton('myadvert', { //注意这一行有一个 myadvert title : '谷歌广告', image : url+'/google.png', //注意图片的路径 url是当前js的路径 onclick : function() { ed.selection.setContent('[myadvert]'); //这里是你要插入到编辑器的内容，你可以直接写上广告代码 } }); }, createControl : function(n, cm) { return null; }, }); tinymce.PluginManager.add('myadvert', tinymce.plugins.myadvert); //注意这里有两个 myadvert })();
步骤二：添加上面过滤器中的两个函数
//初始化时执行myadvert_button函数 add_action('init', 'myadvert_button'); function myadvert_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' ); } } function register_button( $buttons ) { array_push( $buttons, "|", "myadvert" ); //添加 一个myadvert按钮 //array_push( $buttons, "|", "mylink" ); //添加一个mylink按钮 return $buttons; } function add_plugin( $plugin_array ) { $plugin_array['myadvert'] = get_bloginfo( 'template_url' ) . '/js/myadvert.js'; //myadvert按钮的js路径 //$plugin_array['mylink'] = get_bloginfo( 'template_url' ) . '/js/mylink.js'; //mylink按钮的js路径 return $plugin_array; } (function() { tinymce.create('tinymce.plugins.myadvert', { //注意这里有个 myadvert init : function(ed, url) { ed.addButton('myadvert', { //注意这一行有一个 myadvert title : '谷歌广告', image : url+'/google.png', //注意图片的路径 url是当前js的路径 onclick : function() { ed.selection.setContent('[myadvert]'); //这里是你要插入到编辑器的内容，你可以直接写上广告代码 } }); }, createControl : function(n, cm) { return null; }, }); tinymce.PluginManager.add('myadvert', tinymce.plugins.myadvert); //注意这里有两个 myadvert })();
上面的代码中mylink按钮的代码被注释掉了，如果需要添加多个按钮，可按照类似的方法添加。
步骤三、准备js文件
步骤二中add_plugin函数中引入了js，根据路径创建好js文件，以myadvert.js为例，添加下列代码：
//初始化时执行myadvert_button函数 add_action('init', 'myadvert_button'); function myadvert_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' ); } } function register_button( $buttons ) { array_push( $buttons, "|", "myadvert" ); //添加 一个myadvert按钮 //array_push( $buttons, "|", "mylink" ); //添加一个mylink按钮 return $buttons; } function add_plugin( $plugin_array ) { $plugin_array['myadvert'] = get_bloginfo( 'template_url' ) . '/js/myadvert.js'; //myadvert按钮的js路径 //$plugin_array['mylink'] = get_bloginfo( 'template_url' ) . '/js/mylink.js'; //mylink按钮的js路径 return $plugin_array; } (function() { tinymce.create('tinymce.plugins.myadvert', { //注意这里有个 myadvert init : function(ed, url) { ed.addButton('myadvert', { //注意这一行有一个 myadvert title : '谷歌广告', image : url+'/google.png', //注意图片的路径 url是当前js的路径 onclick : function() { ed.selection.setContent('[myadvert]'); //这里是你要插入到编辑器的内容，你可以直接写上广告代码 } }); }, createControl : function(n, cm) { return null; }, }); tinymce.PluginManager.add('myadvert', tinymce.plugins.myadvert); //注意这里有两个 myadvert })();
js需要对应修改的地方都有注释，请看清。