本网站使用的WordPress短代码，彩色按钮方案

[v_qing]使用短代码（shortcode）功能，为文章添加更多精彩[/v_qing]

前言

[v_notice]目前本网站采用的主题是欲思主题，但是主题本身并没有短代码方案，不过好在WordPress可以自己扩展功能，今天云落给朋友们推荐个简单的方案，其实是早就想写的，没啥时间[/v_notice]

函数代码

以下代码全部添加进function.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  class="sc_act">'.$content.'</div>';
}
add_shortcode('v_act','toe');
/*橙色文本框*/
function tof($atts, $content=null){
    return '<div id="sc_organge">'.$content.'</div>';
}
add_shortcode('v_organge','tof');
/*青色文本框*/
function tog($atts, $content=null){
    return '<div id="sc_qing">'.$content.'</div>';
}
add_shortcode('v_qing','tog');
/*粉色文本框*/
function toh($atts, $content=null){
    return '<div id="sc_pink">'.$content.'</div>';
}
add_shortcode('v_pink','toh');
/*绿色按钮*/
function toi($atts, $content=null) {
   extract(shortcode_atts(array("href" => 'http://'), $atts));
	return '<a class="greenbtn" href="'.$href.'" target="_blank" rel="nofollow">'.$content.'</a>';
}
add_shortcode('gb' , 'toi' );
/*蓝色按钮*/
function toj($atts, $content=null) {
   extract(shortcode_atts(array("href" => 'http://'), $atts));
	return '<a class="bluebtn" href="'.$href.'" target="_blank" rel="nofollow">'.$content.'</a>';
}
add_shortcode('bb' , 'toj' );
/*黄色按钮*/
function tok($atts, $content=null) {
   extract(shortcode_atts(array("href" => 'http://'), $atts));
	return '<a class="yellowbtn" href="'.$href.'" target="_blank" rel="nofollow">'.$content.'</a>';
}
add_shortcode('yb' , 'tok' );
/*添加音乐按钮*/
function tol($atts, $content=null){
    return '<audio style="width:100%;max-height:40px;" src="'.$content.'" controls preload loop>您的浏览器不支持HTML5的 audio 标签，无法为您播放！</audio>';
}
add_shortcode('music','tol');

样式代码

CSS样式代码添加进主题style.css文件，你也可以自己新建一个css文件，然后在需要用到的地方引用，比如我就是在single.php里面引用的

 /*通知框*/
