强化WordPress默认编辑器小工具按钮的办法（自定义快速工具栏）

我们有些时候需要在编辑器中添加自定义代码，但是每次都用手动输入代码是不是觉得比较麻烦。实际上我们可以将这些常用的代码添加到小工具编辑器中作为快捷实现插入到编辑器。比如在"简单代码实现WordPress隐藏内容用密码才可显示"文章中提到的密码可见的也可以用小工具自定义按钮快速添加。

     
function download($atts, $content = null) {  
        return '<i class="icon-download"></i><a class="download" href="'.$content.'" rel="external" target="_blank" title="下载地址">下载地址</a>';}  
  
        add_shortcode("download", "download");   
  
        add_action('after_wp_tiny_mce', 'bolo_after_wp_tiny_mce');  
  
        function bolo_after_wp_tiny_mce($mce_settings) {  
        ?>    
            <script type="text/javascript">    
                QTags.addButton( 'download', '下载按钮', "[download]下载地址[/download]" );  
                QTags.addButton('hr', '横线', "<hr />\n");//添加横线  
                QTags.addButton('h3', 'H3标签', "<h3>", "</h3>\n"); //添加标题3  
                QTags.addButton('h4', 'H4标签', "<h4>", "</h4>\n"); //添加标题4  
                QTags.addButton('sb', '上标', "<sup>", "</sup>");  
                QTags.addButton('xb', '下标', "<sub>", "</sub>");  
                QTags.addButton('shsj', '首行缩进', "&nbsp;&nbsp;");  
                QTags.addButton('hc', '回车', "<br />");  
                QTags.addButton('jz', '居中', "<center>", "</center>");  
                QTags.addButton('mark', '黄字', "<mark>", "</mark>");  
                QTags.addButton('xhx', '下划线', "<u>", "</u>");  
                QTags.addButton('pre', '代码', "<pre>", "</pre>\n"); //添加代码  
            QTags.addButton( 'mimakejian', '密码可见', '[secret key="输入密码"]', '[/secret]' );  
                QTags.addButton('embed', '文章引用', "[mimelove_insert_post ids=文章id]");  
            function bolo_QTnextpage_arg1() {  
            }    
            </script>  
        <?php   

根据需要调整。

或者：

/*提示框 开始 */
function toc($atts, $content=null){
 return '<div id="wmh_tkzj">'.$content.'</div>';
}
add_shortcode('v_tkzj','toc');

/*下载按钮*/
function sg_down($atts, $content = null) {
 extract(shortcode_atts(array(
 "href" => 'http://'
 ) , $atts));
 return '<a class="sgbtn_down" href="' . $href . '" target="_blank" rel="nofollow">' . $content . '</a>';
}
add_shortcode('sgbtn_down', 'sg_down');

/*演示按钮*/
function sg_see($atts, $content = null) {
 extract(shortcode_atts(array(
 "href" => 'http://'
 ) , $atts));
 return '<a class="sgbtn_see" href="' . $href . '" target="_blank" rel="nofollow">' . $content . '</a>';
}
add_shortcode('sgbtn_see', 'sg_see');

//后台编辑器 短代码按键
function appthemes_add_quicktagss() {
?> 
<script type="text/javascript"> 
    //提示框
    QTags.addButton( 'v_tkzj', '天空之境', '<div id="wmh_tkzj">天空之境</div>\n', "" );
    //按钮
    QTags.addButton( 'sgbtn_down', '下载按钮', "[sgbtn _down href='']下载按钮", "[/sgbtn_down]\r" );
    QTags.addButton( 'sgbtn_see', '演示按钮', "[sgbtn _see href='']演示按钮", "[/sgbtn_see]\r" );
    
</script>
<?php
}
add_action('admin_print_footer_scripts', 'appthemes_add_quicktagss' );

添加样式：

/*编辑器中添加的文本框样式*/
#wmh_tkzj{
    font-size: 14px;
    width: 100%;
    color: #555555;
    overflow: hidden;
    margin-bottom: 20px;
    padding: 15px 15px 15px 35px;
    border-radius: 10px;
    box-shadow: 6px 0 12px -5px rgb(253, 223, 234), -6px 0 12px -5px rgb(215, 240, 243);
    background-color: #FFDEE9;
    background: linear-gradient(40deg,#e0c3fc,#8ec5fc);
    background-image: -webkit-linear-gradient(40deg,#e0c3fc,#8ec5fc);
}

/*编辑器中添加的 下载按钮&演示按钮&赞赏按钮 样式*/
.sgbtn_down,.sgbtn_see{
	float: left;
    background: #0061a8;
    color: #fff!important;
    line-height: 34px;
    padding: 0 15px;
    border-radius: 5px;
    box-shadow: 0px 8px 20px -5px #0061a8d9;
    transition: all .3s ease-in 0s;
    font-size: 12px;
    border: 0;
    margin: 20px;
}

整理到网上的办法，测试看看效果。

本文出处：老蒋部落 » 强化WordPress默认编辑器小工具按钮的办法（自定义快速工具栏） | 欢迎分享（ 公众号：老蒋朋友圈 ）