WordPress Shortcode（简码）介绍及如何使用详解

风景优美的黄山景区，一年四季游人如织。蜀僧抱绿绮，西下峨眉峰。为我一挥手，如听万壑松。客心洗流水，馀响入霜钟。不觉碧山暮，秋云暗几重。

WordPress 从 2.5 版本开始增加了一个类似 BBCode 标签的 Shortcode API，可以使用它在日志的内容中来给日志内容添加各种功能。Shortcode 这个接口非常容易使用，并且功能非常强大。

简单说 WordPress Shortcode 指的是一些使用[]包含的短代码，WordPress会识别这些短代码并根据短代码的定义输出为特定的内容。

Shortcode 类型

Shortcode API 支持几乎所有可能的组合形式：自关闭标签，开放标签，含有参数的标签等。

[mycode]
[mycode foo="bar" id="123" color="red" something="data"]
[mycode]Some Content[/mycode]
[mycode]<p><a href="http://example.com/">HTML Content</a<>/p>[/mycode]
[mycode]Content [another-shotcode] more content[/mycode]
[mycode foo="bar" id="123"]Some Content[/mycode]

[mycode] [mycode foo="bar" id="123" color="red" something="data"] [mycode]Some Content[/mycode] [mycode]<p><a rel="nofollow noopener noreferrer" href="http://example.com/">HTML Content</a<>/p>[/mycode] [mycode]Content [another-shotcode] more content[/mycode] [mycode foo="bar" id="123"]Some Content[/mycode]

Shortcode 基本概念

首先你要去定义一个函数，来处理你定义的 Shortcode，和它的属性参数以及引用的内容。

function my_shortcode_func($attr, $content) {
    // $attr $key=>$value 的数组
    // $content 是 shortcode 中包含的字符串
    // 对 $attr 和 $content 进行处理
    // 返回预期的值
}