#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_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_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_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_blue {color: #4D99D2;background: #dbe7f8 url('img/sc_blue.png') -1px -1px no-repeat;border: 1px solid #b7d2f2;overflow: hidden;margin: 10px 0;padding: 15px 15px 15px 35px;}#sc_organge {color:#1c2b49;background: #ffbc06;border: 1px solid #e9ac1a;overflow: hidden;margin: 10px 0;padding: 15px 15px 15px 35px;} #sc_qing {color: #131418;background: #009856;border: 1px solid #1065e6;overflow: hidden;margin: 10px 0;padding:
15px 15px 15px 35px;}
#sc_pink {color: #131418;background: #ef4b86;border: 1px solid #cb2027;overflow:
hidden;margin: 10px 0;padding:
15px 15px 15px 35px;}
.sc_act{margin:10px 0;padding:10px 15px;background:#FFF;border:1px solid
#E3E3E3;border-left:3px solid #3DABCE}
.sc_act:hover{background:#fcfcfc;}
/*!彩色按钮样式 */
.greenbtn{-moz-box-shadow:0 10px 14px -7px #3e7327;-webkit-box-shadow:0 10px
14px -7px #3e7327;box-shadow:0 10px 14px -7px
#3e7327;background:-webkit-gradient(linear,left top,left
bottom,color-stop(0.05,#77b55a),color-stop(1,#72b352));background:-moz-linear-gr
adient(top,#77b55a 5%,#72b352
100%);background:-webkit-linear-gradient(top,#77b55a 5%,#72b352
100%);background:-o-linear-gradient(top,#77b55a 5%,#72b352
100%);background:-ms-linear-gradient(top,#77b55a 5%,#72b352
100%);background:linear-gradient(to bottom,#77b55a 5%,#72b352
100%);filter:progid:DXImageTransform.Microsoft.gradient(startColorstr='#77b55a',
endColorstr='#72b352',GradientType=0);background-color:#77b55a;-moz-border-radiu
s:4px;-webkit-border-radius:4px;border-radius:4px;border:1px solid
#4b8f29;display:inline-block;cursor:pointer;color:#fff !important;
;font-family:arial;font-size:13px;font-weight:bold;padding:6px
12px;text-decoration:none;text-shadow:0 1px 0
#5b8a3c}.greenbtn:hover{background:-webkit-gradient(linear,left top,left
bottom,color-stop(0.05,#72b352),color-stop(1,#77b55a));background:-moz-linear-gr
adient(top,#72b352 5%,#77b55a
100%);background:-webkit-linear-gradient(top,#72b352 5%,#77b55a
100%);background:-o-linear-gradient(top,#72b352 5%,#77b55a
100%);background:-ms-linear-gradient(top,#72b352 5%,#77b55a
100%);background:linear-gradient(to bottom,#72b352 5%,#77b55a
100%);filter:progid:DXImageTransform.Microsoft.gradient(startColorstr='#72b352',
endColorstr='#77b55a',GradientType=0);background-color:#72b352;}.greenbtn:active{
position:relative;top:1px;}
.bluebtn{-moz-box-shadow:inset 0 1px 0 0 #54a3f7;-webkit-box-shadow:inset 0 1px
0 0 #54a3f7;box-shadow:inset 0 1px 0 0
#54a3f7;background:-webkit-gradient(linear,left top,left
bottom,color-stop(0.05,#007dc1),color-stop(1,#0061a7));background:-moz-linear-gr
adient(top,#007dc1 5%,#0061a7
100%);background:-webkit-linear-gradient(top,#007dc1 5%,#0061a7
100%);background:-o-linear-gradient(top,#007dc1 5%,#0061a7
100%);background:-ms-linear-gradient(top,#007dc1 5%,#0061a7
100%);background:linear-gradient(to bottom,#007dc1 5%,#0061a7
100%);filter:progid:DXImageTransform.Microsoft.gradient(startColorstr='#007dc1',
endColorstr='#0061a7',GradientType=0);background-color:#007dc1;-moz-border-radiu
s:3px;-webkit-border-radius:3px;border-radius:3px;border:1px solid
#124d77;display:inline-block;cursor:pointer;color:#fff !important;
;font-family:arial;font-size:13px;padding:6px
24px;text-decoration:none;text-shadow:0 1px 0
#154682}.bluebtn:hover{background:-webkit-gradient(linear,left top,left
bottom,color-stop(0.05,#0061a7),color-stop(1,#007dc1));background:-moz-linear-gr
adient(top,#0061a7 5%,#007dc1
100%);background:-webkit-linear-gradient(top,#0061a7 5%,#007dc1
100%);background:-o-linear-gradient(top,#0061a7 5%,#007dc1
100%);background:-ms-linear-gradient(top,#0061a7 5%,#007dc1
100%);background:linear-gradient(to bottom,#0061a7 5%,#007dc1
100%);filter:progid:DXImageTransform.Microsoft.gradient(startColorstr='#0061a7',
endColorstr='#007dc1',GradientType=0);background-color:#0061a7;}.bluebtn:active{p
osition:relative;top:1px;}
.yellowbtn{-moz-box-shadow:inset 0 1px 0 0 #fff6af;-webkit-box-shadow:inset 0
1px 0 0 #fff6af;box-shadow:inset 0 1px 0 0
#fff6af;background:-webkit-gradient(linear,left top,left
bottom,color-stop(0.05,#ffec64),color-stop(1,#ffab23));background:-moz-linear-gr
adient(top,#ffec64 5%,#ffab23
100%);background:-webkit-linear-gradient(top,#ffec64 5%,#ffab23
100%);background:-o-linear-gradient(top,#ffec64 5%,#ffab23
100%);background:-ms-linear-gradient(top,#ffec64 5%,#ffab23
100%);background:linear-gradient(to bottom,#ffec64 5%,#ffab23
100%);filter:progid:DXImageTransform.Microsoft.gradient(startColorstr='#ffec64',
endColorstr='#ffab23',GradientType=0);background-color:#ffec64;-moz-border-radiu
s:6px;-webkit-border-radius:6px;border-radius:6px;border:1px solid
#fa2;display:inline-block;cursor:pointer;color:#333 !important;
;font-family:arial;font-size:15px;font-weight:bold;padding:6px
24px;text-decoration:none;text-shadow:0 1px 0
#fe6}.yellowbtn:hover{background:-webkit-gradient(linear,left top,left
bottom,color-stop(0.05,#ffab23),color-stop(1,#ffec64));background:-moz-linear-gr
adient(top,#ffab23 5%,#ffec64
100%);background:-webkit-linear-gradient(top,#ffab23 5%,#ffec64
100%);background:-o-linear-gradient(top,#ffab23 5%,#ffec64
100%);background:-ms-linear-gradient(top,#ffab23 5%,#ffec64
100%);background:linear-gradient(to bottom,#ffab23 5%,#ffec64
100%);filter:progid:DXImageTransform.Microsoft.gradient(startColorstr='#ffab23',
endColorstr='#ffec64',GradientType=0);background-color:#ffab23;}.yellowbtn:active
{position:relative;top:1px;}

添加进编辑器

[v_error]请将本段代码中的所有<改成[，否则不能用[/v_error]
欲思主题的话在js/my-quicktags.js添加一下代码

 QTags.addButton( 'ilinks', '链接按钮', "<dm href='']", "[/dm]" );
QTags.addButton( 'idownload', '下载按钮', "<dl href='']", "[/dl]" );
QTags.addButton( 'ikaiyuan', '开源按钮', "<gt href='']开源地址[/gt]", "" );
QTags.addButton( 'v_notice', '绿色通知框', "<v_notice]", "[/v_notice]" );
QTags.addButton( 'v_error', '红色警告框', "<v_error]", "[/v_error]" );
QTags.addButton( 'v_warn', '黄色错误框', "<v_warn]", "[/v_warn]" );
QTags.addButton( 'v_tips', '灰色提示框', "<v_tips]", "[/v_tips]" );
QTags.addButton( 'v_blue', '蓝色提示框', "<v_blue]", "[/v_blue]" );
QTags.addButton( 'v_act', '蓝边文本框', "<v_act]", "[/v_act]" );
QTags.addButton( 'v_organge', '橙色文本框', "<v_organge]", "[/v_organge]" );
QTags.addButton( 'v_qing', '青色文本框', "<v_qing]", "[/v_qing]" );
QTags.addButton( 'v_pink', '粉色文本框', "<v_pink]", "[/v_pink]" );
QTags.addButton( 'gb', '绿色按钮', "<gb href='']", "[/gb]" );
QTags.addButton( 'bb', '蓝色按钮', "<bb href='']", "[/bb]" );
QTags.addButton( 'yb', '黄色按钮', "<yb href='']", "[/yb]" ); 
QTags.addButton( 'music', '音乐按钮', "<music]", "[/music]" );

其他主题的其实也差不多

实际效果

[v_notice]这是一个淡绿色的提示框[/v_notice]
[v_error]这是一个红色的错误提示框[/v_error]
[v_warn]这是一个黄色的警告提示框[/v_warn]
[v_tips]这是一个低调的灰色提示框[/v_tips]
[v_blue]这是一个高调的蓝色提示框[/v_blue]
[v_act]蓝边文本框[/v_act]
[v_organge]橙色文本框[/v_organge]
[v_qing]青色文本框[/v_qing]
[v_pink]粉色文本框[/v_pink]
[gb href=”]绿色按钮[/gb]
[bb href=”]蓝色按钮[/bb]
[yb href=”]黄色按钮[/yb]
[dm href=”]连接按钮[/dm]
[dl href=”]下载按钮[/dl]
[gt href=”]开源按钮[/gt]

[music]音乐按钮[/music]

图片素材

图片放在主题的img目录下，没有的话可以自己新建一个，如果不想新建新目录的话，自己在CSS里面修改路径