wordpress进阶教程(二十九):给wordpress默认编辑器添加自定义按钮

在前面的短代码应用教程中,可以通过短代码来做一些重复的事情,比如你希望在文章内某位置添加广告、情景:有时候我们需要添加一些固定的内容,比如你希望在每篇文章内添加广告,你可以用一个短代码来实现,比如建立一个段代码[myadvert]来输出一个固定好的广告,不过有的人还是嫌麻烦,或者不会英语,写了短代码也记不住,那可以考虑给wordpress默认编辑器添加一个自定义的按钮,点击按钮,自动插入你需要的内容。

文章参考自:http://www.tutorialchip.com/wordpress/wordpress-shortcode-tinymce-button-tutorial-part-2/

效果:wordpress自定义按钮
我们要添加一个自定义的按钮“谷歌广告”,当我们点击这个按钮的时候,自动插入我们需要的内容,插入的内容自定,你可以直接插入广告代码,也可以插入一个短代码。

步骤一、添加以下代码到functions.php

  1. //初始化时执行myadvert_button函数   
  2. add_action('init', 'myadvert_button');   
  3. function myadvert_button() {   
  4.     //判断用户是否有编辑文章和页面的权限   
  5.     if ( ! current_user_can('edit_posts') && ! current_user_can('edit_pages') ) {   
  6.         return;   
  7.     }   
  8.     //判断用户是否使用可视化编辑器   
  9.     if ( get_user_option('rich_editing') == 'true' ) {   
  10.   
  11.         add_filter( 'mce_external_plugins', 'add_plugin' );   
  12.         add_filter( 'mce_buttons', 'register_button' );   
  13.     }   
  14. }  

步骤二:添加上面过滤器中的两个函数

  1. function register_button( $buttons ) {   
  2.     array_push$buttons"|""myadvert" ); //添加 一个myadvert按钮   
  3.     //array_push( $buttons, "|", "mylink" ); //添加一个mylink按钮   
  4.   
  5.     return $buttons;   
  6. }   
  7. function add_plugin( $plugin_array ) {   
  8.    $plugin_array['myadvert'] = get_bloginfo( 'template_url' ) . '/js/myadvert.js'; //myadvert按钮的js路径   
  9.    //$plugin_array['mylink'] = get_bloginfo( 'template_url' ) . '/js/mylink.js'; //mylink按钮的js路径   
  10.    return $plugin_array;   
  11. }  

上面的代码中mylink按钮的代码被注释掉了,如果需要添加多个按钮,可按照类似的方法添加。

步骤三、准备js文件

步骤二中add_plugin函数中引入了js,根据路径创建好js文件,以myadvert.js为例,添加下列代码:

  1. (function() {   
  2.     tinymce.create('tinymce.plugins.myadvert', { //注意这里有个 myadvert   
  3.         init : function(ed, url) {   
  4.             ed.addButton('myadvert', { //注意这一行有一个 myadvert   
  5.                 title : '谷歌广告',   
  6.                 image : url+'/google.png', //注意图片的路径 url是当前js的路径   
  7.                 onclick : function() {   
  8.                      ed.selection.setContent('[myadvert]'); //这里是你要插入到编辑器的内容,你可以直接写上广告代码  
  9.     
  10.                 }   
  11.             });   
  12.         },   
  13.         createControl : function(n, cm) {   
  14.             return null;   
  15.         },   
  16.     });   
  17.     tinymce.PluginManager.add('myadvert', tinymce.plugins.myadvert); //注意这里有两个 myadvert   
  18. })();  

js需要对应修改的地方都有注释,请看清。

寻找图标,可以到http://findicons.com/icon/16046/link?id=16153搜寻。

已有3条评论

  1. 匿名
    匿名 : 回复

    成功了,就是太麻烦了点= =

  2. 萝卜鱼
    萝卜鱼 : 回复

    评论系统很不错,嘿嘿。

  3. 小胡
    小胡 : 回复

    求教一个问题啊,我按照你的方法弄好了按钮,但是我想在JS文件给PHP文件传递参数,但是一直不成功,ajax那段代码一直不执行,能不能麻烦你帮忙看看是哪里出问题了,谢谢了啊!

    下面是js文件的完整代码:

    (function() {   
        tinymce.create('tinymce.plugins.tqq_fuzhu', { //注意这里有个 taobaoke   
            init : function(ed, url) {   
                ed.addButton('tqq_fuzhu', { //注意这一行有一个 taobaoke   
                    title : '一键上传图片外链到腾讯微博,并自动生产短网址',   
                    image : url+'/google.png', //注意图片的路径 url是当前js的路径   
                    onclick : function() {  
    					 var this_content_url=document.getElementById("shangpinurl_value").value;
    					 var this_content_pic_url=document.getElementById("shangpinpic_value").value;
    					 alert(this_content_pic_url);  //这一步可以执行
    						$.ajax({
    							type:"POST",
    							url:"post.php",
    							data:"this_content_url="+this_content_url+"&this_content_pic_url="+this_content_pic_url,
    							cache:false,
    							success:function(data){
    							document.getElementById('fenxiangurl_value').value=data;
    							alert(data);
    							}
    						});
                        // ed.selection.setContent(thisthis); //这里是你要插入到编辑器的内容,你可以直接写上广告代码  
        
                    }   
                });   
            },   
            createControl : function(n, cm) {   
                return null;   
            },   
        });   
        tinymce.PluginManager.add('tqq_fuzhu', tinymce.plugins.tqq_fuzhu); //注意这里有两个 taobaoke   
    })();  

发表评论