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


Posted in PHP onMay 17, 2016

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

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

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

[myshortcode]Some Content[/myshortcode] // 封闭标签
[myshortcode] // 自闭标签
[myshortcode title="example"] // 带有一个参数的自闭标签
[myshortcode]<p><a href="#"><span>内容</span></a></p>[/myshortcode] // 标签内可以填写文本或 HTML
[myshortcode]Content [myshortcodesecond] more content[/myshortcodesecond] // 也可以嵌套使用标签

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

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

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

[msc title="欢迎"]这是独立博客 Kayo's Melody ,欢迎来到本博客[/msc]

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

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

四.函数 add_shortcode

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

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 title="欢迎"]这是独立博客 Kayo's Melody ,欢迎来到本博客[/msc]
当文章显示时, WordPress 会注册所有的 shortcode ,如上面的 [msc] ,若 shortcode 中有属性参数和内容, WordPress 会把它们分离出来并解析,然后传递给该 shortcode 的短代码处理函数,处理后以处理函数输出的结果代替短代码原本的内容显示在文章内。

这时属性参数会并解析会关联数组并传递给 $attr ,如上面的例子中 $attr 的值为如下的一个关联数组:

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

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

六.shortcode_atts

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

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

$result = shortcode_atts( array(
 'title' => '新标题',
 'description' => '描述内容'
), $atts );
$attr 依然为

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

这时 $result 的结果为

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”的例子。

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

PHP 相关文章推荐
php+dojo 的数据库保存拖动布局的一个方法dojo 这里下载
Mar 07 PHP
字母顺序颠倒而单词顺序不变的php代码
Aug 08 PHP
PHP中的错误处理、异常处理机制分析
May 07 PHP
PHP获取数组中某元素的位置及array_keys函数应用
Jan 29 PHP
ThinkPHP调试模式与日志记录概述
Aug 22 PHP
php提取字符串中网站url地址的方法
Dec 03 PHP
详解PHP数组赋值方法
Nov 07 PHP
php创建桌面快捷方式实现方法
Dec 31 PHP
php与c 实现按行读取文件实例代码
Jan 03 PHP
PHP连接MySQL进行增、删、改、查操作
Feb 19 PHP
thinkPHP5.0框架自动加载机制分析
Mar 18 PHP
LNMP部署laravel以及xhprof安装使用教程
Sep 14 PHP
CodeIgniter生成静态页的方法
May 17 #PHP
CodeIgniter连贯操作的底层原理分析
May 17 #PHP
CI框架常用方法小结
May 17 #PHP
CodeIgniter记录错误日志的方法全面总结
May 17 #PHP
CI框架整合widget(页面格局)的方法
May 17 #PHP
深入剖析浏览器退出之后php还会继续执行么
May 17 #PHP
CI框架出现mysql数据库连接资源无法释放的解决方法
May 17 #PHP
You might like
ThinkPHP3.1新特性之对页面压缩输出的支持
2014/06/19 PHP
PHP中加速、缓存扩展的区别和作用详解(eAccelerator、memcached、xcache、APC )
2016/07/09 PHP
PHP获取真实客户端的真实IP
2017/03/07 PHP
mac系统下安装多个php并自由切换的方法详解
2017/04/21 PHP
phpcmsv9.0任意文件上传漏洞解析
2020/10/20 PHP
通过代码实例解析PHP session工作原理
2020/12/11 PHP
ExtJS 下拉多选框lovcombo
2010/05/19 Javascript
JS维吉尼亚密码算法实现代码
2010/11/09 Javascript
js下获得客户端操作系统的函数代码(1:vista,2:windows7,3:2000,4:xp,5:2003,6:2008)
2011/10/31 Javascript
javascript之querySelector和querySelectorAll使用介绍
2011/12/20 Javascript
Javascript call和apply区别及使用方法
2013/11/14 Javascript
自己使用jquery写的一个无缝滚动的插件
2014/04/30 Javascript
jQuery实现给页面换肤的方法
2015/05/30 Javascript
Jsonp post 跨域方案
2015/07/06 Javascript
基于jquery实现鼠标左右拖动滑块滑动附源码下载
2015/12/23 Javascript
vue.js 表格分页ajax 异步加载数据
2016/10/18 Javascript
js文件中直接alert()中文出来的是乱码的解决方法
2016/11/01 Javascript
Bootstrap基本组件学习笔记之下拉菜单(7)
2016/12/07 Javascript
JavaScript条件判断_动力节点Java学院整理
2017/06/26 Javascript
jQuery菜单实例(全选,反选,取消)
2017/08/28 jQuery
在react中使用vuex的示例代码
2018/07/30 Javascript
JS实现图片轮播效果实例详解【可自动和手动】
2019/04/04 Javascript
使用wxpython实现的一个简单图片浏览器实例
2014/07/10 Python
Python实现把回车符\r\n转换成\n
2015/04/23 Python
Python实现的密码强度检测器示例
2017/08/23 Python
简单实现python聊天程序
2018/04/01 Python
Python多进程入门、分布式进程数据共享实例详解
2019/06/03 Python
浅谈PyTorch的可重复性问题(如何使实验结果可复现)
2020/02/20 Python
python tkinter GUI绘制,以及点击更新显示图片代码
2020/03/14 Python
使用openCV去除文字中乱入的线条实例
2020/06/02 Python
Farfetch台湾官网:奢侈品牌时尚购物平台
2019/06/17 全球购物
德国家用电器购物网站:Premiumshop24
2019/08/22 全球购物
幼儿园园长新年寄语2015
2014/12/08 职场文书
2015年预备党员自我评价
2015/03/04 职场文书
房屋产权证明书
2015/06/19 职场文书
MySQL示例讲解数据库约束以及表的设计
2022/06/16 MySQL