shortcode短代碼功能怎么在WordPress項(xiàng)目中使用

shortcode短代碼功能怎么在WordPress項(xiàng)目中使用？相信很多沒有經(jīng)驗(yàn)的人對(duì)此束手無策，為此本文總結(jié)了問題出現(xiàn)的原因和解決方法，通過這篇文章希望你能解決這個(gè)問題。

一.shortcode 簡(jiǎn)介

shortcode 可以讓開發(fā)者通過以函數(shù)的形式創(chuàng)建宏內(nèi)容來生成內(nèi)容，或許這個(gè)概念看上去有點(diǎn)模糊，但實(shí)際上它是一個(gè)很簡(jiǎn)單而實(shí)用的功能，只要會(huì)編寫基本的 PHP 函數(shù)，即可使用 shortcode ，下文會(huì)以實(shí)際的例子來說明 shortcode 的使用方法。

二.shortcode 形式
shortcode 支持封閉標(biāo)簽和自閉（自動(dòng)封閉）標(biāo)簽，并且支持在標(biāo)簽內(nèi)使用參數(shù)，至于 shortcode 具體是何種形式，這就決定于開發(fā)者怎樣編寫這個(gè) shortcode 了。

[myshortcode]Some Content[/myshortcode] // 封閉標(biāo)簽
[myshortcode] // 自閉標(biāo)簽
[myshortcode title="example"] // 帶有一個(gè)參數(shù)的自閉標(biāo)簽
[myshortcode]<p><a href="#"><span>內(nèi)容</span></a></p>[/myshortcode] // 標(biāo)簽內(nèi)可以填寫文本或 HTML
[myshortcode]Content [myshortcodesecond] more content[/myshortcodesecond] // 也可以嵌套使用標(biāo)簽

三.shortcode 例子
在使用 shortcode 前，首先必須在主題的 functions.php 文件中定義 shortcode ，例如：

function myshortcode_function($atts, $content = null){ // $atts 代表了 shortcode 的各個(gè)參數(shù)，$content 為標(biāo)簽內(nèi)的內(nèi)容
 
 extract(shortcode_atts(array( // 使用 extract 函數(shù)解析標(biāo)簽內(nèi)的參數(shù)
 "title" => '標(biāo)題' // 給參數(shù)賦默認(rèn)值，下面直接調(diào)用 $ 加上參數(shù)名輸出參數(shù)值
 ), $atts));
 // 返回內(nèi)容
 return '<div class="myshortcode">
    <h4>'. $title .'</h4>
    <p>
     '. $content .'
    </p>
   </div>';
}
 
add_shortcode("msc", "myshortcode_function"); // 注冊(cè)該 shortcode，以后使用 [msc] 標(biāo)簽調(diào)用該 shortcode

把上面的代碼添加到 functions.php 中，一個(gè)簡(jiǎn)單的 shortcode 便創(chuàng)建好了，我們可以通過 [msc][/msc]標(biāo)簽調(diào)用該 shortcode ，如：

[msc title="歡迎"]這是獨(dú)立博客 Kayo's Melody ，歡迎來到本博客[/msc]

在文章或頁面內(nèi)容中輸入上面的調(diào)用，可以在相應(yīng)的位置輸出一段歡迎語句，在 style.css 中定義相應(yīng)的 CSS ，即可為短代碼賦予樣式。

Kayo 簡(jiǎn)略的介紹了 WordPress 的短代碼(shortcode) 功能，主要是介紹了 shortcode 的主要概念和使用方法。在本文中， Kayo 將會(huì)更加詳細(xì)的介紹一下 shortcode 中較為重要的 API ，希望有助于各位開發(fā)較為復(fù)雜的 shortcode 。

四.函數(shù) add_shortcode

該函數(shù)用于注冊(cè)一個(gè) shortcode ，它有兩個(gè)參數(shù)：短代碼名與 shortcode 處理函數(shù)名，引用上文的例子：

function myshortcode_function($atts, $content = null){ // $atts 代表了 shortcode 的各個(gè)參數(shù)，$content 為標(biāo)簽內(nèi)的內(nèi)容
 
 extract(shortcode_atts(array( // 使用 extract 函數(shù)解析標(biāo)簽內(nèi)的參數(shù)
 "title" => '標(biāo)題' // 給參數(shù)賦默認(rèn)值，下面直接調(diào)用 $ 加上參數(shù)名輸出參數(shù)值
 ), $atts));
 // 返回內(nèi)容
 return '<div class="myshortcode">
    <h4>'. $title .'</h4>
    <p>
     '. $content .'
    </p>
   </div>';
}
 
