WordPress短代码下载按钮

最近更换自己博客的主题之后,发现之前主题所使用的短代码功能失效后,已添加使用的短代码就变成了代码文本,比如我添加了很多下载按钮,使用短代码就可以快速形成一个漂亮的带下载链接按钮,失效后就没有按钮了。如果要一个个去改文章,确实耗费时间。既然短代码功能不错,那么就要继续使用它,那么就要去改主题代码了。

第一步 注册短代码

打开主题的functions.php文件,在结束标记?>之前加上如下代码:

## Buttons -------------------------------------------------- # function shortcode_button( $atts, $content = null ) {     @extract($atts);  	$size  = ($size)  ? ' '.$size  :' small' ; 	$color = ($color) ? ' '.$color : ' gray'; 	$link  = ($link) ? ' '.$link : ''; 	$target = ($target) ? ' target="_blank"' : '';  	$out = '' .do_shortcode($content). '';     return $out; } add_shortcode('button', 'shortcode_button');

这段代码的作用就是注册一个短代码button对于函数shortcode_button,$size $color等参数就是短代码的可选参数size、color等,控制了短代码实现样式;

第二部 添加样式表

打开主题style.css文件,添加css样式,代码如下:

a.button{border: 1px solid #a3a3a3;background: #d4d4d4;height: 25px;line-height:25px;-moz-border-radius: 4px;-webkit-border-radius: 4px;border-radius: 4px;color: white;display:inline-block;	margin:0 5px 20px;	padding:0 10px;	position:relative;font-size:12px; 	text-shadow: 0 1px 0 rgba(0, 0, 0, 0.5);box-shadow: 0 1px 2px rgba(0, 0, 0, 0.3),inset 0 1px 0 rgba(255, 255, 255, 0.5),inset 0 -1px 0 rgba(0, 0, 0, 0.15); 	-webkit-transition: background .40s;-moz-transition: background .40s; -o-transition: background .40s;transition: background .40s; 	background: -webkit-gradient(linear,50% 0,50% 100%,color-stop(0%,#d4d4d4),color-stop(100%,#c7c7c7));background: -webkit-linear-gradient(top,#d4d4d4 0,#c7c7c7 100%);background: -moz-linear-gradient(top,#d4d4d4 0,#c7c7c7 100%);background: -o-linear-gradient(top,#d4d4d4 0,#c7c7c7 100%);	background: -ms-linear-gradient(top,#d4d4d4 0,#c7c7c7 100%);background: linear-gradient(top,#d4d4d4 0,#c7c7c7 100%); } a.button:hover{	background: -webkit-gradient(linear,50% 0,50% 100%,color-stop(0%,#d8d6d6),color-stop(100%,#cdcdcd));background: -webkit-linear-gradient(top,#d8d6d6 0,#cdcdcd 100%);background: -moz-linear-gradient(top,#d8d6d6 0,#cdcdcd 100%);background: -o-linear-gradient(top,#d8d6d6 0,#cdcdcd 100%);background: -ms-linear-gradient(top,#d8d6d6 0,#cdcdcd 100%);background: linear-gradient(top,#d8d6d6 0,#cdcdcd 100%);} a.button:active{ top:1px;}  a.button.red{border: 1px solid #B63540;background: #ED596A;background: -webkit-gradient(linear,50% 0,50% 100%,color-stop(0%,#F77087),color-stop(100%,#E3414D));background: -webkit-linear-gradient(top,#F77087 0,#E3414D 100%);background: -moz-linear-gradient(top,#F77087 0,#E3414D 100%);background: -o-linear-gradient(top,#F77087 0,#E3414D 100%);background: -ms-linear-gradient(top,#F77087 0,#E3414D 100%);background: linear-gradient(top,#F77087 0,#E3414D 100%);} a.button.red:hover{background: -webkit-gradient(linear,50% 0,50% 100%,color-stop(0%,#F8889B),color-stop(100%,#E65762));	background: -webkit-linear-gradient(top,#F8889B 0,#E65762 100%);background: -moz-linear-gradient(top,#F8889B 0,#E65762 100%);background: -o-linear-gradient(top,#F8889B 0,#E65762 100%);background: -ms-linear-gradient(top,#F8889B 0,#E65762 100%);background: linear-gradient(top,#F8889B 0,#E65762 100%);} a.button.green{border: 1px solid #5E8C22;background: #89C03E;background: -webkit-gradient(linear,50% 0,50% 100%,color-stop(0%,#A8D34E),color-stop(100%,#6AAD2D));background: -webkit-linear-gradient(top,#A8D34E 0,#6AAD2D 100%);background: -moz-linear-gradient(top,#A8D34E 0,#6AAD2D 100%);background: -o-linear-gradient(top,#A8D34E 0,#6AAD2D 100%);background: -ms-linear-gradient(top,#A8D34E 0,#6AAD2D 100%);background: linear-gradient(top,#A8D34E 0,#6AAD2D 100%);} a.button.green:hover{ background: -webkit-gradient(linear,50% 0,50% 100%,color-stop(0%,#B2D862),color-stop(100%,#76C132));background: -webkit-linear-gradient(top,#B2D862 0,#76C132 100%);background: -moz-linear-gradient(top,#B2D862 0,#76C132 100%);background: -o-linear-gradient(top,#B2D862 0,#76C132 100%);background: -ms-linear-gradient(top,#B2D862 0,#76C132 100%);background: linear-gradient(top,#B2D862 0,#76C132 100%);} a.button.blue{ border: 1px solid #1e638b;background: #00a2ff;background: -webkit-gradient(linear,50% 0,50% 100%,color-stop(0%,#00a2ff),color-stop(100%,#028edf));background: -webkit-linear-gradient(top,#00a2ff 0,#028edf 100%);background: -moz-linear-gradient(top,#00a2ff 0,#028edf 100%);background: -o-linear-gradient(top,#00a2ff 0,#028edf 100%);background: -ms-linear-gradient(top,#00a2ff 0,#028edf 100%);background: linear-gradient(top,#00a2ff 0,#028edf 100%);} a.button.blue:hover{ background: -webkit-gradient(linear,50% 0,50% 100%,color-stop(0%,#3cb6fc),color-stop(100%,#31a6ea));background: -webkit-linear-gradient(top,#3cb6fc 0,#31a6ea 100%);background: -moz-linear-gradient(top,#3cb6fc 0,#31a6ea 100%);background: -o-linear-gradient(top,#3cb6fc 0,#31a6ea 100%);background: -ms-linear-gradient(top,#3cb6fc 0,#31a6ea 100%);background: linear-gradient(top,#3cb6fc 0,#31a6ea 100%);} a.button.orange{ border: 1px solid #be8a2b;background: #FFA500 ;background: -webkit-gradient(linear,50% 0,50% 100%,color-stop(0%,#FFA500),color-stop(100%,#ed9900));background: -webkit-linear-gradient(top,#FFA500 0,#ed9900 100%);background: -moz-linear-gradient(top,#FFA500 0,#ed9900 100%);background: -o-linear-gradient(top,#FFA500 0,#ed9900 100%);background: -ms-linear-gradient(top,#FFA500 0,#ed9900 100%);background: linear-gradient(top,#FFA500 0,#ed9900 100%);} a.button.orange:hover{ background: -webkit-gradient(linear,50% 0,50% 100%,color-stop(0%,#ffb93a),color-stop(100%,#f3ab26));background: -webkit-linear-gradient(top,#ffb93a 0,#f3ab26 100%);background: -moz-linear-gradient(top,#ffb93a 0,#f3ab26 100%);background: -o-linear-gradient(top,#ffb93a 0,#f3ab26 100%);background: -ms-linear-gradient(top,#ffb93a 0,#f3ab26 100%);background: linear-gradient(top,#ffb93a0,#f3ab26 100%);} a.button.pink{ border: 1px solid #cc198b;background: #ff00a2;background: -webkit-gradient(linear,50% 0,50% 100%,color-stop(0%,#ff00a2),color-stop(100%,#ed0097));background: -webkit-linear-gradient(top,#ff00a2 0,#ed0097 100%);background: -moz-linear-gradient(top,#ff00a2 0,#ed0097 100%);background: -o-linear-gradient(top,#ff00a2 0,#ed0097 100%);background: -ms-linear-gradient(top,#ff00a2 0,#ed0097 100%);	background: linear-gradient(top,#ff00a2 0,#ed0097 100%);} a.button.pink:hover{ background: -webkit-gradient(linear,50% 0,50% 100%,color-stop(0%,#ff6cc9),color-stop(100%,#ea51b2));background: -webkit-linear-gradient(top,#ff6cc9 0,#ea51b2 100%);background: -moz-linear-gradient(top,#ff6cc9 0,#ea51b2 100%);background: -o-linear-gradient(top,#ff6cc9 0,#ea51b2 100%);background: -ms-linear-gradient(top,#ff6cc9 0,#ea51b2 100%);background: linear-gradient(top,#ff6cc9,#ea51b2 100%);	} a.button.purple{ border: 1px solid #833083;background: #d700d7;background: -webkit-gradient(linear,50% 0,50% 100%,color-stop(0%,#d700d7),color-stop(100%,#b000b0));background: -webkit-linear-gradient(top,#d700d7 0,#b000b0 100%);background: -moz-linear-gradient(top,#d700d7 0,#b000b0 100%);background: -o-linear-gradient(top,#d700d7 0,#b000b0 100%);background: -ms-linear-gradient(top,#d700d7 0,#b000b0 100%);	background: linear-gradient(top,#d700d7 0,#b000b0 100%);} a.button.purple:hover{background: -webkit-gradient(linear,50% 0,50% 100%,color-stop(0%,#f969f9),color-stop(100%,#c302c3));background: -webkit-linear-gradient(top,#f969f9 0,#c302c3 100%);background: -moz-linear-gradient(top,#f969f9 0,#c302c3 100%);	background: -o-linear-gradient(top,#f969f9 0,#c302c3 100%);	background: -ms-linear-gradient(top,#f969f9 0,#c302c3 100%);background: linear-gradient(top,#f969f9,#c302c3 100%);} a.button.black{ border: 1px solid #000;background: #434343;background: -webkit-gradient(linear,50% 0,50% 100%,color-stop(0%,#434343),color-stop(100%,#232323));background: -webkit-linear-gradient(top,#434343 0,#232323 100%);background: -moz-linear-gradient(top,#434343 0,#232323 100%);background: -o-linear-gradient(top,#434343 0,#232323 100%);background: -ms-linear-gradient(top,#434343 0,#232323 100%);background: linear-gradient(top,#434343 0,#232323 100%);} a.button.black:hover{ background: -webkit-gradient(linear,50% 0,50% 100%,color-stop(0%,#5a5959),color-stop(100%,#3d3d3d));background: -webkit-linear-gradient(top,#5a5959 0,#3d3d3d 100%);background: -moz-linear-gradient(top,#5a5959 0,#3d3d3d 100%);background: -o-linear-gradient(top,#5a5959 0,#3d3d3d 100%);background: -ms-linear-gradient(top,#5a5959 0,#3d3d3d 100%);background: linear-gradient(top,#5a5959,#3d3d3d 100%);} a.button.white{ border: 1px solid #d9d9d9;background: #fbfbfb;background: -webkit-gradient(linear,50% 0,50% 100%,color-stop(0%,#fbfbfb),color-stop(100%,#eee ));background: -webkit-linear-gradient(top,#fbfbfb 0,#eee 100%);background: -moz-linear-gradient(top,#fbfbfb 0,#eee 100%);	background: -o-linear-gradient(top,#fbfbfb 0,#eee 100%);background: -ms-linear-gradient(top,#fbfbfb 0,#eee 100%);background: linear-gradient(top,#fbfbfb 0,#eee 100%);box-shadow: 0 1px 2px rgba(0, 0, 0, 0.3),inset 0 1px 0 rgba(255, 255, 255, 0.5);color:#000;text-shadow: 0 1px 0 #FFF;} a.button.white:hover{ background: -webkit-gradient(linear,50% 0,50% 100%,color-stop(0%,#FFF),color-stop(100%,#f8f8f8));	background: -webkit-linear-gradient(top,#FFF 0,#f8f8f8 100%);background: -moz-linear-gradient(top,#FFF 0,#f8f8f8 100%);background: -o-linear-gradient(top,#FFF 0,#f8f8f8 100%);background: -ms-linear-gradient(top,#FFF 0,#f8f8f8 100%);background: linear-gradient(top,#FFF ,#f8f8f8 100%);} a.button.medium{ height:35px; line-height:35px; font-size:16px; padding:0 15px;} a.button.big{ height:55px; line-height:55px; font-size:22px; padding:0 25px;}

样式是可以自己改的,这里只做一个举例;

wordpress-shortcode

其实短代码用途不限于快速添加下载按钮,你也可以通过它快速添加其他样式,比如警告、提示信息框等等,原理和上述教程是一致的。