WordPress中的shortcode短代码功能使用详解
<p>WordPress 从 2.5 的版本开始，增加了一个 shortcode (短代码) API ,类似于 BBS 上的 BBCode ， shortcode 也可以很方便的为文章或页面增加功能，并且 shortcode 的比起 BBCode 更加灵活和强大。下面 Kayo 为大家介绍一下 shortcode 。</p><p><strong>一.shortcode 简介</strong><br />shortcode 可以让开发者通过以函数的形式创建宏内容来生成内容，或许这个概念看上去有点模糊，但实际上它是一个很简单而实用的功能，只要会编写基本的 PHP 函数，即可使用 shortcode ，下文会以实际的例子来说明 shortcode 的使用方法。</p>
<p><strong>二.shortcode 形式</strong><br />shortcode 支持封闭标签和自闭（自动封闭）标签，并且支持在标签内使用参数，至于 shortcode 具体是何种形式，这就决定于开发者怎样编写这个 shortcode 了。</p>
<div><div id="highlighter_56198"><table border="0" cellpadding="0" cellspacing="0"><tbody><tr><td><div>1</div>
<div>2</div>
<div>3</div>
<div>4</div>
<div>5</div></td><td><div><div><code>Some Content </code><code>// 封闭标签</code></div>
<div><code> </code><code>// 自闭标签</code></div>
<div><code>[myshortcode id="codetool"> </code>
<div></div><code> </code></div></div>
<p><strong>三.shortcode 例子</strong><br />在使用 shortcode 前，首先必须在主题的 functions.php 文件中定义 shortcode ，例如：</p>
<div><div><div id="highlighter_440099"><table border="0" cellpadding="0" cellspacing="0"><tbody><tr><td><div>1</div>
<div>2</div>
<div>3</div>
<div>4</div>
<div>5</div>
<div>6</div>
<div>7</div>
<div>8</div>
<div>9</div>
<div>10</div>
<div>11</div>
<div>12</div>
<div>13</div>
<div>14</div>
<div>15</div></td><td><div><div><code>function</code> <code>myshortcode_function($atts, $content = </code><code>null</code><code>){ </code><code>// $atts 代表了 shortcode 的各个参数，$content 为标签内的内容</code></div>
<div><code> </code></div>
<div><code> </code><code>extract(shortcode_atts(array( </code><code>// 使用 extract 函数解析标签内的参数</code></div>
<div><code> </code><code>"title"</code> <code>=> </code><code>'标题'</code> <code>// 给参数赋默认值，下面直接调用 $ 加上参数名输出参数值</code></div>
<div><code> </code><code>), $atts));</code></div>
<div><code> </code><code>// 返回内容</code></div>
<div><code> </code><code>return</code> <code>'</code>
<p></p></div>
<div><code>'</code>
<div class="myshortcode"><h3><code>'. $title .'</code></h3>
<p><code>'. $content .'</code></p></div><code>'</code></div>
<p></p></div>
<div><code> </code></div><code>'</code><code>;</code>
<div><code>}</code></div>
<div><code> </code></div>
<div><code>add_shortcode(</code><code>"msc"</code><code>, </code><code>"myshortcode_function"</code><code>); </code><code>// 注册该 shortcode，以后使用 标签调用该 shortcode</code></div></td></tr></tbody></table></div></div></div>
<p>把上面的代码添加到 functions.php 中，一个简单的 shortcode 便创建好了，我们可以通过 标签调用该 shortcode ，如：</p>
<div><div id="highlighter_726203"><table border="0" cellpadding="0" cellspacing="0"><tbody><tr><td><div>1</div></td><td><div><div><code>[msc id="codetool"> </code><div></div><code> </code></div></div>
<p>在文章或页面内容中输入上面的调用，可以在相应的位置输出一段欢迎语句，在 style.css 中定义相应的 CSS ，即可为短代码赋予样式。</p>
<p>Kayo 简略的介绍了 WordPress 的短代码(shortcode) 功能，主要是介绍了 shortcode 的主要概念和使用方法。在本文中， Kayo 将会更加详细的介绍一下 shortcode 中较为重要的 API ，希望有助于各位开发较为复杂的 shortcode 。</p>
<p><strong>四.函数 add_shortcode</strong></p>
<p>该函数用于注册一个 shortcode ，它有两个参数：短代码名与 shortcode 处理函数名，引用上文的例子：</p>
<div><div id="highlighter_329169"><table border="0" cellpadding="0" cellspacing="0"><tbody><tr><td><div>1</div>
<div>2</div>
<div>3</div>
<div>4</div>
<div>5</div>
<div>6</div>
<div>7</div>
<div>8</div>
<div>9</div>
<div>10</div>
<div>11</div>
<div>12</div>
<div>13</div>
<div>14</div>
<div>15</div></td><td><div><div><code>function</code> <code>myshortcode_function(</code><code>$atts</code><code>, </code><code>$content</code> <code>= null){ </code><code>// $atts 代表了 shortcode 的各个参数，$content 为标签内的内容</code></div>
<div><code> </code></div>
<div><code> </code><code>extract(shortcode_atts(</code><code>array</code><code>( </code><code>// 使用 extract 函数解析标签内的参数</code></div>
<div><code> </code><code>"title"</code> <code>=> </code><code>'标题'</code> <code>// 给参数赋默认值，下面直接调用 $ 加上参数名输出参数值</code></div>
<div><code> </code><code>), </code><code>$atts</code><code>));</code></div>
<div><code> </code><code>// 返回内容</code></div>
<div><code> </code><code>return</code> <code>'</code>
<div><code>'</code>
<div><h3><code>'. $title .'</code></h3>
<p><code>'. $content .'</code></p></div><code>'</code></div>
<div><code><code>}</code> </code></div>
<div><code><code> </code> </code></div>
<div><code><code>add_shortcode(</code><code>"msc"</code><code>, </code><code>"myshortcode_function"</code><code>); </code><code>// 注册该 shortcode，以后使用 标签调用该 shortcode</code> </code></div></div></div></td></tr></tbody></table></div></div>
<p>msc 即为短代码名，以后在写文章或页面时可以直接使用 标签调用该短代码，而 "myshortcode_function" 即为例子中的短代码处理函数的名称。下面重点分析短代码处理函数。</p>
<p><strong>五.短代码处理函数</strong></p>
<p>shortcode 处理函数是一个 shortcode 的核心， shortcode 处理函数类似于 Flickr（WordPress 过滤器），它们都接受特定参数，并返回一定的结果。 shortcode 处理器接受两个参数， $attr 和 $content ， $attr 代表 shortcode 的各个属性参数，从本质上来说是一个关联数组，而 $content 代表 shortcode 标签中的内容。</p>
<p>如上面的例子，若在文章内作出调用，输出一段欢迎语句：</p>
<p>[msc php" id="highlighter_111994"></p>
<table border="0" cellpadding="0" cellspacing="0"><tbody><tr><td><div>1</div></td><td><div><div><code>array</code><code>( </code><code>'title'</code> <code>=> </code><code>'欢迎'</code><code>)</code></div></div></td></tr></tbody></table>
<p>在输出结果时，可以直接使用 $参数名 的形式进行输出，如例子中的情况即以 $title 输出该属性值。</p>
<p><strong>六.shortcode_atts</strong></p>
<p>shortcode_atts 是一个很实用的函数，它可以为你需要的属性参数设置默认值，并且删除一些不需要的参数。</p>
<p>shortcode_atts() 包含两个参数 $defaults_array 与 $atts ， $attr 即为属性参数集合， $defaults_array 是代表需要设置的属性默认值，举个例子：</p>
<div><div id="highlighter_194805"><table border="0" cellpadding="0" cellspacing="0"><tbody><tr><td><div>1</div>
<div>2</div>
<div>3</div>
<div>4</div>
<div>5</div>
<div>6</div>
<div>7</div></td><td><div><div><code>$result</code> <code>= shortcode_atts( </code><code>array</code><code>(</code></div>
<div><code> </code><code>'title'</code> <code>=> </code><code>'新标题'</code><code>,</code></div>
<div><code> </code><code>'description'</code> <code>=> </code><code>'描述内容'</code></div>
<div><code>), </code><code>$atts</code> <code>);</code></div>
<div><code>$attr</code> <code>依然为</code></div>
<div></div>
<div><code>array</code><code>( </code><code>'title'</code> <code>=> </code><code>'欢迎'</code><code>)</code></div></div></td></tr></tbody></table></div></div>
<p>这时 $result 的结果为</p>
<div><div id="highlighter_948623"><table border="0" cellpadding="0" cellspacing="0"><tbody><tr><td><div>1</div></td><td><div><div><code>array</code><code>( </code><code>'title'</code> <code>=> </code><code>'新标题'</code><code>, </code><code>'description'</code> <code>=> </code><code>'描述标题'</code><code>)</code></div></div></td></tr></tbody></table></div></div>
<p>'title' 由于在 $defaults_array 有不同的值，因此以这个新的值为准更新了 'title' ，同时也增加了 'description' 这个值。值得注意的是， shortcode_atts() 会过滤 $defaults_array 中没有的属性，假如 $attr 中还有一个 'ohter' 的属性，那么 $result 的结果仍然是上面的结果，因为 $defaults_array 中并没有 'other' 这个属性。当然，这里说的值只是属性的默认值，真正输出的值还是 shortcode 调用时填写的值。</p>
<p><strong>七.进一步解析属性与设置属性默认值</strong></p>
<p>extract() 函数用于进一步解析属性并设置属性默认值，其中一个功能是把各属性参数值赋予给一个形如 "$参数名" 的变量保存起来(如例子中的 $title )，方便调用，使用该函数配合 shortcode_atts() 就可以很安全的输出结果。这点的具体使用可以参见本文第一点“一.函数 add_shortcode”的例子。</p>
<p>另外，属性名中的大写字母在传递给处理函数前会先转化为小写字母，因此建议在编写属性名时直接使用小写字母。</p></td></tr></tbody></table></div></div></td></tr></tbody></table></div></div>
頁:
[1]