wordpress文章添加色彩提示框以及添加编辑器提示框的快捷按钮

前言:

想要把意见事情言简意赅，不加歧义的表达出来并不是一件容易的事情，特别是在博客中我们无法像视频那样生动形象的展示内容。面对这样的情况，或许我们可以对存在歧义的内容通过色彩标注，加粗，放大，特别备注的方式来详细说明。这里介绍一种可以在文章中快速添加色彩提示框的方法。改方法是纯代码实现，你完全无需担心性能问题，同时使用的方法直接集成到了编辑的上实现了一键添加，感兴趣朋友的可以对照教程一步步配置。

效果展示：

提示框示例:

编辑器快捷按钮示例:

具体实现：

functions.php插入代码:

注意:为了避免代码转义，下面给出的代码<提换成了<%,插入到functions.php之前你需要将<%替换为<，然后再进行添加

/*短代码信息框 开始*/
function toz($atts, $content=null){
    return '<%div id="sc_notice">'.$content.'<%/div>';
}
add_shortcode('v_notice','toz');
function toa($atts, $content=null){
    return '<%div id="sc_error">'.$content.'<%/div>';
}
add_shortcode('v_error','toa');
function toc($atts, $content=null){
    return '<%div id="sc_warn">'.$content.'<%/div>';
}
add_shortcode('v_warn','toc');
function tob($atts, $content=null){
    return '<%div id="sc_tips">'.$content.'<%/div>';
}
add_shortcode('v_tips','tob');
function tod($atts, $content=null){
    return '<%div id="sc_blue">'.$content.'<%/div>';
}
add_shortcode('v_blue','tod');
function toe($atts, $content=null){
    return '<%div id="sc_black">'.$content.'<%/div>';
}
add_shortcode('v_black','toe');
function tof($atts, $content=null){
    return '<%div id="sc_xuk">'.$content.'<%/div>';
}
add_shortcode('v_xuk','tof');
function tog($atts, $content=null){
    return '<%div id="sc_lvb">'.$content.'<%/div>';
}
add_shortcode('v_lvb','tog');
function toh($atts, $content=null){
    return '<%div id="sc_redb">'.$content.'<%/div>';
}
add_shortcode('v_redb','toh');
function toi($atts, $content=null){
    return '<%div id="sc_orange">'.$content.'<%/div>';
}
add_shortcode('v_orange','toi');
/*短代码信息框 结束*/

//添加 HTML 编辑器自定义快捷标签按钮
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( 'v_notice', '绿框', '<%div class="sc sc_notice">绿色提示框<%/div>', "" );
QTags.addButton( 'v_error', '红框', '<%div class="sc sc_error">红色提示框<%/div>', "" );
QTags.addButton( 'v_warn', '黄框', '<%div class="sc sc_warn">黄色提示框<%/div>', "" );
QTags.addButton( 'v_tips', '灰框', '<%div class="sc sc_tips">灰色提示框<%/div>', "" );
QTags.addButton( 'v_blue', '蓝框', '<%div class="sc sc_blue">蓝色提示框<%/div>', "" );
QTags.addButton( 'v_black', '黑框', '<%div class="sc sc_black">黑色提示框<%/div>', "" );
QTags.addButton( 'v_xuk', '虚线', '<%div class="sc sc_xuk">虚线提示框<%/div>', "" );
QTags.addButton( 'v_lvb', '绿边', '<%div class="sc sc_lvb">绿边提示框<%/div>', "" );
QTags.addButton( 'v_redb', '红边', '<%div class="sc sc_redb">红边提示框<%/div>', "" );
QTags.addButton( 'v_orange', '橙边', '<%div class="sc sc_orange">橙边提示框<%/div>', "" );
function bolo_QTnextpage_arg1() {
    }
    <%/script>
<%?php
}

额外css插入代码:

/*彩色信息框*/
.sc {
position: relative;
color: #fff;
background: #20a0ff;
background: -webkit-gradient(linear,left top,right top,from(#20a0ff),to(#20b8ff));
background: -webkit-linear-gradient(left,#20a0ff,#20b8ff);
background: linear-gradient(90deg,#20a0ff,#20b8ff);
padding: 6px 20px;
border-radius: 10px;
-webkit-box-shadow: 0 3px 5px rgba(32,160,255,.5);
box-shadow: 0 3px 5px rgba(32,160,255,.5);
margin-bottom: 20px;
}

.sc.sc_notice {
    color: #7da33c;
    background: #ecf2d6 url('img/sc_notice.png') -1px -1px no-repeat;
    border: 1px solid #aac66d;
    overflow: hidden;
    margin: 10px 0;
    padding: 15px 15px 15px 35px;
 }
.sc.sc_warn {
    color: #ad9948;
    background: #fff4b9 url('img/sc_warn.png') -1px -1px no-repeat;
    border: 1px solid #eac946;
    overflow: hidden;
    margin: 10px 0;
    padding: 15px 15px 15px 35px;
 }
.sc.sc_error {
    color: #c66;
    background: #ffecea url('img/sc_error.png') -1px -1px no-repeat;
    border: 1px solid #ebb1b1;
    overflow: hidden;
    margin: 10px 0;
    padding: 15px 15px 15px 35px;
 }
.sc.sc_tips {
    color: #777;
    background: #eaeaea url('img/sc_tips.png') -1px -1px no-repeat;
    border: 1px solid #ccc;
    overflow: hidden;
    margin: 10px 0;
    padding: 15px 15px 15px 35px;
}
.sc.sc_blue {
    color: #1ba1e2;
    background: rgba(27, 161, 226, 0.26) url('img/sc_blue.png') -1px -1px no-repeat;
    border: 1px solid #1ba1e2;
    overflow: hidden;
    margin: 10px 0;
    padding: 15px 15px 15px 35px;
}
.sc.sc_black {
    border-width: 1px 4px 4px 1px;
    border-style: solid;
    border-color: #3e3e3e;
    margin: 10px 0;
    padding: 15px 15px 15px 35px;
}
.sc.sc_xuk {
    border: 2px dashed rgb(41, 170, 227);
    background-color: rgb(248, 247, 245);
    margin: 10px 0;
    padding: 15px 15px 15px 35px;
}
.sc.sc_lvb {
    margin: 10px 0;
    padding: 10px 15px;
    border: 1px solid #e3e3e3;
    border-left: 2px solid #05B536;
    background: #FFF;
}
.sc.sc_redb {
    margin: 10px 0;
    padding: 10px 15px;
    border: 1px solid #e3e3e3;
    border-left: 2px solid #ED0505;
    background: #FFF;
}
.sc.sc_organge {
    margin: 10px 0;
    padding: 10px 15px;
    border: 1px solid #e3e3e3;
    border-left: 2px solid #EC8006;
    background: #FFF;
}