在前面的短代码应用教程中,可以通过短代码来做一些重复的事情,比如你希望在文章内某位置添加广告、情景:有时候我们需要添加一些固定的内容,比如你希望在每篇文章内添加广告,你可以用一个短代码来实现,比如建立一个段代码 [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;
- }
上面的代码中 mylink 按钮的代码被注释掉了,如果需要添加多个按钮,可按照类似的方法添加。
步骤三、准备 js 文件
步骤二中 add_plugin 函数中引入了 js,根据路径创建好 js 文件,以 myadvert.js 为例,添加下列代码:
- (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 需要对应修改的地方都有注释,请看清。
寻找图标,可以到 http://findicons.com/icon/16046/link?id=16153 搜寻。