详解为WordPress后台编辑文章添加shortcode短代码功能技巧

话说 wordpress 的文章编辑功能，对于经常折腾的童鞋来说，实在有点蛋疼，可视化界面显得有点中规中矩，文本模式又不够强大，幸好 wordprees 为我们提供了强大扩展功能。
下面我们就来说说 wordpress 文本模式下，添加短代码功能来方便编辑和美化自己的文章。

我们知道网站文章内容的美化，是通过 css、html 等语言代码来实现的，为了避免重复的写代码，于是 wordpress 提供了短代码功能，也就是用简短的代码格式来代替繁杂的书写。

例 1：

<strong>需要加粗的文字</strong> //例如 wordpress 自带的<strong>标签

效果：
需要加粗的文字

例 2：

[Downlink href="文件 URL"]文件名字[/Downlink] //如自定义的[Downlink]标签

效果：
[Downlink href="www.btbat.com"]下载按钮[/Downlink]

以 Downlink 标签为例：

1：在主题的 functions.php 文件中添加函数

				
function downlink($atts,$content=null){
extract(shortcode_atts(array("href"=>'http://'),$atts));
return '<div class="but_down"><a href="'.$href.'" target="_blank" rel="nofollow"><span>'.$content.'</span></a><div class="clear"></div></div>';
				}
add_shortcode('Downlink', 'downlink');

2：建立个 JS 文件然后再后台引入：

<script type="text/javascript">
QTags.addButton( 'deve08', '下载按钮', '[Downlink href="文件 URL"]文件名字[/Downlink]');
</script>

3：在 CSS 中添加以下代码

.but_down { margin:0 0 12px 0; font-size:16px; font-family: Microsoft YaHei;}
.but_down a{float:left;display:block;background:url(images/1416063.gif) #FF6100 no-repeat 7px center; padding-left:40px;border:none; border-left:8px solid #CC4D00; height:44px;color:#567a82;text-decoration:none;}
.but_down a span{float:left;display:block; color:#fff; padding:0 15px;line-height:44px;cursor:pointer;}
.but_down a:hover{border-radius:0px;-webkit-border-radius:0px;-moz-border-radius:0px;-khtml-border-radius:0px; border-left:8px solid #DB5200;}

说明：由上可见添加短代码需要三个步骤
1、添加函数 2、引入 JS 3、添加 CSS 样式

其实从函数中我们可以看到，即 Downlink 标签的完整代码，其实，我们也可以省略定义函数。直接在 JS 中使用代码。

QTags.addButton( 'deve08', '下载按钮', '<div class="but_down"><a href="下载连接" target="_blank" rel="nofollow"><span>下载地址</span></a><div class="clear"></div></div>');

也就是返回完整代码，虽然有点多，只要你能看懂就行，省去了定义函数的繁琐步骤。

我们也可以定义一个独立的 shortcode.php 文件，在 functions.php 文件中引入即可。

shortcode.php 文件内容：

<?php
/*绿色按钮*/
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' );
				
add_action( 'admin_print_footer_scripts', 'Deve_shortcode_buttons', 100 );
function Deve_shortcode_buttons() {
	?>
	<script type="text/javascript">  //JS 代码
		QTags.addButton( 'gb', '绿色按钮', '[gb href="按钮连接"]绿色按钮[/gb]');  //利用函数实现
		QTags.addButton( 'textbox11', 'love', '\n<div class="shortbox boxlove">请在此输入内容</div>\n');  //直接调用 css 样式
		QTags.addButton( 'sub1', '分隔符', '\n<hr />\n' );  //调用 html 样式
	</script>
	<?php }

?>

css 样式：

/*!按钮样式 */
.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:0;background:0;background:0;background:0;background:0;background:linear-gradient(tobottom,#77b55a5%,#72b352100%);filter:progid:DXImageTransform.Microsoft.gradient(startColorstr='#77b55a',endColorstr='#72b352',GradientType=0);background-color:#77b55a;-moz-border-radius: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:700;padding:6px 12px;text-decoration:none;text-shadow:0 1px 0 #5b8a3c;}
.greenbtn:hover{background:0;background:0;background:0;background:0;background:0;background:linear-gradient(tobottom,#72b3525%,#77b55a100%);filter:progid:DXImageTransform.Microsoft.gradient(startColorstr='#72b352',endColorstr='#77b55a',GradientType=0);background-color:#72b352;}
.greenbtn:active{position:relative;top:1px;}

/*提醒框*/.shortbox{margin:10px 0;padding:15px 15px 15px 70px;}
.boxlove{border:1px solid #EBA8A8;background:url(images/shortcode/love.png) no-repeat scroll 20px center #FADCD8;color:#C66;}

效果如下：
[gb href="按钮连接"]绿色按钮[/gb]

分隔符