在上文中我们成功添加了Shortcodes短代码，然而在编辑的时候还是有点不方便，为了更有效率的进行文章编辑，我们还可以给WordPress的后台编辑器加上自定义按钮
添加HTML文本编辑器下的按钮
WordPress后台默认使用的是TinyMCE编辑器，Github地址。后台的按钮大致分为三种，最上方的我称作Media button，默认只有一个添加媒体按钮，在可视化编辑器下的的叫Edit button，这些按钮可以自己添加图片（标），最后在HTML文本编辑器下的叫HTML button
此处添加的是文本按钮添加添加文本编辑器的按钮方法比较简单，只需用到一个action钩子，还是打开主题的functions.php，加在最后一个?>之前（一般在add_action，add_fliter这些后面一点点都OK）前提是已经添加好Shortcode，代码示例
|
1 2 3 4 5 6 7 8 9 10 |
add_action('after_wp_tiny_mce', 'add_html_button'); function add_html_button($mce_settings) { ?> <script type="text/javascript"> QTags.addButton( '红标题', '红标题', "[hongbt]", "[/hongbt]" ); QTags.addButton( '红高亮', '红高亮', "[hong]", "[/hong]" ); QTags.addButton( '键盘', '键盘', "[kbd]", "[/kbd]" ); </script> <?php } |
添加可视化编辑器按钮
functions.php中添加的代码参考
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 |
add_filter( 'mce_external_plugins', 'add_plugin' ); add_filter( 'mce_buttons', 'register_button' ); function register_button( $buttons ) { array_push( $buttons, " ", "maclight" ); array_push( $buttons, " ", "showmore" ); array_push( $buttons, " ", "btnblue" ); return $buttons; } function add_plugin( $plugin_array ) { $plugin_array['maclight'] = get_bloginfo( 'template_url' ) . '/shortcodes/more.js'; $plugin_array['showmore'] = get_bloginfo( 'template_url' ) . '/shortcodes/more.js'; $plugin_array['btnblue'] = get_bloginfo( 'template_url' ) . '/shortcodes/more.js'; return $plugin_array; } |
接下来在新建一个名为shortcodes的文件夹，上传到主题根目录，里面新建一个more.js的文件，编辑该文件，参考代码
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 |
(function() { tinymce.create('tinymce.plugins.maclight', { init : function(ed, url) { ed.addButton('maclight', { title : 'Mac白色标题', image : url+'/images/maclight.png', onclick : function() { ed.selection.setContent('[maclight title="标题"]内容' + ed.selection.getContent() + '[/maclight]'); } }); }, createControl : function(n, cm) { return null; }, }); tinymce.PluginManager.add('maclight', tinymce.plugins.maclight); tinymce.create('tinymce.plugins.btnblue', { init : function(ed, url) { ed.addButton('btnblue', { title : '蓝色按钮', image : url+'/images/btnblue.png', onclick : function() { ed.selection.setContent('[btnblue title="链接（已加http头）"]标题' + ed.selection.getContent() + '[/btnblue]'); } }); }, createControl : function(n, cm) { return null; }, }); tinymce.PluginManager.add('btnblue', tinymce.plugins.btnblue); })(); |
变量名需和functions.php里的一致，可以看到我需要在shortcodes文件夹下新建一个叫images的文件夹，里面存放按钮的图片，我设置的是方形的200*200的png图片
添加Media button
Media button的添加我在网上并没有找到任何教程（或者有教程也是错误的），目前只会添加按钮但还不能给按钮赋值，实现更多的功能，说不定以后多参考几个插件的代码可以找到方法
|
1 2 3 4 |
add_action('media_buttons', 'add_media_button'); function add_media_button() { echo '<a id="insert-my-media" class="button" href="#">媒体按钮</a>'; } |
有关Media button可参考这两篇文章
给WordPress编辑器添加表情按钮，让文章萌萌哒！
如何给WordPress的编辑器添加一个自定义按钮，并且实现插入功能
更多参考链接
WordPress 的 Hook 机制与原理
WordPress为自带编辑器添加自定义功能按钮
Hungway
If not me,who?If not now,when?
文章评论（3）
We're a group of volunteers and opening a new
scheme in our community. Your web site offered us with valuable info to work on. You've done a formidable job and our entire community will be thankful to you.
I'm not sure exactly why but this weblog is loading very slow for me. Is anyone else having this problem or is it a issue on my end? I'll check back later on and see if the problem still exists.
Hiya! I know this is kinda off topic nevertheless I'd
figured I'd ask. Would you be interested in trading links or maybe guest authoring a blog article or vice-versa?
My blog discusses a lot of the same topics as yours and I think we could greatly benefit from
each other. If you might be interested feel free to shoot me an e-mail.
I look forward to hearing from you! Awesome blog by
the way!