我们以添加腾讯视频短代码按钮为例:
首先,注册短代码,在functions.php中添加如下代码
//一段代码让wordpress引用腾讯视频不再有广告
function v_qq_video($atts, $content=null) {
extract(shortcode_atts(array("vids" => ''), $atts));
$url = 'https://vv.video.qq.com/getinfo?vids='.$vids.'&platform=101001&charge=0&otype=json';
$json = file_get_contents($url);
preg_match('/^QZOutputJson=(.*?);$/',$json,$json2);
$tempStr = json_decode($json2[1],true);
$vurl = 'https://ugcws.video.gtimg.com/'.$tempStr['vl']['vi'][0]['fn']."?vkey=".$tempStr['vl']['vi'][0]['fvkey'];
$video = '<video style="width: 100%;" controls src="'.$vurl.'" poster="https://puui.qpic.cn/qqvideo_ori/0/'.$vids.'_496_280/0"></video>';
return $video;
}
add_shortcode('tx-video', 'v_qq_video');
然后在继续在主题的functions.php中添加如下代码:
/**扩展TinyMCE编辑器,添加自定义按钮及功能**/
add_action( 'admin_init', 'my_tinymce_button' );
function my_tinymce_button() {
if ( current_user_can( 'edit_posts' ) && current_user_can( 'edit_pages' ) ) {
add_filter( 'mce_buttons', 'my_register_tinymce_button' );
add_filter( 'mce_external_plugins', 'my_add_tinymce_button' );
}
}
function my_register_tinymce_button( $buttons ) {
array_push( $buttons, "button_eek", "button_green" );
return $buttons;
}
function my_add_tinymce_button( $plugin_array ) {
$plugin_array['my_button_script'] = get_bloginfo('template_directory') . "/static/js/editor.js";
return $plugin_array;
}
最后,在主题文件夹的/static/js目录下新增一个editor.js文件,代码如下:
(function() {
/* Register the buttons */
tinymce.create('tinymce.plugins.MyButtons', {
init : function(ed, url) {
/**
* Inserts TencentVideo content
*/
ed.addButton( 'button_eek', {
text : 'Insert TencentVideo',
title : 'Insert TencentVideo',
onclick : function() {
ed.selection.setContent('[tx-video vids= ]');
}
});
/**
* Adds HTML tag to selected content
*/
ed.addButton( 'button_green', {
text : 'Add H3 Title',
title : 'Add H3 Title',
cmd: 'button_green_cmd'
});
ed.addCommand( 'button_green_cmd', function() {
var selected_text = ed.selection.getContent();
var return_text = '';
return_text = '<h3>' + selected_text + '</h3>';
ed.execCommand('mceInsertContent', 0, return_text);
});
},
createControl : function(n, cm) {
return null;
},
});
/* Start the buttons */
tinymce.PluginManager.add( 'my_button_script', tinymce.plugins.MyButtons );
})();
效果如图:

这里还有一个插件也可以实现在TinyMCE编辑器中添加自定义短代码按钮的功能: