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 style="margin: 0px; padding: 0px; line-height: 25.2px; width: 660px; overflow: hidden; clear: both;">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 style="margin: 0px; padding: 0px; line-height: 25.2px; width: 660px; overflow: hidden; clear: both;">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 style="margin: 0px; padding: 0px; line-height: 25.2px; width: 660px; overflow: hidden; clear: both;">
array( 'title' => '歡迎')