function my_shortcode_func($attr, $content) { // $attr $key=>$value 的数组 // $content 是 shortcode 中包含的字符串 // 对 $attr 和 $content 进行处理 // 返回预期的值 }

然后把自己定义的 Shortcode 和其处理函数管理起来，以便 [mycode attr="value"]content[/mycode] 能够按照预期执行。

1	add_shortcode('mycode', 'my_shortcode_func')

add_shortcode('mycode', 'my_shortcode_func')

Shortcode 相关的所有函数

WordPress 定义了以下和 Shortcode 相关的函数：

add_shortcode('mycode', 'function_name'); // 定义一个新的 Shortcode
remove_shortcode('mycode'); // 移除一个 Shortcode
remove_all_shortcodes(); // 移除所有的 Shortcode
$return = do_shortcode($content); // 应用 Shortcode 到内容而不输出

add_shortcode('mycode', 'function_name'); // 定义一个新的 Shortcode remove_shortcode('mycode'); // 移除一个 Shortcode remove_all_shortcodes(); // 移除所有的 Shortcode $return = do_shortcode($content); // 应用 Shortcode 到内容而不输出

一个简单的 Shortcode 例子

以我爱水煮鱼写的 Antispambot ShortCode 插件为例，内容就是邮箱地址，有个参数 $link 为 1 时候，把邮箱显示可点击，参数如下：

function antispambot_shortcode_handler($atts, $content='') {
	extract( shortcode_atts( array(
		'link' => '0'
	), $atts ) );

	if($link){
		return '<a rel="nofollow noopener noreferrer" href="mailto:'.antispambot($content,1).'" title="mail to '.antispambot($content,0).'">'.antispambot($content,0).'</a>';
	}else{
		return antispambot( $content,0);
	}
}
add_shortcode('email', 'antispambot_shortcode_handler');

使用 Shortcode 投放 Google Adsense 广告

把下面的代码保存到你当前的主题的 functions.php，或者上传到插件目录下并激活。

<?php
/*
Plugin Name: Shorcode for Google Adsense
Plugin URI:  http://blog.wpjam.com/m/shortcode-google-adsense/
Description: 使用 Shortcode 投放 Google Adsense 广告
Version: 0.1
Author: Denis
*/
add_shortcode('adsense', 'adsense_shortcode');
function adsense_shortcode($atts) {
	extract(shortcode_atts(array(
	'type' => '468x60',
	), $atts));
	switch ($type) {
		case '468x60' :
		return 
			//468x60 的广告代码
		case '300x250' :
		return 
			//300x250 的广告代码
	}
}

<?php /* Plugin Name: Shorcode for Google Adsense Plugin URI: http://blog.wpjam.com/m/shortcode-google-adsense/ Description: 使用 Shortcode 投放 Google Adsense 广告 Version: 0.1 Author: Denis */ add_shortcode('adsense', 'adsense_shortcode'); function adsense_shortcode($atts) { extract(shortcode_atts(array( 'type' => '468x60', ), $atts)); switch ($type) { case '468x60' : return //468x60 的广告代码 case '300x250' : return //300x250 的广告代码 } }

然后你就可以通过撰写文章的时候，在相应的位置输入 [adsense] 你的 468×60 的广告代码（默认的广告代码），如果你想插入 300×250 的广告代码，在文章内容中插入 [adsense type="300x250"]，当然你也可以扩展上面的代码增加更多广告的格式和类型。

这样就可以想把广告插在文章中的哪个位置，就能插在哪个位置了，非常方便。

在侧边栏 Widgets 中使用 Shortcode

Shortcode 很方便，但是只能用在日志内容中，那么如何在 WordPress 的侧边栏的 Widgets 中使用 Shortcode，在当前主题的 functions.php 中添加如下代码：

1	add_filter('widget_text', 'do_shortcode');

add_filter('widget_text', 'do_shortcode');

然后你在 WordPress 后台 > 外观 > Widgets 界面添加一个文本 Widget，然后插入博客中经启用 shortcode 即可。

在主题的文件中使用 Shortcode

如果你想用在主题文件中使用名为 [my_shortcode] 的 Shortcode，你只需要按照下面的方式使用do_shortcode() 函数即可：

1	<?php echo do_shortcode("[my_shortcode]"); ?>

<?php echo do_shortcode("[my_shortcode]"); ?>

解决 Shortcode 中自动添加的 br 或者 p 标签

我们在使用 WordPress Shortcode API 开发插件的时候，有个比较麻烦的问题，就是 WordPress 会自动在 shortcode 内添加 br 或者 p 标签，这样可能会打乱你的原先预想的 HTML 结构和布局。

造成这个问题的原因是 WordPress 默认的日志内容处理流程中，wpautop（将回车转换成 p 或者 br 标签的函数）是在 Shortcode 前面运行的。所以我们的解决方案也是非常简单，改变它们执行的顺序，在当前主题的 functions.php 文件中添加：

1 2	remove_filter( 'the_content', 'wpautop' ); add_filter( 'the_content', 'wpautop' , 12);

remove_filter( 'the_content', 'wpautop' ); add_filter( 'the_content', 'wpautop' , 12);

这样调整顺序之后，你的 shortcode 里面的内容，就不会有自动添加的 p 或者 br 标签，但是如果 shortcode 中部分的内容你又需要一些 p 或者 br 标签用来换行的话，你需要自己手动在自己 shortcode 处理程序中添加 wpautop 来处理了。

function bio_shortcode($atts, $content = null) {
   $content = wpautop(trim($content));
   return '<div class="bio">' . $content . '</div>';
}
add_shortcode('bio', 'bio_shortcode');

function bio_shortcode($atts, $content = null) { $content = wpautop(trim($content)); return '<div class="bio">' . $content . '</div>'; } add_shortcode('bio', 'bio_shortcode');

以上就是WordPress Shortcode（简码）介绍及如何使用详解。明天的但愿，让我们忘了今天的痛苦。更多关于WordPress Shortcode（简码）介绍及如何使用详解请关注haodaima.com其它相关文章！

全站频道

大家都在搜索：