详解WordPress中简码格式标签编写的基本方法
<p>WordPress 简码是一种类似于论坛标签的东西，格式类似于把尖括号换成中括号的 Html 标签。简码很多人叫做短代码，但官方的翻译应该是简码，在这里纠正一下。</p>
<p>
简码的开发的逻辑比较简单，主要就是添加、删除和判断，会在本文全部介绍。</p>
<p>
<strong>简码格式</strong></p>
<p>
简码的格式非常灵活，可以是有属性、无属性、闭合、非闭合等等：</p>
<p>
</p>
<p>
内容</p>
<p>
内容</p>
<p>
</p>
<p>
<strong>添加简码</strong></p>
<p>
添加简码需要使用 add_shortcode() 函数，两个属性，第一个为简码名，第二个是简码的回调函数。</p>
<div>
<div>
<div id="highlighter_299906">
<div>
<span>?</span>
</div>
<table border="0" cellpadding="0" cellspacing="0"><tbody><tr>
<td>
<div>
1</div>
</td>
<td>
<div>
<div>
<code>add_shortcode( </code><code>$tag</code><code>, </code><code>$func</code> <code>);</code>
</div>
</div>
</td>
</tr></tbody></table>
</div>
</div>
<div id="codetool">
<div>
<textarea></textarea>
</div>
</div>
</div>
<p>
例如添加名为 test 的简码，回调 Bing_shortcode_test() 函数：</p>
<div>
<div>
<div id="highlighter_411027">
<div>
<span>?</span>
</div>
<table border="0" cellpadding="0" cellspacing="0"><tbody><tr>
<td>
<div>
1</div>
<div>
2</div>
<div>
3</div>
<div>
4</div>
</td>
<td>
<div>
<div>
<code>function</code> <code>Bing_shortcode_test( </code><code>$attr</code><code>, </code><code>$content</code> <code>){</code>
</div>
<div>
<code> </code><code>return</code> <code>'Hello World!'</code><code>;</code>
</div>
<div>
<code>}</code>
</div>
<div>
<code>add_shortcode( </code><code>'test'</code><code>, </code><code>'Bing_shortcode_test'</code> <code>);</code>
</div>
</div>
</td>
</tr></tbody></table>
</div>
</div>
<div id="codetool">
<div>
<textarea></textarea>
</div>
</div>
</div>
<p>
在文章中添加 就会输出 “Hello World!”。</p>
<p>
从上边的例子可以看到，简码的回调函数需要接收两个参数。第一个是简码所有的属性，通过数组储存；第二个是简码的内容（闭合简码中的内容）。</p>
<p>
<strong>移除简码</strong></p>
<p>
remove_shortcode() 函数可以移除一个简码，只需要指定简码的名称即可移除。</p>
<div>
<div>
<div id="highlighter_578548">
<div>
<span>?</span>
</div>
<table border="0" cellpadding="0" cellspacing="0"><tbody><tr>
<td>
<div>
1</div>
</td>
<td>
<div>
<div>
<code>remove_shortcode( </code><code>'test'</code> <code>);</code>
</div>
</div>
</td>
</tr></tbody></table>
</div>
</div>
<div id="codetool">
<div>
<textarea></textarea>
</div>
</div>
</div>
<p>
remove_all_shortcodes() 函数用来移除当前添加的所有简码。</p>
<div>
<div>
<div id="highlighter_208789">
<div>
<span>?</span>
</div>
<table border="0" cellpadding="0" cellspacing="0"><tbody><tr>
<td>
<div>
1</div>
</td>
<td>
<div>
<div>
<code>remove_all_shortcodes();</code>
</div>
</div>
</td>
</tr></tbody></table>
</div>
</div>
<div id="codetool">
<div>
<textarea></textarea>
</div>
</div>
</div>
<p>
<strong>判断简码</strong></p>
<p>
关于判断简码，有两个函数，shortcode_exists() 函数判断简码是否存在。</p>
<div>
<div>
<div id="highlighter_762730">
<div>
<span>?</span>
</div>
<table border="0" cellpadding="0" cellspacing="0"><tbody><tr>
<td>
<div>
1</div>
<div>
2</div>
<div>
3</div>
<div>
4</div>
</td>
<td>
<div>
<div>
<code>remove_all_shortcodes();</code>
</div>
<div>
<code>if</code><code>( shortcode_exists( </code><code>'test'</code> <code>) ) </code><code>echo</code> <code>'简码 test 存在'</code><code>;</code><code>//False</code>
</div>
<div>
<code>add_shortcode( </code><code>'test'</code><code>, </code><code>'Bing_shortcode_test'</code> <code>);</code>
</div>
<div>
<code>if</code><code>( shortcode_exists( </code><code>'test'</code> <code>) ) </code><code>echo</code> <code>'简码 test 存在'</code><code>;</code><code>//True</code>
</div>
</div>
</td>
</tr></tbody></table>
</div>
</div>
<div id="codetool">
<div>
<textarea></textarea>
</div>
</div>
</div>
<p>
还有一个 has_shortcode() 函数，判断字符串中是否出现某某简码。</p>
<div>
<div>
<div id="highlighter_624716">
<div>
<span>?</span>
</div>
<table border="0" cellpadding="0" cellspacing="0"><tbody><tr>
<td>
<div>
1</div>
<div>
2</div>
<div>
3</div>
<div>
4</div>
</td>
<td>
<div>
<div>
<code>$content</code> <code>= </code><code>'测试测试测试测试测试测试测试测试'</code><code>;</code>
</div>
<div>
<code>if</code><code>( has_shortcode( </code><code>$content</code><code>, </code><code>'test'</code> <code>) ) </code><code>echo</code> <code>'字符串中有 test 简码'</code><code>;</code><code>//False</code>
</div>
<div>
<code>$content</code> <code>= </code><code>'测试测试测试测测试试测试测试测试测试'</code><code>;</code>
</div>
<div>
<code>if</code><code>( has_shortcode( </code><code>$content</code><code>, </code><code>'test'</code> <code>) ) </code><code>echo</code> <code>'字符串中有 test 简码'</code><code>;</code><code>//True</code>
</div>
</div>
</td>
</tr></tbody></table>
</div>
</div>
<div id="codetool">
<div>
<textarea></textarea>
</div>
</div>
</div>
<p>
<strong>执行简码</strong></p>
<p>
do_shortcode() 函数用来在字符串中查找简码，并在简码处调用之前添加的回调函数，把简码执行成需要的内容。</p>
<p>
WordPress 添加的钩子：</p>
<div>
<div>
<div id="highlighter_323555">
<div>
<span>?</span>
</div>
<table border="0" cellpadding="0" cellspacing="0"><tbody><tr>
<td>
<div>
1</div>
</td>
<td>
<div>
<div>
<code>add_filter( </code><code>'the_content'</code><code>, </code><code>'do_shortcode'</code><code>, 11 );</code>
</div>
</div>
</td>
</tr></tbody></table>
</div>
</div>
<div id="codetool">
<div>
<textarea></textarea>
</div>
</div>
</div>
<p>
例子：</p>
<div>
<div>
<div id="highlighter_597483">
<div>
<span>?</span>
</div>
<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>
</td>
<td>
<div>
<div>
<code>function</code> <code>Bing_shortcode_test( </code><code>$attr</code><code>, </code><code>$content</code> <code>){</code>
</div>
<div>
<code> </code><code>return</code> <code>'Hello World!'</code><code>;</code>
</div>
<div>
<code>}</code>
</div>
<div>
<code>add_shortcode( </code><code>'test'</code><code>, </code><code>'Bing_shortcode_test'</code> <code>);</code>
</div>
<div>
<code>$content</code> <code>= </code><code>'测试测试测试测试测试测试测试测试'</code><code>;</code>
</div>
<div>
<code>echo</code> <code>do_shortcode( </code><code>$content</code> <code>);</code><code>//测试测试测试测Hello World!试测试测试测试测试</code>
</div>
</div>
</td>
</tr></tbody></table>
</div>
</div>
<div id="codetool">
<div>
<textarea></textarea>
</div>
</div>
</div>
<p>
<strong>简码属性</strong></p>
<p>
简码支持各种格式的属性，接受给简码回调函数的第一个参数。如果你要给参数设置默认值，可以使用 shortcode_atts() 函数：</p>
<div>
<div>
<div id="highlighter_242137">
<div>
<span>?</span>
</div>
<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>
</td>
<td>
<div>
<div>
<code>function</code> <code>Bing_shortcode_test( </code><code>$attr</code><code>, </code><code>$content</code> <code>){</code>
</div>
<div>
<code> </code><code>extract( shortcode_atts( </code><code>array</code><code>(</code>
</div>
<div>
<code> </code><code>'url'</code> <code>=> </code><code>'http://www.bgbk.org'</code><code>,</code>
</div>
<div>
<code> </code><code>'hide'</code> <code>=> false,</code>
</div>
<div>
<code> </code><code>'text'</code> <code>=> </code><code>'点击隐藏 / 显示'</code>
</div>
<div>
<code> </code><code>), </code><code>$attr</code> <code>) );</code>
</div>
<div>
<code> </code><code>$hide</code> <code>= </code><code>$hide</code> <code>? </code><code>''</code> <code>: </code><code>''</code><code>;</code>
</div>
<div>
<code> </code><code>return</code> <code>'<a href="'</code> <code>. </code><code>$url</code> <code>. </code><code>'"'</code> <code>. </code><code>$hide</code> <code>. </code><code>'>'</code> <code>. </code><code>$text</code> <code>. </code><code>'</a>'</code><code>;</code>
</div>
<div>
<code>}</code>
</div>
<div>
<code>add_shortcode( </code><code>'test'</code><code>, </code><code>'Bing_shortcode_test'</code> <code>);</code>
</div>
</div>
</td>
</tr></tbody></table>
</div>
</div>
<div id="codetool">
<div>
<textarea></textarea>
</div>
</div>
</div>
<p>
<br><strong>只有页面中使用了简码的时候才加载脚本</strong><br>
而在开发的过程中，有时会遇到这种问题：简码模块需要加载 JS 或者 CSS 脚本，而当页面没有使用简码的时候就会造成资源浪费。</p>
<p>
比如下边的这个 Google 地图插件：</p>
<p>
</p>
<div>
<div>
<div id="highlighter_693086">
<div>
<span>?</span>
</div>
<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>
</td>
<td>
<div>
<div>
<code>//添加简码</code>
</div>
<div>
<code>function</code> <code>Bing_add_google_map( </code><code>$atts</code><code>, </code><code>$content</code> <code>){</code>
</div>
<div>
<code> </code><code>//content...</code>
</div>
<div>
<code>}</code>
</div>
<div>
<code>add_shortcode( </code><code>'google_map'</code><code>, </code><code>'Bing_add_google_map'</code><code>);</code>
</div>
<div>
<code> </code>
</div>
<div>
<code>//挂载脚本</code>
</div>
<div>
<code>function</code> <code>Bing_add_javascript(){</code>
</div>
<div>
<code> </code><code>wp_enqueue_script( </code><code>'map_scripts'</code> <code>);</code>
</div>
<div>
<code>}</code>
</div>
<div>
<code>add_action( </code><code>'wp_enqueue_scripts'</code><code>, </code><code>'Bing_add_javascript'</code> <code>);</code>
</div>
</div>
</td>
</tr></tbody></table>
</div>
</div>
<div id="codetool">
<div>
<textarea></textarea>
</div>
</div>
</div>
<p>
只有在页面中使用了 简码的时候才需要加载脚本，这怎么做到呢？</p>
<p>
其实很简单，只需要在简码函数触发的时候在页脚挂载脚本即可。</p>
<div>
<div>
<div id="highlighter_217119">
<div>
<span>?</span>
</div>
<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>
</td>
<td>
<div>
<div>
<code>//添加简码</code>
</div>
<div>
<code>function</code> <code>Bing_add_google_map( </code><code>$atts</code><code>, </code><code>$content</code> <code>){</code>
</div>
<div>
<code> </code><code>$GLOBALS</code><code>[</code><code>'google_map_shortcode'</code><code>] = true;</code>
</div>
<div>
<code> </code><code>return</code> <code>'地图的代码'</code><code>;</code>
</div>
<div>
<code>}</code>
</div>
<div>
<code>add_shortcode( </code><code>'google_map'</code><code>, </code><code>'Bing_add_google_map'</code><code>);</code>
</div>
<div>
<code> </code>
</div>
<div>
<code>//挂载脚本</code>
</div>
<div>
<code>function</code> <code>Bing_add_javascript(){</code>
</div>
<div>
<code> </code><code>global</code> <code>$google_map_shortcode</code><code>;</code>
</div>
<div>
<code> </code><code>if</code><code>( isset( </code><code>$google_map_shortcode</code> <code>) && </code><code>$google_map_shortcode</code> <code>) wp_enqueue_script( </code><code>'map_scripts'</code> <code>);</code>
</div>
<div>
<code>}</code>
</div>
<div>
<code>add_action( </code><code>'wp_footer'</code><code>, </code><code>'Bing_add_javascript'</code> <code>);</code>
</div>
</div>
</td>
</tr></tbody></table>
</div>
</div>
<div id="codetool">
<div>
<textarea></textarea>
</div>
</div>
</div>
<p>
<strong>总结</strong></p>
<p>
简码是个非常强大的功能，对文章内容是一种很好的扩展，利用好可以让添加某些东西变的方便快捷。</p>
<p>
关于简码的函数都在：wp-includes/shortcode.php 文件里，有能力的朋友可以阅读一下，了解原理。</p>
頁:
[1]