1. 首页 > CMS系统 > Wordpress

WordPress中的shortcode短代码功能使用详解

WordPress 从 2.5 的版本开始,增加了一个 shortcode (短代码) API ,类似于 BBS 上的 BBCode , shortcode 也可以很方便的为文章或页面增加功能,并且 shortcode 的比起 BBCode 更加灵活和强大。下面 Kayo 为大家介绍一下 shortcode 。

一.shortcode 简介
shortcode 可以让开发者通过以函数的形式创建宏内容来生成内容,或许这个概念看上去有点模糊,但实际上它是一个很简单而实用的功能,只要会编写基本的 PHP 函数,即可使用 shortcode ,下文会以实际的例子来说明 shortcode 的使用方法。

二.shortcode 形式
shortcode 支持封闭标签和自闭(自动封闭)标签,并且支持在标签内使用参数,至于 shortcode 具体是何种形式,这就决定于开发者怎样编写这个 shortcode 了。

?
1
2
3
4
5
[myshortcode]Some Content[/myshortcode] // 封闭标签
[myshortcode] // 自闭标签
[myshortcode id="codetool">

三.shortcode 例子
在使用 shortcode 前,首先必须在主题的 functions.php 文件中定义 shortcode ,例如:

?
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
function myshortcode_function($atts, $content = null){ // $atts 代表了 shortcode 的各个参数,$content 为标签内的内容
 
 extract(shortcode_atts(array( // 使用 extract 函数解析标签内的参数
 "title" => '标题' // 给参数赋默认值,下面直接调用 $ 加上参数名输出参数值
 ), $atts));
 // 返回内容
 return '<div>
    <h3>'. $title .'</h3>
    <p>
     '. $content .'
    </p>
   </div>';
}
 
add_shortcode("msc", "myshortcode_function"); // 注册该 shortcode,以后使用 [msc] 标签调用该 shortcode

把上面的代码添加到 functions.php 中,一个简单的 shortcode 便创建好了,我们可以通过 [msc][/msc]标签调用该 shortcode ,如:

?
1
[msc id="codetool">

在文章或页面内容中输入上面的调用,可以在相应的位置输出一段欢迎语句,在 style.css 中定义相应的 CSS ,即可为短代码赋予样式。

Kayo 简略的介绍了 WordPress 的短代码(shortcode) 功能,主要是介绍了 shortcode 的主要概念和使用方法。在本文中, Kayo 将会更加详细的介绍一下 shortcode 中较为重要的 API ,希望有助于各位开发较为复杂的 shortcode 。

四.函数 add_shortcode

该函数用于注册一个 shortcode ,它有两个参数:短代码名与 shortcode 处理函数名,引用上文的例子:

?
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
function myshortcode_function($atts, $content = null){ // $atts 代表了 shortcode 的各个参数,$content 为标签内的内容
 
 extract(shortcode_atts(array( // 使用 extract 函数解析标签内的参数
 "title" => '标题' // 给参数赋默认值,下面直接调用 $ 加上参数名输出参数值
 ), $atts));
 // 返回内容
 return '<div class="myshortcode">
    <h3>'. $title .'</h3>
    <p>
     '. $content .'
    </p>
   </div>';
}
 
add_shortcode("msc", "myshortcode_function"); // 注册该 shortcode,以后使用 [msc] 标签调用该 shortcode

msc 即为短代码名,以后在写文章或页面时可以直接使用 [msc][/msc] 标签调用该短代码,而 "myshortcode_function" 即为例子中的短代码处理函数的名称。下面重点分析短代码处理函数。

五.短代码处理函数

shortcode 处理函数是一个 shortcode 的核心, shortcode 处理函数类似于 Flickr(WordPress 过滤器),它们都接受特定参数,并返回一定的结果。 shortcode 处理器接受两个参数, $attr 和 $content , $attr 代表 shortcode 的各个属性参数,从本质上来说是一个关联数组,而 $content 代表 shortcode 标签中的内容。

如上面的例子,若在文章内作出调用,输出一段欢迎语句:

[msc php" id="highlighter_111994">

?
1
array( 'title' => '欢迎')

在输出结果时,可以直接使用 $参数名 的形式进行输出,如例子中的情况即以 $title 输出该属性值。

六.shortcode_atts

shortcode_atts 是一个很实用的函数,它可以为你需要的属性参数设置默认值,并且删除一些不需要的参数。

shortcode_atts() 包含两个参数 $defaults_array 与 $atts , $attr 即为属性参数集合, $defaults_array 是代表需要设置的属性默认值,举个例子:

?
1
2
3
4
5
6
7
$result = shortcode_atts( array(
 'title' => '新标题',
 'description' => '描述内容'
), $atts );
$attr 依然为
 
array( 'title' => '欢迎')

这时 $result 的结果为

?
1
array( 'title' => '新标题', 'description' => '描述标题')

'title' 由于在 $defaults_array 有不同的值,因此以这个新的值为准更新了 'title' ,同时也增加了 'description' 这个值。值得注意的是, shortcode_atts() 会过滤 $defaults_array 中没有的属性,假如 $attr 中还有一个 'ohter' 的属性,那么 $result 的结果仍然是上面的结果,因为 $defaults_array 中并没有 'other' 这个属性。当然,这里说的值只是属性的默认值,真正输出的值还是 shortcode 调用时填写的值。

七.进一步解析属性与设置属性默认值

extract() 函数用于进一步解析属性并设置属性默认值,其中一个功能是把各属性参数值赋予给一个形如 "$参数名" 的变量保存起来(如例子中的 $title ),方便调用,使用该函数配合 shortcode_atts() 就可以很安全的输出结果。这点的具体使用可以参见本文第一点“一.函数 add_shortcode”的例子。

另外,属性名中的大写字母在传递给处理函数前会先转化为小写字母,因此建议在编写属性名时直接使用小写字母。

  • WordPress
  • 短代码
  • shortcode
  • 延伸 · 阅读

    • 2022-03-01Centos7的apache网站环境搭建wordpress
    • 2022-03-01详解Xampp和wordpress在Centos7上的搭建与使用
    • 2022-02-25PHP Everywhere漏洞使三万多个WordPress网站处于RCE攻击
    • 2022-02-23阿里云虚拟主机WordPress无法发送邮件解决方案
    • 2022-02-23阿里云虚拟主机如何设置wordpress伪静态规则
    • 2022-02-22最新发布的WordPress插件漏洞已影响300万个站点
    精彩推荐
    • WordpressWordPress 显示文章摘要方法 详细篇

      WordPress 显示文章摘要方法 详细篇

      WordPress又一个比较不好的地方,首页、分类和其它归档页,文章默认都是全文输出排列的。不知现在国外博客是否都流行这种显示方式,反正我个人是很不...

      WordPress建站网9222019-09-28
    • Wordpress详解WordPress中调用评论模板和循环输出评论的PHP函数

      详解WordPress中调用评论模板和循环输出评论的PHP函数

      这篇文章主要介绍了WordPress中调用评论模板和循环输出评论的PHP函数,分别是comments_template函数与wp_list_comments函数的使用,需要的朋友可以参考下...

      稍息少年6032020-12-13
    • WordpressWordPress 插件直接将服务器文件导入媒体库

      WordPress 插件直接将服务器文件导入媒体库

      WordPress 插件 直接将服务器文件导入媒体库 ...

      WordPress教程网10172019-10-07
    • WordpressWordPress统计当前页面数据库查询次数及消耗时间的方法

      WordPress统计当前页面数据库查询次数及消耗时间的方法

      这篇文章主要为大家介绍了WordPress统计当前页面数据库查询次数及消耗时间的方法,涉及get_num_queries与timer_stop函数的使用技巧,需要的朋友可以参考下...

      6822019-09-04
    • WordpressWordPress中登陆后关闭登陆页面及设置用户不可见栏目

      WordPress中登陆后关闭登陆页面及设置用户不可见栏目

      这篇文章主要介绍了WordPress中登陆后关闭登陆页面及设置用户不可见栏目的方法,是多用户模式下比较实用的两个功能,需要的朋友可以参考下...

      露兜4122020-12-12
    • WordpressWordPress中用于获取及自定义头像图片的PHP脚本详解

      WordPress中用于获取及自定义头像图片的PHP脚本详解

      这篇文章主要介绍了WordPress中用于获取及自定义头像图片的PHP脚本编写方法,分别为get_avatar()和alt标签的使用,需要的朋友可以参考下...

      斌果4082020-12-08
    • WordpressUbuntu VPS中wordpress网站打开时提示”建立数据库连接错误”的解决办法

      Ubuntu VPS中wordpress网站打开时提示”建立数据库连接错误”的解决

      这篇文章给大家介绍的是在Ubuntu VPS中wordpress网站打开时提示”建立数据库连接错误”的解决办法,相信"建立数据库连接错误"大家并不陌生,最近我在做一...

      chriscabin11012021-03-18
    • WordpressWordpress被忽略的SEO技巧介绍

      Wordpress被忽略的SEO技巧介绍

      本文将从一个小细节说起来提升你网站的SEO功能 ...

      点金主题网3022019-09-28
    最近更新
    • 手机版wordpress怎么用
    • devops工程师(devops考试费用)
    • shopex主机(独立站shopify)
    • devops开发运维一体化
    • 一个人怎么做独立站shopify(国外独立网站如何
    编辑推荐
    • 美国和欧洲 vps哪个好?美国和欧洲vps详细对比
      美国和欧洲 vps哪个好?美国和欧洲vps详细对比
    • 2云服务器是什么,云主机干什么用的?

      云服务器是什么,云主机干什么用的?

      2020-07-22
    • 32020最新好用的web服务器软件推荐

      2020最新好用的web服务器软件推荐

      2020-05-17
    • 4服务器操作系统有哪些?

      服务器操作系统有哪些?

      2020-04-06
    • 5web服务器配置(图文详解)

      web服务器配置(图文详解)

      2020-04-06
    • 6企业如何选择阿里云服务器配置?

      企业如何选择阿里云服务器配置?

      2019-10-18
    • 7五大免费主机管理系统优缺点对比及推荐

      五大免费主机管理系统优缺点对比及推荐

      2019-06-14
    • 82019最新三款Windows下连接Linux的ssh软件下载推荐

      2019最新三款Windows下连接Linux的ssh软件下载推荐

      2019-05-28
    • 9服务器常用管理软件盘点

      服务器常用管理软件盘点

      2019-05-27
    • 10Nginx服务器究竟是怎么执行PHP项目

      Nginx服务器究竟是怎么执行PHP项目

      2019-05-24
    阅读排行
    • 1 WordPress提示require_once() Failed opening required的解
    • 2 WordPress语言切换(例如中文版和英文版转换)
    • 3 如何一次性删除wordpress所有文章
    • 4 阿里云虚拟主机如何设置wordpress伪静态规则
    • 5 WordPress中的shortcode短代码功能使用详解
    • 6 wordpress网站默认的nginx伪静态规则
    • 7 WordPress中设置Post Type自定义文章类型的实例教
    • 8 WordPress伪静态规则设置代码实例
    • 9 WordPress 全站改https方法
    • 10 WordPress迁移时一些常见问题的解决方法整理
    热门标签
    502   静态缓存文件   博客系统   搜索引擎优化   网站运行速度   页面压缩   加速   网站访问   速度优化   网站被挂马   中文留言   fastcgi_cache   缓存加速   wp-config.php   静态化   WP-No-Category-Base   分类链接   阿里云虚拟主机   自动替换   WordPres   管理面板   文章类型   后台地址   幻灯片   附件下载地址   SAE   静态化插件   php-cgi   负载过高   wp-cron.php  
    © 2019-2023 (www.jb51.net) 版权所有关于我们联系我们版权申明网站地图

    本文由主机测评网发布,不代表主机测评网立场,转载联系作者并注明出处:https://zhuji.jb51.net/wordpress/7379.html

    联系我们

    在线咨询:点击这里给我发消息

    微信号:

    工作日:8:30-17:30,节假日休息