WordPress editor enhancements-shortcut short codes

present day,WPThe forest brings you a more convenientWordPressEdit shortcode function,This in the earlyWordPressBlog topic,Basically will add,And because of the trouble,After a long period of time, no developer added.

And the new way I teach you,Can make it more convenient for you to add,No picture, no truth,Look at the picture:

Front-end style:

Background use and add:

I canceled the download button,Because it involves the reward function,for you all,You don't need it.

When using:

 

Fill in the required content between the two curly brackets.

Isn't it awkward??

Let me tell you the method:

functionin

//Register button  
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;  
}  
//Parsing short codes  
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;  
}  

jssection

(function() {  
    tinymce.PluginManager.add('wd_mce_button', function( editor, url ) {  
        editor.addButton( 'wd_mce_button', {  
            //text: 'insertexcel',  
            icon: false,  
            //type: 'menubutton',  
            image: url + "/info.png",  
            type: 'menubutton',  
            menu: [  
                {  
                    text: 'Gray project panel',  
                    onclick: function() {  
                        editor.insertContent('[task][/task]');  
                    }  
                },  
                {  
                    text: 'Red prohibition panel',  
                    onclick: function() {  
                        editor.insertContent('[noway][/noway]');  
                    }  
                },  
                {  
                    text: 'Yellow warning panel',  
                    onclick: function() {  
                        editor.insertContent('[warning][/warning]');  
                    }  
                },  
                {  
                    text: 'Blue fresh panel',  
                    onclick: function() {  
                        editor.insertContent('[buy][/buy]');  
                    }  
                },    
            ]  
        });  
    });  
})();  

 

icon,Go download one by yourself16*16ofpngPicture nameinfo.pngUpload to andjs同文件夹in面即可.

csssection:

.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;}  

 

Related Article
How WordPress implements Gzip compression

Everyone knows,Compression affects the overall loading speed of the website andSEOA significant improvement,But many people use plugins orcdnwhich providedGZIPDecompression,This may Read more

WordPress creates a temporary administrator to log in to the background

Do you need to create a temporary account to log in to your website backend?If you create a permanent administrator Read more

WordPress gets statistics on the number of images in an article

as far as I knowWordPressThere is no function to count the number of pictures in the article,So if you want Read more

WordPress batch change domain names in articles

This tutorial is packaged and replaced for my entire site,But it can also be used to change the domain name Read more

Leave a Reply

Your email address will not be published. Required fields are marked *

*
To prove you're a person (not a spam script), type the security word shown in the picture.
Anti-spam image