tid=39737&WordPress自定義短代碼Shortcode以及產生編輯器短代碼按鈕(shortcode button)
$ D4 K9 o1 f4 I
4 B9 n( i" r. F# V \wordpress Shortcode即wordpress短代碼功能是在wordpress 2.5版本開始被引入,用户透過wordpress短代碼可以非常方便快速地在編輯文章或頁面的時候插入動態内容,短代碼的常見應用有插入最新文章、插入廣告、插入音樂視訊、插入下載按钮等。Blog請别人制作wordpress模板時,透過wordpress Shortcode實現了page頁面動態插入不同的幻灯片。6 S+ H: m1 p! ]! j
以下是 wordpress 短代碼的詳细介紹及進階應用。8 r! C2 m/ h$ o7 k. M0 e" @5 j
; W4 |9 q/ H6 f3 C短代碼的 wordpress 使用非常簡單。 例如我們想要顯示為指定最近的文章 , 我們可以使用的程式碼類似於下列 :8 B8 Z7 P7 X0 _0 P
此外 , 我們可以設定一個參數來控制文章的數量 :
' M# g: l/ {$ M+ {& Q% N* i此外 , 我們也可以為文章列表新增一個標題 :
- y+ z1 i; L% n- L$ B5 s9 V/ f- [recent-posts posts="5"]Posts Heading[/recent-posts]
複製代碼 ) @; Y& r. h& E' v, e
+ B1 f' J9 g2 h3 e* l$ N1. 簡單的短代碼; \8 ]8 M- @+ k) D
本教學的第一部分 , 我們會建立下列短代碼的程式碼 :, U5 y! \) j( W* \$ I
該程序的建立是非常簡單並且不需要非常進階 PHP 知識。 建立過程如下 :
3 Y' H8 M- W2 \- 建立一個函數 , 當 wordpress發現短代碼時會呼叫此函數 ;
- 藉由設置一個唯一的名稱來註冊短代碼 ;
- 把註冊的函數連結到wordpress的action上。
' f# J' ~3 \/ _$ o- ]8 ~2 v: C
/ P% m& T' e# ^! R9 Y7 b本教學所有程式碼將會直接放到function.php(控制台==>外觀==>主題編輯器==>function.php) ,也可以放在一個被包含在function.php的單獨的php檔案中。; Q+ p7 ]4 j- _
1.1 建立返回函數6 {+ U$ t& b/ L5 f
當發現短代碼的時候,它會被一個稱作返回函數的一段代碼所代替,所以我們先建立一個函數,從資料庫中獲取最新的文章。
, i2 _; a6 {* q, q- ^- function recent_posts_function() {
% d3 J: b* ]3 n. e+ q - query_posts(array('orderby' => 'date', 'order' => 'DESC' , 'showposts' => 1));1 H5 w5 t; d" f5 |$ q8 v! M
- if (have_posts()) :( q( U' f! E2 F
- while (have_posts()) : the_post();
" }8 Y, m7 K n6 G: ^( j3 _! H - $return_string = '<a href="'.get_permalink().'">'.get_the_title().'</a>';
& j$ c7 @0 W. v7 K - endwhile;
3 r9 ?# U7 |# S w% V+ y' Q - endif;% ~* U% {' M( o! a( a
- wp_reset_query();6 ?0 v8 q& u3 g
- return $return_string;
* o1 X) M* A. O# c2 r - }
複製代碼 如上所示,我們查詢資料庫,獲取最新的文章,並返回一個帶有鏈接的字串。值得註意的是,返回函數並不印任何內容,而是返回一個字串。+ p% ?9 w) b# b2 b
$ o, ?8 a, q8 J3 E
- X- @+ h: L6 ?- G1 q9 C1.2 註册短代碼
, d& I) c4 H' T& b* V7 T9 N現在,我們告訴Wordpress這個函數是一個短代碼:- function register_shortcodes(){
( i3 u+ E5 D+ X$ n' c6 f8 z - add_shortcode('recent-posts', 'recent_posts_function');
( `; i' j' V. P6 i3 E/ c - }
複製代碼 當在文章的內容中使用短代碼9 ]8 y- H2 g8 o* H
將會自動呼叫 recent_posts_function() 函數,我們需要確保短代碼的名字是唯一的,以避免重複。
! K& A/ a- @% m3 J
8 g8 z; }- J% ?
* Y) S6 |+ L7 o, J# P1.3 Hook into WordPress
* K# e( v+ Q& }, p6 C/ k* Q$ t$ ~; Y/ }; v. b( @/ b9 Y0 k* q
為了能夠執行 recent_posts_function() 函數,我們需要把它綁定在 WordPress 的初始化鉤子中。
( |! y5 Y% R2 N; _+ P, e- add_action( 'init', 'register_shortcodes');
複製代碼 5 R* }* C& U, W# L
1.4 測試短代碼
: I! X! l5 X$ a$ ~5 w6 X/ _9 _1 M3 `) A簡單的短代碼已設定 , 我們現在需要測試是否能正常執行。 我們可以建立新文章 ( 或開啟現有 ) , 將下列代碼加到文章內容的某個位置 :2. 進階短代碼 2.1 短代碼参數 短代碼是非常有彈性 , 因為它讓我們加入參數可讓它們有更多的功能。 假設我們必須要顯示某一特定數量的最新的文章。 為了達到這個目的 , 我們需要給短代碼指定其他選項以顯示最近的文章數。 我們需要使用兩個函數 ,第一個是內建在 wordpress 的shortcode _ atts ( ) 函式 , 它把用戶的短代碼屬性與本地屬性結合在一起 , 並填入到想要的位置。 第二個是 PHP的extract() 函数 , 顧名思義 , 它萃取出短代碼中的各個屬性。 展開我們的返回功能 , 我們新增一個參數 $atts, 它是一個陣列,從中可以提取到我們需要的文章數。 我們查詢資料庫來取得指定數目的文章 , 並傳回一個列表 : - function recent_posts_function($atts){2 g; X+ d, r5 H( _4 {
- extract(shortcode_atts(array(9 p, z2 o( L! w$ g5 @
- 'posts' => 1,
& B$ |4 k4 _. K4 | - ), $atts));$ S" c6 a6 p$ A4 |0 D0 `& w8 @
- # R, r8 \5 ?1 H
- $return_string = '<ul>';
+ j! h a0 r( R5 d# L1 x - query_posts(array('orderby' => 'date', 'order' => 'DESC' , 'showposts' => $posts));
" o0 L% G- }' w, `" V% p - if (have_posts()) :. i8 E7 J: l1 u% |* j$ D
- while (have_posts()) : the_post();3 j! o! l1 p E; {9 ^ i. @
- $return_string .= '<li><a href="'.get_permalink().'">'.get_the_title().'</a></li>';
* a: B( `3 R$ y h7 [ - endwhile;
, {" e; t5 \1 E+ R - endif;
+ z( [! u3 U3 A! _) q - $return_string .= '</ul>';8 V. I* c! i5 m* H
- 7 Q* g5 V* U. W: ]" x' Z
- wp_reset_query();
+ b8 u1 o) v; l0 `+ z- t& Z; r5 h - return $return_string;2 h$ `6 P# u' Z4 {
- }
複製代碼 如果使用者未指定此選項 , 1 將是預設值。 我們可以加入多個屬性使短代碼接受更多的參數。 使用這項強化函數 , 我們就可以指定調用最新文章的數量 :當顯示於瀏覽器 , 您就可以看到最近的五篇文章列表
! y, R% b0 U# h# e$ r- n# ?2.2 短代碼中增加内容
我們可以繼續擴展我們的短代碼、新增一些內容作為參數 來傳遞, 例如"最新文章列表的標題"。 若要達成此目的 , 我們需要在返回函數中新增第二個參數$content , 並把它顯示在列表前面的一個 <h3> 標簽中。新的函數如下: - function recent_posts_function($atts, $content = null) {
$ _- y# h* }; c- ^( Q& e - extract(shortcode_atts(array(: `$ z) E) x- i6 w9 P
- 'posts' => 1,
/ |. U* P: D0 T: x; U& { - ), $atts));5 P) l3 m; ~- t! H
- 6 Q6 h9 x8 D9 P* e$ e
- $return_string = '<h3>'.$content.'</h3>';% i+ c$ x8 l& C; o8 u- W
- $return_string .= '<ul>';# ~6 z" P! K2 \
- query_posts(array('orderby' => 'date', 'order' => 'DESC' , 'showposts' => $posts));
! ]! r6 N4 C/ [( K/ o - if (have_posts()) :
5 C$ J' |" Y: A- B- a1 \ - while (have_posts()) : the_post();3 j- ^ t1 q) B1 B( I% H" N- \9 @ O
- $return_string .= '<li><a href="'.get_permalink().'">'.get_the_title().'</a></li>';
5 X" K- X6 o: \2 h - endwhile;
7 u0 Z/ I L$ ]5 k/ Y - endif;
. D, q0 a: V& q: ` d' R/ t - $return_string .= '</ul>';
& [" p. B$ M5 f9 d6 U+ |7 l' H' Y -
8 E' @3 r X3 I' k8 Q+ y - wp_reset_query();9 ?6 z3 U! n3 [. P$ l; h' \, o
- return $return_string;
m7 a4 b, f$ K7 j9 Q2 A3 v0 B - }
複製代碼 這種短代碼類似於一個HTML標簽:- [recent-posts posts="5"]This is the list heading[/recent-posts]
複製代碼 除了文章列表多了一個標題,其餘的內容和上一個示例是一樣的:
# x, N I5 ^* ~2 e7 O3. 在任何地方顯示短代碼 3.1 在側邊攔小工具中使用短代碼 預設情況下 , 側邊欄小工具是忽略短代碼的,您可以將此程式碼放在小工具
% v- L: ^# `/ Z" @: v* r( p我們可以採用一行程式碼來啟用這個函數 , 為了使側邊欄小工具支援短代碼 , 新增以下的程式碼 : - add_filter('widget_text', 'do_shortcode');
複製代碼 現在不需要修改任何其他地方 , 刷新頁面, 側邊欄將會正確地顯示
1 C" }8 H3 O. f8 x4 X# j2 c$ |同樣的,在評論中啟用短代碼: - add_filter( 'comment_text', 'do_shortcode' );
複製代碼 在摘要中啟用短代碼:- add_filter( 'the_excerpt', 'do_shortcode');
複製代碼 4. TinyMCE編輯器增加短代碼按鈕+ m- o; X# n! B8 g# Q) V
! z# V0 q& B! o9 T5 m
雖然短代碼可以方便的為文章增加動態內容,但是這對於普通用戶來說可能還是有點複雜,尤其是當參數比較多的時候。大多數用戶對於類HTML代碼並不熟悉,然而要使用短代碼,他們必須記住具體的語法與參數,因為即使是一個小小的語法錯誤,都可能導致意想不到的結果。要解決這個,我們可以給 TinyMCE編輯器增加一個按鈕,使用戶可以透過簡單的點擊來增加短代碼。建立這個按鈕僅需兩個步驟: - 為此按鈕建立一個 JS 檔案
- 註冊按鈕與JS文件
' E. [, B- R O" N7 s) H + M/ k# K# N/ D. V$ b/ f( y; f) t
4.1 透過JS文件來建立按鈕JS文件是透過 TinyMCE API 來註冊 TinyMCE 插件的。我們在主題的 js 目錄下(/wp-content/themes/你主題名稱/js/)建立 recent-posts.js ,並貼進去下面的代碼(需要把按鈕圖片檔(/wp-content/themes/你主題名稱/js/recentpostsbutton.png)也放在同一個目錄): - (function() {: H2 f" u2 N2 p! g
- tinymce.create('tinymce.plugins.recentposts', {3 U, H4 E% ]" w$ L. d7 ?, x
- init : function(ed, url) {3 ?/ [. v5 r4 I* |, ^9 _ z- n
- ed.addButton('recentposts', {& g6 j9 ]. Q; V2 T$ G
- title : 'Recent posts',
: w" o0 Z% j6 Q& | - image : url+'/recentpostsbutton.png',
& R6 I& c5 a% S* B1 D5 M - onclick : function() {
6 x5 _( v$ v4 e& P) g. B# A- n c - var posts = prompt("文章數量", "1");+ b$ g7 B" A( ^3 y5 S) z9 O
- var text = prompt("請填入列表標題", "最新文章");
* B$ Q; i- p3 y/ D: I# @ - ( n& r( W+ Q2 }; I6 `) t+ T9 z0 ?
- if (text != null && text != ''){
/ Z$ v, W" M, X4 P - if (posts != null && posts != '')
/ C5 s j$ Y: Q8 G9 G6 |9 T - ed.execCommand('mceInsertContent', false, '[recent-posts posts="'+posts+'"]'+text+'[/recent-posts]');
# ~: J, U0 G$ t0 b8 ^ - else
. j9 Z6 O( ]! }) T# ? - ed.execCommand('mceInsertContent', false, '[recent-posts]'+text+'[/recent-posts]');5 l. R* k4 q8 h! x* m
- }
/ Y2 c. p/ N: }" p+ o' z8 D - else{
) j0 h8 m) q( ~ - if (posts != null && posts != '')6 t0 y* l: p- |( d
- ed.execCommand('mceInsertContent', false, '[recent-posts posts="'+posts+'"]');
7 Q, r5 `1 W m - else
# H2 ]5 H! q4 f V - ed.execCommand('mceInsertContent', false, '[recent-posts]');5 I& D9 ^- ~; }- n
- }
0 @! n6 ?) q8 F5 y+ O! F - }* R, X7 W5 B/ n
- });5 N6 B- @# y p- |& C( j7 I" x* q
- },
; n& j5 M, F% ?. q. E& v& O& e - createControl : function(n, cm) {+ R- }0 Y l% r) i
- return null;
' b# s1 l' K; }+ R. ]# [( R - },# Q- U( Q$ }' Y( {- X
- getInfo : function() {/ b- i* f; n; l" a! a% N
- return {
, q& J: l& K, T/ ~+ _ - longname : "Recent Posts",- M2 t/ Q. ]) a2 u" v$ B5 a5 W
- author : 'Specs',! J [7 P' T [$ o
- authorurl : 'http://9iphp.com',4 _: D6 l/ M( M, O( d' W
- infourl : 'http://9iphp.com/opensystem/wordpress/1094.html',
! D V- M# y. w w( w - version : "1.0") _1 Y% o+ Y# S8 f, A
- };
: O3 }, ] m% n5 n: s3 G - }6 M7 E$ a% F! T6 \
- });
; e# }4 s" `) v+ _3 [9 A. B - tinymce.PluginManager.add('recentposts', tinymce.plugins.recentposts);
% P z. z ^0 T6 N - })();
複製代碼 我們透過呼叫 tinymce.create() 建立了一個插件。代碼中最重要的是 init() 函數,我們定義了一個名字,一個icon文件及 onclick() 事件處理程序。在 onclick() 函數的前兩行,依序彈出兩個對話框讓用戶輸入文章數量及列表標題兩個參數,然後根據用戶輸入,把短代碼插入到編輯器中。 最後,TinyMCE插件透過 add() 函數增加到 PluginManager。現在我們已經成功的整合了 [recent-posts] 短代碼到Wordpress中。
2 N9 B/ p. E6 B9 g
4.2 註冊按鈕及TinyMCE插件2 E1 L" Y% `+ ?7 L9 l
+ y: R( O9 n/ S$ U" ]& E 當您完成建立的JS 檔 , 我們現在需要註冊它和短代碼按鈕。 因此我們建立了兩個函數並把它們繫結至適當的 wordpress 過濾器中。 第一個叫做 register_button() 的函數把短代碼增加到按鈕陣列中,在現有按鈕和新按鈕之間增加分割線。 - function register_button( $buttons ) {
. s4 h& S- w3 Z# b3 @ - array_push( $buttons, "|", "recentposts" );
2 r8 k6 ^5 S3 U9 ~( e, }& c: w. c/ H5 g - return $buttons;$ N2 f9 A2 A. w1 c$ v
- }
複製代碼 第二個函數 add_plugin() 指定JS文件的路徑及文件名。; Y4 `0 E" J: {0 ?
- function add_plugin( $plugin_array ) {3 }2 @! w( Y1 [
- $plugin_array['recentposts'] = get_template_directory_uri() . '/js/recent-posts.js';
9 f: ]" O. c) ]6 G! N% B7 o7 d1 r - return $plugin_array;
) }( O" R- p, d7 e2 ?5 n! t3 A - }
複製代碼 下一步是增加包含前面兩個函數的過濾器。register_button() 函數連結到 mce_buttons 過濾器,這個會在編輯器載入插件的時候執行; add_plugin() 函數連結到 mce_external_plugins 過濾器,當載入按鈕的時候執行。- z4 ]5 [ h5 f
- function my_recent_posts_button() { 8 Q# Y) a) t0 W/ G
- if ( ! current_user_can('edit_posts') && ! current_user_can('edit_pages') ) {
6 w& U& L% }, L$ ]' M) f+ R, ? - return;% R7 n2 @( M7 N6 t! _( A
- }1 }8 V* F p, u0 W' C
- 4 t2 ^! K8 P2 P
- if ( get_user_option('rich_editing') == 'true' ) {
# A1 Y. o7 G) u$ o' E - add_filter( 'mce_external_plugins', 'add_plugin' );
" _ O- m" f# @( Q% ]) _ - add_filter( 'mce_buttons', 'register_button' );
# y' s, ~ H6 d* g6 O7 m4 V$ R - } # m; i. V7 F+ Z! Z
- }
複製代碼 當用戶沒有對文章可視化編輯器中編輯的權限時,前面的函數不會執行。
x- Y% C. A) [; l" Y; ^最後把函數勾到Wordpress初始化函數- add_action('init', 'my_recent_posts_button');
複製代碼 ' {2 ?- p* ]" f. t( \2 R- A( Y6 ]
4.3 按鈕的用法 h x! |' \7 @ P
為了測試程式碼是否正確,我們打開一篇新的文章,這時一個我們剛剛定義的按鈕是不是已經出現在第一行的末尾了?如下圖所示:
, |: P. {7 F: b( r 點擊按鈕的時候,會彈出對話框讓我們輸入文章的數量:
3 I; z* r# g9 [( ]+ @1 ] 輸入完點擊確定後,會彈出第二個對話框,讓我們輸入列表的標題:
. t5 E% P, V7 {: u2 h0 w# p 參數留空的話,不會出現在最後的代碼中。最後,短代碼會新加到編輯器中:
" [0 Z7 E. Y( v% z; B) K; N9 R
到此就大功告成了。想要增加其他功能的短代碼及按鈕可以參考上面的教學,如法炮製舉一反三,相信可以製作出符合各位需求的短代碼功能。 |