您现在的位置是:首页 > cms教程 > WordPress教程WordPress教程
WordPress Shortcode使用方法详细介绍
胡睿2025-03-19WordPress教程已有人查阅
导读WordPress从2.5版本开始增加了一个类似BBCode标签的Shortcode API,可以使用它在日志的内容中来给日志内容添加各种功能。Shortcode这个接口非常容易使用,并且功能非常强大。
WordPress从2.5版本开始增加了一个类似BBCode标签的Shortcode API,可以使用它在日志的内容中来给日志内容添加各种功能。Shortcode这个接口非常容易使用,并且功能非常强大。
简单说 WordPress Shortcode指的是一些使用[]包含的短代码,WordPress会识别这些短代码并根据短代码的定义输出为特定的内容。Shortcode 类型
Shortcode API支持几乎所有可能的组合形式:自关闭标签,开放标签,含有参数的标签等。
首先你要去定义一个函数,来处理你定义的 Shortcode,和它的属性参数以及引用的内容。
WordPress 定义了以下和 Shortcode 相关的函数:
以我爱水煮鱼写的 Antispambot ShortCode 插件为例,内容就是邮箱地址,有个参数 $link 为 1 时候,把邮箱显示可点击,参数如下:
把下面的代码保存到你当前的主题的 functions.php,或者上传到插件目录下并激活。
这样就可以想把广告插在文章中的哪个位置,就能插在哪个位置了, 非常方便。在侧边栏 Widgets 中使用 Shortcode
Shortcode 很方便,但是只能用在日志内容中,那么如何在 WordPress 的侧边栏的 Widgets 中使用 Shortcode,在当前主题的 functions.php 中添加如下代码:
如果你想用在主题文件中使用名为 [my_shortcode] 的 Shortcode,你只需要按照下面的方式使用do_shortcode() 函数即可:
我们在使用 WordPress Shortcode API 开发插件的时候,有个比较麻烦的问题,就是 WordPress 会自动在 shortcode 内添加 br 或者 p 标签,这样可能会打乱你的原先预想的 HTML 结构和布局。
造成这个问题的原因是 WordPress 默认的日志内容处理流程中,wpautop(将回车转换成 p 或者 br 标签的函数)是在 Shortcode 前面运行的。所以我们的解决方案也是非常简单,改变它们执行的顺序,在当前主题的 functions.php 文件中添加:
简单说 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]
Shortcode 基本概念首先你要去定义一个函数,来处理你定义的 Shortcode,和它的属性参数以及引用的内容。
function my_shortcode_func($attr, $content) {
// $attr $key=>$value 的数组
// $content 是 shortcode 中包含的字符串
// 对 $attr 和 $content 进行处理
// 返回预期的值
}
然后把自己定义的 Shortcode 和其处理函数管理起来,以便 [mycode attr="value"]content[/mycode] 能够按照预期执行。
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 到内容而不输出
一个简单的 Shortcode 例子以我爱水煮鱼写的 Antispambot ShortCode 插件为例,内容就是邮箱地址,有个参数 $link 为 1 时候,把邮箱显示可点击,参数如下:
function antispambot_shortcode_handler($atts, $content='') {
extract( shortcode_atts( array(
'link' => '0'
), $atts ) );
if($link){
return '<a 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 的广告代码
}
}
然后你就可以通过撰写文章的时候,在相应的位置输入 [adsense] 你的 468×60 的广告代码(默认的广告代码),如果你想插入 300×250 的广告代码,在文章内容中插入 [adsense type="300x250"],当然你也可以扩展上面的代码增加更多广告的格式和类型。这样就可以想把广告插在文章中的哪个位置,就能插在哪个位置了, 非常方便。在侧边栏 Widgets 中使用 Shortcode
Shortcode 很方便,但是只能用在日志内容中,那么如何在 WordPress 的侧边栏的 Widgets 中使用 Shortcode,在当前主题的 functions.php 中添加如下代码:
add_filter('widget_text', 'do_shortcode');
然后你在 WordPress 后台 > 外观 > Widgets 界面添加一个文本 Widget,然后插入博客中经启用 shortcode 即可。在主题的文件中使用 Shortcode如果你想用在主题文件中使用名为 [my_shortcode] 的 Shortcode,你只需要按照下面的方式使用do_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 文件中添加:
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');
本文标签:
很赞哦! ()
相关教程
- (响应式)wordpress模板VieuV4.5主题资讯自媒体博客源码
- (响应式)WordPress主题Ripro9.0博客免扩展二开版
- (自适应多语言)WordPress开源主题MirageV资讯个人博客源码
- (自适应)WordPress主题SEO自媒体博客资讯模板RabbitV2.0
- WordPress主题模板JustNews资讯博客类源码V5.2.2
- (自适应)WordPress二次元博客主题Sakurairo
- 响应式WordPress简约博客主题Alt_Blog
- Wordpress博客新闻主题在线商店平台betheme 21.5.6版
- WordPress个人博客主题 - wp-Concise-v1.0免费下载
- WordPress主题模板主题巴巴/博客X主题源码免费下载
- MYcat实现wordpress库和shopxo库分库
- wordpress、Discuz产品部署示例
图文教程
WordPress后台功能菜单介绍与操作说明
网站都有个后台管理系统,通过网站后台,你可以改变你的网站外观,管理你网站的数据,给网站前台增加页面,文章,视频,图片或者其他功能。
wordpress安装使用方法教学
下载新版的 WordPress (这里演示为WordPress 3.5 官方中文版),解压后,将WordPress文件夹里面的所有文件,上传到你的主机空间域名所绑定的根目录。
wordpress上传主题的方法和注意事项
如何上传wordpress主题在wp中上传主题(压缩包格式)首先登陆在地址栏输入wordpress的登陆网址,到wordpress登陆面板输入你的用户名和密码
wordpress工作原理介绍
WP初始化的过程:当你输入<yourlink>/wordpress对wordpress进行初始化时,wordpress默认会找根目录下的index.php页面,看一下index.php页面。
相关源码
-
(自适应)重工工业机械挖掘机机推土机网站源码下载基于PbootCMS内核开发的专业级重工机械企业网站模板,适用于挖掘机、推土机等重型工业设备展示。采用响应式设计技术,确保在各类设备上均能呈现专业视觉效果,帮助企业建立数字化展示窗口。查看源码 -
(自适应)个人图集图片相册画册pbootcms网站模板源码本模板基于PbootCMS系统开发,为图片展示类网站设计,特别适合个人作品集、摄影画册、艺术图集等内容展示。采用响应式布局技术,确保各类图片在不同设备上查看源码 -
pbootcms模板(PC+WAP)传媒广告影视公司网站源码基于PbootCMS内核开发的全自适应传媒文化网站模板,为影视公司、广告传媒企业打造,同时支持多行业快速适配。通过替换文字图片即可转换为其他行业网站查看源码 -
响应式HTML5家居建材办公家具桌椅pbootcms模板为家居建材、办公家具企业打造的响应式网站模板,同时支持多行业快速适配通过替换文字图片即可转型为其他行业官网,大幅降低开发成本。查看源码 -
(自适应响应式)陶瓷研磨盘抛光机械设备pbootcms网站模板本模板基于PbootCMS系统开发,为研磨抛光设备制造企业设计,特别适合陶瓷研磨盘、抛光设备等表面处理设备展示。采用响应式布局技术,确保各类设备的参数和工艺在不同终端上都能清晰呈现。查看源码 -
(自适应)水墨风中药馆中医名医介绍pbootcms网站模板本模板基于PbootCMS内核开发,为中医馆、中医药企业量身定制,可快速搭建具有传统文化特色的官方网站。自适应手机端设计,数据实时同步,助您高效展示中医特色诊疗、中药产品、养生知识等内容,塑造专业品牌形象。查看源码
| 分享笔记 (共有 篇笔记) |

