詳解WordPress中簡碼格式標簽編寫的基本方法
WordPress 簡碼是一種類似於論壇標簽的東西,格式類似於把尖括號換成中括號的 Html 標簽。簡碼很多人叫做短代碼,但官方的翻譯應該是簡碼,在這裏糾正一下。
簡碼的開發的邏輯比較簡單,主要就是添加、刪除和判斷,會在本文全部介紹。
簡碼格式
簡碼的格式非常靈活,可以是有屬性、無屬性、閉合、非閉合等等:
[example]
[example]內容[/example]
[example attr="屬性" attr-hide="1"]內容[/example]
[example "屬性"]
添加簡碼
添加簡碼需要使用 add_shortcode() 函數,兩個屬性,第一個為簡碼名,第二個是簡碼的回調函數。
1 |
add_shortcode( $tag , $func );
|
例如添加名為 test 的簡碼,回調 Bing_shortcode_test() 函數:
?1 2 3 4 |
function Bing_shortcode_test( $attr , $content ){
return ‘Hello World!‘ ;
}
add_shortcode( ‘test‘ , ‘Bing_shortcode_test‘ );
|
在文章中添加 [test] 就會輸出 “Hello World!”。
從上邊的例子可以看到,簡碼的回調函數需要接收兩個參數。第一個是簡碼所有的屬性,通過數組儲存;第二個是簡碼的內容(閉合簡碼中的內容)。
移除簡碼
remove_shortcode() 函數可以移除一個簡碼,只需要指定簡碼的名稱即可移除。
?1 |
remove_shortcode( ‘test‘ );
|
remove_all_shortcodes() 函數用來移除當前添加的所有簡碼。
?1 |
remove_all_shortcodes();
|
判斷簡碼
關於判斷簡碼,有兩個函數,shortcode_exists() 函數判斷簡碼是否存在。
?1 2 3 4 |
remove_all_shortcodes();
if ( shortcode_exists( ‘test‘ ) ) echo ‘簡碼 test 存在‘ ; //False
add_shortcode( ‘test‘ , ‘Bing_shortcode_test‘ );
if ( shortcode_exists( ‘test‘ ) ) echo ‘簡碼 test 存在‘ ; //True
|
還有一個 has_shortcode() 函數,判斷字符串中是否出現某某簡碼。
?1 2 3 4 |
$content = ‘測試測試測試測試測試測試測試測試‘ ;
if ( has_shortcode( $content , ‘test‘ ) ) echo ‘字符串中有 test 簡碼‘ ; //False
$content = ‘測試測試測試測[test]測試[/test]試測試測試測試測試‘ ;
if ( has_shortcode( $content , ‘test‘ ) ) echo ‘字符串中有 test 簡碼‘ ; //True
|
執行簡碼
do_shortcode() 函數用來在字符串中查找簡碼,並在簡碼處調用之前添加的回調函數,把簡碼執行成需要的內容。
WordPress 添加的鉤子:
?1 |
add_filter( ‘the_content‘ , ‘do_shortcode‘ , 11 );
|
例子:
?1 2 3 4 5 6 |
function Bing_shortcode_test( $attr , $content ){
return ‘Hello World!‘ ;
}
add_shortcode( ‘test‘ , ‘Bing_shortcode_test‘ );
$content = ‘測試測試測試測[test]試測試測試測試測試‘ ;
echo do_shortcode( $content ); //測試測試測試測Hello World!試測試測試測試測試
|
簡碼屬性
簡碼支持各種格式的屬性,接受給簡碼回調函數的第一個參數。如果你要給參數設置默認值,可以使用 shortcode_atts() 函數:
?1 2 3 4 5 6 7 8 9 10 |
function Bing_shortcode_test( $attr , $content ){
extract( shortcode_atts( array (
‘url‘ => ‘http://www.bgbk.org‘ ,
‘hide‘ => false,
‘text‘ => ‘點擊隱藏 / 顯示‘
), $attr ) );
$hide = $hide ? ‘ style="display:none;"‘ : ‘‘ ;
return ‘<a href="‘ . $url . ‘"‘ . $hide . ‘>‘ . $text . ‘</a>‘ ;
}
add_shortcode( ‘test‘ , ‘Bing_shortcode_test‘ );
|
只有頁面中使用了簡碼的時候才加載腳本
而在開發的過程中,有時會遇到這種問題:簡碼模塊需要加載 JS 或者 CSS 腳本,而當頁面沒有使用簡碼的時候就會造成資源浪費。
比如下邊的這個 Google 地圖插件:
?
1 2 3 4 5 6 7 8 9 10 11 |
//添加簡碼
function Bing_add_google_map( $atts , $content ){
//content...
}
add_shortcode( ‘google_map‘ , ‘Bing_add_google_map‘ );
//掛載腳本
function Bing_add_javascript(){
wp_enqueue_script( ‘map_scripts‘ );
}
add_action( ‘wp_enqueue_scripts‘ , ‘Bing_add_javascript‘ );
|
只有在頁面中使用了 [google_map] 簡碼的時候才需要加載腳本,這怎麽做到呢?
其實很簡單,只需要在簡碼函數觸發的時候在頁腳掛載腳本即可。
?1 2 3 4 5 6 7 8 9 10 11 12 13 |
//添加簡碼
function Bing_add_google_map( $atts , $content ){
$GLOBALS [ ‘google_map_shortcode‘ ] = true;
return ‘地圖的代碼‘ ;
}
add_shortcode( ‘google_map‘ , ‘Bing_add_google_map‘ );
//掛載腳本
function Bing_add_javascript(){
global $google_map_shortcode ;
if ( isset( $google_map_shortcode ) && $google_map_shortcode ) wp_enqueue_script( ‘map_scripts‘ );
}
add_action( ‘wp_footer‘ , ‘Bing_add_javascript‘ );
|
總結
簡碼是個非常強大的功能,對文章內容是一種很好的擴展,利用好可以讓添加某些東西變的方便快捷。
關於簡碼的函數都在:wp-includes/shortcode.php 文件裏,有能力的朋友可以閱讀一下,了解原理。
詳解WordPress中簡碼格式標簽編寫的基本方法