詳解WordPress中簡碼格式标簽編寫的基本方法

WordPress 簡碼是一種類似于論壇标簽的東西，格式類似于把尖括号換成中括号的 Html 标簽。簡碼很多人叫做短代碼，但官方的翻譯應該是簡碼，在這裡糾正一下。

簡碼的開發的邏輯比較簡單，主要就是添加、删除和判斷，會在本文全部介紹。

簡碼格式

簡碼的格式非常靈活，可以是有屬性、無屬性、閉合、非閉合等等：

[example]

[example]内容[/example]

[example attr="屬性" attr-hide="1"]内容[/example]

[example "屬性"]

添加簡碼

添加簡碼需要使用 add_shortcode() 函數，兩個屬性，第一個為簡碼名，第二個是簡碼的回調函數。

<a href="http://www.jb51.net/article/76822.htm#">?</a>

<code>add_shortcode(</code><code>$tag</code><code>,</code><code>$func</code> <code>);</code>

例如添加名為 test 的簡碼，回調 Bing_shortcode_test() 函數：

<code>function</code> <code>Bing_shortcode_test(</code><code>$attr</code><code>,</code><code>$content</code> <code>){</code>

<code>  </code><code>return</code> <code>'Hello World!'</code><code>;</code>

<code>}</code>

<code>add_shortcode(</code><code>'test'</code><code>,</code><code>'Bing_shortcode_test'</code> <code>);</code>

在文章中添加 [test] 就會輸出 “Hello World!”。

從上邊的例子可以看到，簡碼的回調函數需要接收兩個參數。第一個是簡碼所有的屬性，通過數組儲存；第二個是簡碼的内容（閉合簡碼中的内容）。

移除簡碼

remove_shortcode() 函數可以移除一個簡碼，隻需要指定簡碼的名稱即可移除。

<code>remove_shortcode(</code><code>'test'</code> <code>);</code>

remove_all_shortcodes() 函數用來移除目前添加的所有簡碼。

<code>remove_all_shortcodes();</code>

判斷簡碼

關于判斷簡碼，有兩個函數，shortcode_exists() 函數判斷簡碼是否存在。

<code>if</code><code>( shortcode_exists(</code><code>'test'</code> <code>) )</code><code>echo</code> <code>'簡碼 test 存在'</code><code>;</code><code>//False</code>

<code>if</code><code>( shortcode_exists(</code><code>'test'</code> <code>) )</code><code>echo</code> <code>'簡碼 test 存在'</code><code>;</code><code>//True</code>

還有一個 has_shortcode() 函數，判斷字元串中是否出現某某簡碼。

<code>$content</code> <code>=</code><code>'測試測試測試測試測試測試測試測試'</code><code>;</code>

<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>

<code>$content</code> <code>=</code><code>'測試測試測試測[test]測試[/test]試測試測試測試測試'</code><code>;</code>

<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>

執行簡碼

do_shortcode() 函數用來在字元串中查找簡碼，并在簡碼處調用之前添加的回調函數，把簡碼執行成需要的内容。

WordPress 添加的鈎子：

<code>add_filter(</code><code>'the_content'</code><code>,</code><code>'do_shortcode'</code><code>, 11 );</code>

例子：

<code>$content</code> <code>=</code><code>'測試測試測試測[test]試測試測試測試測試'</code><code>;</code>

<code>echo</code> <code>do_shortcode(</code><code>$content</code> <code>);</code><code>//測試測試測試測Hello World!試測試測試測試測試</code>

簡碼屬性

簡碼支援各種格式的屬性，接受給簡碼回調函數的第一個參數。如果你要給參數設定預設值，可以使用 shortcode_atts() 函數：

<code>  </code><code>extract( shortcode_atts(</code><code>array</code><code>(</code>

<code>    </code><code>'hide'</code> <code>=&gt; false,</code>

<code>    </code><code>'text'</code> <code>=&gt;</code><code>'點選隐藏 / 顯示'</code>

<code>  </code><code>),</code><code>$attr</code> <code>) );</code>

<code>  </code><code>$hide</code> <code>=</code><code>$hide</code> <code>?</code><code>' style="display:none;"'</code> <code>:</code><code>''</code><code>;</code>

<code>  </code><code>return</code> <code>'&lt;a href="'</code> <code>.</code><code>$url</code> <code>.</code><code>'"'</code> <code>.</code><code>$hide</code> <code>.</code><code>'&gt;'</code> <code>.</code><code>$text</code> <code>.</code><code>'&lt;/a&gt;'</code><code>;</code>

隻有頁面中使用了簡碼的時候才加載腳本

而在開發的過程中，有時會遇到這種問題：簡碼子產品需要加載 JS 或者 CSS 腳本，而當頁面沒有使用簡碼的時候就會造成資源浪費。

比如下邊的這個 Google 地圖插件：

<code>//添加簡碼</code>

<code>function</code> <code>Bing_add_google_map(</code><code>$atts</code><code>,</code><code>$content</code> <code>){</code>

<code>  </code><code>//content...</code>

<code>add_shortcode(</code><code>'google_map'</code><code>,</code><code>'Bing_add_google_map'</code><code>);</code>

<code> </code> 

<code>//挂載腳本</code>

<code>function</code> <code>Bing_add_javascript(){</code>

<code>  </code><code>wp_enqueue_script(</code><code>'map_scripts'</code> <code>);</code>

<code>add_action(</code><code>'wp_enqueue_scripts'</code><code>,</code><code>'Bing_add_javascript'</code> <code>);</code>

隻有在頁面中使用了 [google_map] 簡碼的時候才需要加載腳本，這怎麼做到呢？

其實很簡單，隻需要在簡碼函數觸發的時候在頁腳挂載腳本即可。

<code>  </code><code>$GLOBALS</code><code>[</code><code>'google_map_shortcode'</code><code>] = true;</code>

<code>  </code><code>return</code> <code>'地圖的代碼'</code><code>;</code>

<code>  </code><code>global</code> <code>$google_map_shortcode</code><code>;</code>

<code>  </code><code>if</code><code>( isset(</code><code>$google_map_shortcode</code> <code>) &amp;&amp;</code><code>$google_map_shortcode</code> <code>) wp_enqueue_script(</code><code>'map_scripts'</code> <code>);</code>

<code>add_action(</code><code>'wp_footer'</code><code>,</code><code>'Bing_add_javascript'</code> <code>);</code>

總結

簡碼是個非常強大的功能，對文章内容是一種很好的擴充，利用好可以讓添加某些東西變的友善快捷。

關于簡碼的函數都在：wp-includes/shortcode.php 檔案裡，有能力的朋友可以閱讀一下，了解原理。

如何聯系我：【萬裡虎】www.bravetiger.cn

【QQ】3396726884 （咨詢問題100元起，幫助解決問題500元起）

【部落格】http://www.cnblogs.com/kenshinobiy/