有朋自远方来,不亦乐乎。
为wordpress文章编辑器添加短代码按钮
原创 龙砚庭  发布于 1年前 ( 2017-09-17 ) 阅读: 2,992 次 评论: 19 条 A+

昨天在痞子神的博客,无意间发现一种添加按钮的方法,个人感觉功能不错,特地转载过来分享一下。

这个方法相对我常用的添加按钮方法来说,是复杂了一些,但不可否认的是——确实漂亮!

DEMO

我的是在添加媒体按钮旁边:

我的短代码按钮

而本文教程的按钮则是常用工具按钮旁边:

短代码按钮

实现方法

函数部署

在functions.php文件扔进以下代码:

//注册按钮  
function wd_add_mce_button() {  
    // check user permissions  
    if ( !current_user_can( 'edit_posts' ) && !current_user_can( 'edit_pages' ) ) {  
        return;  
    }  
    if ( 'true' == get_user_option( 'rich_editing' ) ) {  
        add_filter( 'mce_external_plugins', 'wd_add_tinymce_plugin' );  
        add_filter( 'mce_buttons', 'wd_register_mce_button' );  
    }  
}  
add_action('admin_head', 'wd_add_mce_button');  
function wd_add_tinymce_plugin( $plugin_array ) {  
    $plugin_array['wd_mce_button'] = get_template_directory_uri() .'/js/mce-button.js';  
    return $plugin_array;  
}  
function wd_register_mce_button( $buttons ) {  
    array_push( $buttons, 'wd_mce_button' );  
    return $buttons;  
}  
//解析短代码  
add_shortcode('task', 'task_shortcode');  
function task_shortcode( $attr , $content = '') {             
    $out ='<div class="task shortcodestyle"><i class="fa fa-tasks"></i>'.$content.'</div>';  
    return $out;  
}  
add_shortcode('warning', 'warning_shortcode');  
function warning_shortcode( $attr , $content = '') {              
    $out ='<div class="warning shortcodestyle"><i class="fa fa fa-exclamation-triangle"></i>'.$content.'</div>';  
    return $out;  
}  
add_shortcode('buy', 'buy_shortcode');  
function buy_shortcode( $attr , $content = '') {              
    $out ='<div class="buy shortcodestyle"><i class="fa fa-check-square"></i>'.$content.'</div>';  
    return $out;  
}  
add_shortcode('noway', 'noway_shortcode');  
function noway_shortcode( $attr , $content = '') {            
    $out ='<div class="noway shortcodestyle"><i class="fa fa-times-rectangle"></i>'.$content.'</div>';  
    return $out;  
}  
add_shortcode('down', 'down_shortcode');  
function down_shortcode( $attr , $content = '') {             
    $out ='<div class="down shortcodestyle">'.$content.'</div>';  
    return $out;  
}  ​
js部署

在主题根目录的js文件夹,新建一个mac-button.js文件。

当然,你也可以修改函数部署代码里面的js文件命名:

/js/mce-button.js

,扔进以下代码:

(function() {  
    tinymce.PluginManager.add('my_mce_button', function( editor, url ) {  
        editor.addButton( 'my_mce_button', {  
            //text: '插入excel',  
            icon: false,  
            //type: 'menubutton',  
            image: url + "/info.png",  //注意:自行添加图标图片
            type: 'menubutton',  
            menu: [  
                {  
                    text: '灰色项目面板',  
                    onclick: function() {  
                        editor.insertContent('[task][/task]');  
                    }  
                },  
                {  
                    text: '红色禁止面板',  
                    onclick: function() {  
                        editor.insertContent('[noway][/noway]');  
                    }  
                },  
                {  
                    text: '黄色警告面板',  
                    onclick: function() {  
                        editor.insertContent('[warning][/warning]');  
                    }  
                },  
                {  
                    text: '蓝色清新面板',  
                    onclick: function() {  
                        editor.insertContent('[buy][/buy]');  
                    }  
                },    
            ]  
        });  
    });  
})();  ​

注意修改代码里面的图片路径,自行添加按钮图标图片。

css部署
.shortcodestyle{margin:20px 0px;padding: 15px 15px 15px 40px;position: relative;-moz-box-shadow:0px 1px 2px rgba(0, 0, 0, 0.2); -webkit-box-shadow:0px 1px 2px rgba(0, 0, 0, 0.2); box-shadow:0px 1px 2px rgba(0, 0, 0, 0.2);border-radius:5px;-webkit-border-radius:5px;-moz-border-radius:5px;-khtml-border-radius:5px;}  
.shortcodestyle i{padding-right: 20px;}  
.shortcodestyle a{padding:5px;}  
.shortcodestyle a:hover{background:none;border-radius:0px;-webkit-border-radius:0px;-moz-border-radius:0px;-khtml-border-radius:0px;}  
.warning{background:#FFEA97;color: #9F6F26;}  
.noway{background:#EFCEC9;color: #820B0B;}  
.buy{background: #9dd7e8; color:  #03536b;}  
.task{background: #E7E7E7; color:  #333;}  
.shortcodestyle,.warning,.noway,.buy,.task p{text-indent: 0;}  ​

庭说

以上代码,我是直接搬用痞子神的教程。

代码是以添加高亮盒子(警告、禁止等高亮框)短代码为例,具体如何使用,需要你们自行分析里面的代码成分,而非“拿来主义”。

其实,只要摸透了它的代码写法,这个短代码按钮的实现方法,并没有什么难度。

因此,我就不作过多的介绍了。

Principle Team
龙砚庭官方QQ群,做真正意义上的社群!
7人已关注

目前评论:19   其中:访客  11   博主  8

发表评论

莫慌,小狮子正在努力加载评论...
  1. 明月登楼
    明月登楼3 ( 2017.12.13 11:31:21 )  10楼

    我去,这篇文章我竟然无视了!罪过罪过呀!
    :???:

  2. 明月登楼
    明月登楼3 ( 2017.09.29 16:54:37 )  9楼

    博主最近更新的节奏有点儿慢下来了呀!

  3. 明月登楼的博客
    明月登楼的博客3 ( 2017.09.28 9:07:36 )  8楼

    过来look一下!

  4. 明月登楼的博客
    明月登楼的博客3 ( 2017.09.21 21:42:33 )  7楼

    看的有点儿晕!但是感觉这个东西有时候真的很有用!

  5. 知库吧
    知库吧1 ( 2017.09.21 16:47:36 )  6楼

    这跟加在编辑器上方没什么区别啊。就是位置不一样了,加了个图标。感觉没差