add_shortcode("msc", "myshortcode_function"); // 注冊(cè)該 shortcode，以后使用 [msc] 標(biāo)簽調(diào)用該 shortcode

msc 即為短代碼名，以后在寫文章或頁面時(shí)可以直接使用 [msc][/msc] 標(biāo)簽調(diào)用該短代碼，而 "myshortcode_function" 即為例子中的短代碼處理函數(shù)的名稱。下面重點(diǎn)分析短代碼處理函數(shù)。

五.短代碼處理函數(shù)

shortcode 處理函數(shù)是一個(gè) shortcode 的核心， shortcode 處理函數(shù)類似于 Flickr（WordPress 過濾器），它們都接受特定參數(shù)，并返回一定的結(jié)果。 shortcode 處理器接受兩個(gè)參數(shù)， $attr 和 $content ， $attr 代表 shortcode 的各個(gè)屬性參數(shù)，從本質(zhì)上來說是一個(gè)關(guān)聯(lián)數(shù)組，而 $content 代表 shortcode 標(biāo)簽中的內(nèi)容。

如上面的例子，若在文章內(nèi)作出調(diào)用，輸出一段歡迎語句：

[msc title="歡迎"]這是獨(dú)立博客 Kayo's Melody ，歡迎來到本博客[/msc]
當(dāng)文章顯示時(shí)， WordPress 會(huì)注冊(cè)所有的 shortcode ，如上面的 [msc] ，若 shortcode 中有屬性參數(shù)和內(nèi)容， WordPress 會(huì)把它們分離出來并解析，然后傳遞給該 shortcode 的短代碼處理函數(shù)，處理后以處理函數(shù)輸出的結(jié)果代替短代碼原本的內(nèi)容顯示在文章內(nèi)。

這時(shí)屬性參數(shù)會(huì)并解析會(huì)關(guān)聯(lián)數(shù)組并傳遞給 $attr ，如上面的例子中 $attr 的值為如下的一個(gè)關(guān)聯(lián)數(shù)組：

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

在輸出結(jié)果時(shí)，可以直接使用 $參數(shù)名 的形式進(jìn)行輸出，如例子中的情況即以 $title 輸出該屬性值。

六.shortcode_atts

shortcode_atts 是一個(gè)很實(shí)用的函數(shù)，它可以為你需要的屬性參數(shù)設(shè)置默認(rèn)值，并且刪除一些不需要的參數(shù)。

shortcode_atts() 包含兩個(gè)參數(shù) $defaults_array 與 $atts ， $attr 即為屬性參數(shù)集合， $defaults_array 是代表需要設(shè)置的屬性默認(rèn)值，舉個(gè)例子：

$result = shortcode_atts( array(
 'title' => '新標(biāo)題',
 'description' => '描述內(nèi)容'
), $atts );
$attr 依然為

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

這時(shí) $result 的結(jié)果為

array( 'title' => '新標(biāo)題', 'description' => '描述標(biāo)題')

'title' 由于在 $defaults_array 有不同的值，因此以這個(gè)新的值為準(zhǔn)更新了 'title' ，同時(shí)也增加了 'description' 這個(gè)值。值得注意的是， shortcode_atts() 會(huì)過濾 $defaults_array 中沒有的屬性，假如 $attr 中還有一個(gè) 'ohter' 的屬性，那么 $result 的結(jié)果仍然是上面的結(jié)果，因?yàn)?$defaults_array 中并沒有 'other' 這個(gè)屬性。當(dāng)然，這里說的值只是屬性的默認(rèn)值，真正輸出的值還是 shortcode 調(diào)用時(shí)填寫的值。

七.進(jìn)一步解析屬性與設(shè)置屬性默認(rèn)值

extract() 函數(shù)用于進(jìn)一步解析屬性并設(shè)置屬性默認(rèn)值，其中一個(gè)功能是把各屬性參數(shù)值賦予給一個(gè)形如 "$參數(shù)名" 的變量保存起來(如例子中的 $title )，方便調(diào)用，使用該函數(shù)配合 shortcode_atts() 就可以很安全的輸出結(jié)果。這點(diǎn)的具體使用可以參見本文第一點(diǎn)“一.函數(shù) add_shortcode”的例子。

另外，屬性名中的大寫字母在傳遞給處理函數(shù)前會(huì)先轉(zhuǎn)化為小寫字母，因此建議在編寫屬性名時(shí)直接使用小寫字母。

看完上述內(nèi)容，你們掌握shortcode短代碼功能怎么在WordPress項(xiàng)目中使用的方法了嗎？如果還想學(xué)到更多技能或想了解更多相關(guān)內(nèi)容，歡迎關(guān)注億速云行業(yè)資訊頻道，感謝各位的閱讀！