上周QQ上和一朋友聊到了WP的话题，他问我：”你那文章里边嵌套的叹号神马的是怎么实现的啊？”我回答说：嘿嘿，这不是我实现的，是主题自带的。又问，那么主题怎么实现的啊？我说那是短代码实现的呃。又问：短代码是怎么实现的啊？于是我怒拔网线。
这里为了给那位以为我撞墙去了的童鞋一个交代，分享一下实现你自己的短代码功能的方法。
首先我们要了解什么是短代码。
我的习惯，抄一个官方解释。
Shortcode Since Version 2.5 WordPress support so called Shortcodes. They have been introduced for creating macros to be use in a posts content. A trivial shortcode for a gallery looks like this:[ gallery]You can also print a shortcode directly in a template like so:<?php echo do_shortcode; ?>Shortcodes can be with additional attributes as the following example shows:[ gallery id="123" size="medium"]Both examples will display an image gallery which would be hard to maintain when writing the HTML markup for it and keeping it in sync with uploaded images."
那么怎么写一个自己的短代码呢？
老师说从Hello World开始！
Follow Me
1.打开主题中的functions.php文件。如不存在此文件，创建一个。
2.定义hello()函数，返回字符串
function hello() {
return 'Hello, World!';
}3.使用add_shortcode()函数将你的hello()函数绑定为短代码，并命名为“hw”
add_shortcode('hw', 'hello');4.收工，测试。在你的文章中直接输入[hw]见证奇迹的出现。
当然，在实际写文章的时候你不会去弄个函数来输出个常量。比如我要实现上面的效果怎么办呢？
然后更改上面的函数：
function hello($atts, $content=null, $code="") {
// 这里content参数便是你要写的文字。
$return = '<div class="hello_short">';
$return .= $content;
$return .= '</div>';
return $return;
}当然还有应该有相应的CSS
.hello_short{margin:20px 0px;padding: 15px 15px 15px 70px; font-size:12px;-moz-box-shadow:0px 1px 2px rgba(0, 0, 0, 0.1); -webkit-box-shadow:0px 1px 2px rgba(0, 0, 0, 0.1); box-shadow:0px 1px 2px rgba(0, 0, 0, 0.1);border-radius:5px;-webkit-border-radius:5px;-moz-border-radius:5px;-khtml-border-radius:5px;}
.hello_short a{}
.hello_short a:hover{}
.hello_short b,.hello_short strong{padding:0px; margin:0px; background: none; font-weight: bold;border-radius:0px;-moz-border-radius:0px;}
.hello_short{background: url(images/shortcode/warning.png) no-repeat 20px 20px #fff0b5;border: 1px solid #eac946;color: #b09e56;}
.hello_short a{ color:#A84A1E;}现在你在文章中输入
[hello]我们的祖国是花园，花园里的花朵真鲜艳[/hello] 就能实现我们的祖国是花园
花园里的花朵真鲜艳这样的效果了。
电视机前的小朋友们，你们学会了吗？
