短代码样式的实现

短代码框实现方法,很简单,方便懒人抄写(学习自http://maizihuakai.com/wordpress-shortcodes.html

第一步:在FUNCTIONS里写入:

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
function greencode($atts, $content=null){
return '<div class="green">'.$content.'</div>';
}
add_shortcode('green','greencode');
function graycode($atts, $content=null){
return '<div class="gray">'.$content.'</div>';
}
add_shortcode('gray','graycode');
function redcode($atts, $content=null){
return '<div class="red">'.$content.'</div>';
}
add_shortcode('red','redcode');
function yellowcode($atts, $content=null){
return '<div class="yellow">'.$content.'</div>';
}
add_shortcode('yellow','yellowcode');

第二步:添加CSS样式到style.css

1
2
3
4
5
6
7
8
9
10
11
12
.green{background: url(img/green.png) no-repeat scroll 15px 15px #EFF4D4; border: 1px solid #8FAD3D;color:#779B39;margin: 20px 0px;padding: 15px 15px 15px 80px;position: relative;}
.green a{color: #2b2b2b;border-bottom:1px dotted #2b2b2b;}
.green a:hover{color:#2b2b2b;border-bottom:1px solid #2b2b2b; }
.red{background: url(img/red.png) no-repeat scroll 15px 15px #EFCEC9;border: 1px solid #BE1F1F;color: #820B0B;margin: 20px 0px;padding: 15px 15px 15px 80px;position: relative;}
.red a{ color: #F60;border-bottom:1px dotted #F60;}
.red a:hover{color:#F60;border-bottom:1px solid #F60; }
.gray{background: url(img/gray.png) no-repeat scroll 15px 15px #E7E7E7; border: 1px solid #aaa;color: #333;margin: 20px 0px;padding: 15px 15px 15px 80px;position: relative;}
.gray a{ color: #4B7126;border-bottom:1px dotted #4B7126;}
.gray a:hover{color:#4B7126;border-bottom:1px solid #4B7126; }
.yellow{background: url(img/yellow.png) no-repeat scroll 15px 15px #FFEA97;border: 1px solid #E1B400;color: #9F6F26;margin: 20px 0px;padding: 15px 15px 15px 80px;position: relative;}
.yellow a{ color:#A84A1E;border-bottom:1px dotted #A84A1E;}
.yellow a:hover{color:#A84A1E;border-bottom:1px solid #A84A1E; }

第三步:把图片COPY至对应的文件夹中,使用时插入[xxx][/xxx]即可(其中xxx=green | red | yellow | gray)

效果如下

[gray]这是一条测试文字

这是一条测试文字

这是一条测试文字

这是一条测试文字
[/gray] [green]这是一条测试文字

这是一条测试文字

这是一条测试文字

这是一条测试文字

这是一条测试文字

这是一条测试文字[/green] [red]这是一条测试文字

这是一条测试文字

这是一条测试文字

这是一条测试文字

这是一条测试文字

这是一条测试文字[/red] [yellow]这是一条测试文字

这是一条测试文字

这是一条测试文字

这是一条测试文字

这是一条测试文字

这是一条测试文字[/yellow]