使用WordPress时间长了，就跟所有其他博客站长一样，但凡遇到问题，第一想到的就是访问WordPress Codex。确实，这里是WordPress官方文档库——我认为是个“宝库”啊！不是吗？只要你具备一定的英文基础，几乎所有的WP问题都可以在这里寻求得到答案，就如我之前在学习使用WordPress简码一样，作为新手，刚开始时简直是闻所未闻的啊，但是后来我常常访问WP文档，发现使用简码相当容易，又方便，就像使用一款纯绿色软件一样，无需更改系统文件，在WordPress功能扩展方面竟然可以替换许多插件。本文今天要给大家推荐的技巧都是简码相关的，非常实用，平时在许多博客中所见到的各种应用效果，你可能想像不到：它们竟然就是应用了简码的结果！
简码，就像WordPress其它附加功能一样，也可以在functions.php文件中创建，而且也非常的方便，不用修改系统文件；当然，你也可以在插件中创建简码——如果你熟悉自己所使用的插件的话！下面的简码例子每一个都可以添加一些自己的CSS样式，扩展性很强。
1.利用简码给文本添加额外的CSS样式：
function extra_style_shortcode( $atts, $content = null ) {
return '<span style="color: blue; text-decoration: underline;">' . $content . '</span>';
}
add_shortcode('extra-style', 'extra_style_shortcode');
使用方法如下：
[extra-style]Hello World![/extra-style]
输出结果如下:
Hello World!
2.给简码添加自定义功能：
function extra_style_shortcode( $atts, $content = null ) {
extract(shortcode_atts(array(
"color" => 'blue',
), $atts));
return '<span style="color: ' . $color . '; text-decoration: underline;">' . $content . '</span>';
}
add_shortcode('extra-style', 'extra_style_shortcode');
使用方法如下:
[extra-style color=red]Hello World![/extra-style]
输出结果如下:
Hello World!
或者:
[extra-style color=yellow]Hello World![/extra-style]
输出结果如下:
Hello World!.
此例中添加了如下的一段函数:
extract(shortcode_atts(array( "color" => 'blue', ), $atts));
此函数定义了一个默认颜色“blue”，意思就是，如果你直接使用简码[extra-style]，文本的颜色就是“blue”；如果你自定义了颜色，文本就会显示自定义的颜色。
我们再来给简码多加上几个默认的参数：
function extra_style_shortcode( $atts, $content = null ) { extract(shortcode_atts(array(
"color" => 'blue',
"size" => '14px',
"padding" => '0px',
), $atts));
return '<span style="color: ' . $color . ';
padding: ' . $padding . ';
font-size: ' . $size . ';
text-decoration: underline;">' . $content . '</span>';
}
add_shortcode('extra-style', 'extra_style_shortcode');
这样，我们就可以使用自定义简码，如下:
[extra-style color=purple size=18px padding=5px]Hello World![/extra-style]
输出结果如下:
Elementum odio? Sed, Hello World! proin pulvinar eros nascetur, massa urna aliquam turpis elit, adipiscing mauris montes ac, vel lacus placerat in adipiscing ridiculus rhoncus.
3.利用简码插入一个消息盒子
这条简码会在文章中（通常是在顶部）插入一条带边框和背景颜色的消息，可以吸引读者的注意。
function box_shortcode( $atts, $content = null )
{
extract( shortcode_atts( array(
'color' => 'yellow',
'size' => 'medium',
), $atts ) ); return '
<style type="text/css">
.shortcode_box {
padding: 2px 4px;
border: 1px solid #ccc;
}
.yellow {
background: #ffd149;
color: #666;
}
.blue {
background: #a0c5ef;
color: #333;
}
.gray {
background: #f0f0f0;
color: #333;
}
</style> <div class="shortcode_box ' . $size . ' ' . $color . '">' . $content . '</div>'; }
add_shortcode('box', 'box_shortcode');
应用简码[box]This is a message box with important information you should read.[/box]所得结果如下：
我们也可以自定义使用这条简码，在简码中加上color=blue或color=gray，输出结果会得到:
在上面的function代码中多加上一些其他的CSS样式，我们就可以自由控制这个消息盒子的外观了，不过，这就留给你自己来实践了。
4.创建一个”Download”按钮
创建一个“Download”按钮就跟创建一个消息盒子一样简单，只要将“download”放入一对<div>标签中，然后加入一些特殊的CSS3代码就可以了。
function button_shortcode( $atts, $content = null )
{
extract( shortcode_atts( array(
'color' => 'blue',
'size' => 'medium',
), $atts ) ); return '
<style type="text/css">
.shortcode_button {
padding: 2px 8px;
border: 1px solid #ccc;
border-radius: 10px;
-webkit-border-radius: 10px;
-moz-border-radius: 10px;
}
.black {
background: #ffd149;
background: -webkit-gradient(linear, 0% 0%, 0% 100%, from(#636363), to(#332F2F));
background: -moz-linear-gradient(19% 75% 90deg,#332F2F, #636363);
color: #f0f0f0;
border-top-color: #1c1c1c;
border-left-color: #1c1c1c;
border-right-color: #525252;
border-bottom-color: #525252;
}
.blue {
background: #a0c5ef;
background: -webkit-gradient(linear, 0% 0%, 0% 100%, from(#508BC7), to(#203F75));
background: -moz-linear-gradient(19% 75% 90deg,#203F75, #508BC7);
color: #f0f0f0;
border-top-color: #023778;
border-left-color: #023778;
border-right-color: #26609e;
border-bottom-color: #26609e;
} .large {
width: 200px;
}
.medium {
width: 120px;
}
.small {
width: 80px;
}
</style> <div class="shortcode_button ' . $size . ' ' . $color . '">' . $content . '</div>'; }
add_shortcode('button', 'button_shortcode');
我们可以这样使用简码:
[button color=black size=medium]<a href="#">Download</a>[/button]
返回的结果是这样的:
如果你要自定义“download”的大小和颜色，自己添加吧！
5.盒子和按钮结合在一起
WordPress简码的妙用之一就是能够让我们将两种形式的简码结合在一起使用，将上面第3步, 第4步的function代码都添加到functions.php文件中，得出效果如下图:
上图的效果是因为应用了下面的简码所致:
[box color=blue]Porta ultricies. Amet odio amet, pellentesque elementum adipiscing sagittis enim, eu, proin placerat sed pid cum? Dictumst turpis integer. Adipiscing, porttitor scelerisque! Lorem turpis porttitor. Integer in, odio mattis ac! Nascetur augue odio in risus, arcu nunc, phasellus ultrices lectus velit, et tincidunt tristique. Integer vel pulvinar purus magnis. [button color=black size=small]<a href="#">Download[/button][/box]
需要注意一下的是，WordPress默认并不允许我们将简码嵌套使用，但是我们仍然能够让它支持这种嵌套式的简码用法，在functions.php文件中加上下面这一句:
add_filter('the_content', 'do_shortcode');
这样，WordPress就允许我们嵌套使用简码了。
6.使用简码调用WordPress相关文章
这个方法我在另一个博客中作过介绍：
function related_posts_shortcode( $atts ) {
extract(shortcode_atts(array(
'limit' => '5',
), $atts)); global $wpdb, $post, $table_prefix; if ($post->ID) {
$retval = '<ul>';
// Get tags
$tags = wp_get_post_tags($post->ID);
$tagsarray = array();
foreach ($tags as $tag) {
$tagsarray[] = $tag->term_id;
}
$tagslist = implode(',', $tagsarray); // Do the query
$q = "SELECT p.*, count(tr.object_id) as count
FROM $wpdb->term_taxonomy AS tt, $wpdb->term_relationships AS tr, $wpdb->posts AS p WHERE tt.taxonomy ='post_tag' AND tt.term_taxonomy_id = tr.term_taxonomy_id AND tr.object_id = p.ID AND tt.term_id IN ($tagslist) AND p.ID != $post->ID
AND p.post_status = 'publish'
AND p.post_date_gmt < NOW()
GROUP BY tr.object_id
ORDER BY count DESC, p.post_date_gmt DESC
LIMIT $limit;"; $related = $wpdb->get_results($q);
if ( $related ) {
foreach($related as $r) {
$retval .= '
<li><a title="'.wptexturize($r->post_title).'" href="'.get_permalink($r->ID).'">'.wptexturize($r->post_title).'</a></li>
';
}
} else {
$retval .= '
<li>No related posts found</li>
';
}
$retval .= '</ul>
';
return $retval;
}
return;
}
add_shortcode('related_posts', 'related_posts_shortcode');
使用方法:
[<!-- related_posts -->]
将这条简码(使用时记得去掉其中的注释)插入到文章中任何地方都可以，非常灵活。
推荐阅读：如何将Google PDF阅读器添加到WordPress
7.首字符下沉的简码应用
rop caps(首字符下沉)应用在文本中给读者的感觉相当美妙，它的实际作用还是你自己亲自来感受一下吧，下面是它的function代码。
function dropcap($atts, $content = null) {
return '
<div class="dropcap">'.$content.'</div>
;';
}
add_shortcode('dropcap', 'dropcap');
CSS样式代码:
.dropcap {
display:block;
float:left;
font-size:50px;
line-height:40px;
margin:0 5px 0 0;
}
使用方法:
[dropcap]M[/dropcap]auris ut lectus erat. In ...
8.简码应用之自定义文章类型查询
假如你已经设置了一个格式为“News”的文章类型，在而你又想将这一类型的文章归入到一个叫“Articles”的页面中，那么可以使用下面的简码：
function news_shortcode()
{
//The Query
query_posts('post_type=news');
//The Loop
if ( have_posts() ) : while ( have_posts() ) : the_post();
echo '<h3><a href="'; echo the_permalink(); echo '">'; echo the_title(); echo '</a></h3>';
echo the_excerpt();
endwhile; else:
endif; //Reset Query
wp_reset_query();
}
add_shortcode('news', 'news_shortcode');
调用方法如下:
[news]
9.简码调用某分类目录下的文章
要从某个分类中调用一定数量的文章，我们可以使用下面的简码:
function category_shortcode( $atts )
{
extract(shortcode_atts(array(
'limit' => '5',
'category' => '',
), $atts));
//The Query
query_posts('category=' . $id . 'posts_per_page=' . $limit);
//The Loop
if ( have_posts() ) : while ( have_posts() ) : the_post();
echo '<h3><a href="';
echo the_permalink();
echo '">';
echo the_title();
echo '</a></h3>';
echo the_excerpt();
endwhile; else:
endif; //Reset Query
wp_reset_query();
}
add_shortcode('category', 'category_shortcode');
简码调用方法:
[category id=# limit=5]
将#替换为你的文章分类ID号即可。
10.一些补充
上面已经举出了9个WordPress简码应用的例子，下面是一些相关的信息，大家可以参考一下：
利用简码快速插入 “ReTweet” 或“TweetMeme” 按钮到博客文章中，你可以到这里查看wprecipes.com中的详细教程
名博客Justin Tadlock 制作了一个简码插件，能够将WordPress所有模板标签转换成一个简码，你可以在编辑器中随意调用，下载此插件。
另外一款简码应用插件:WP Utility Shortcodes，允许你在文章当中插入任何的消息盒子以及其他网页按钮。