我们以添加腾讯视频短代码按钮为例:
首先,注册短代码,在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编辑器中添加自定义短代码按钮的功能: