52AV手機A片王|52AV.ONE

標題: WordPress自定義短代碼Shortcode以及產生編輯器短代碼按鈕 [打印本頁]
作者: IT_man    時間: 2016-6-9 12:40
標題: WordPress自定義短代碼Shortcode以及產生編輯器短代碼按鈕
WordPress自定義短代碼Shortcode以及產生編輯器短代碼按鈕(shortcode button)
- L! m, _9 a2 c) C% G, c* j( T9 u, f7 n/ B. \  c
wordpress Shortcode即wordpress短代碼功能是在wordpress 2.5版本開始被引入，用户透過wordpress短代碼可以非常方便快速地在編輯文章或頁面的時候插入動態内容，短代碼的常見應用有插入最新文章、插入廣告、插入音樂視訊、插入下載按钮等。Blog請别人制作wordpress模板時，透過wordpress Shortcode實現了page頁面動態插入不同的幻灯片。
7 H- G1 p7 |) j  J! T以下是 wordpress 短代碼的詳细介紹及進階應用。$ A9 H# g) \1 x) X, D; V
% `# |" o; F  j8 F9 k& J! k+ O% J
短代碼的 wordpress 使用非常簡單。 例如我們想要顯示為指定最近的文章 , 我們可以使用的程式碼類似於下列 :
, a3 C1 N* }1 x) \: X
  1. [recent-posts]
複製代碼
此外 , 我們可以設定一個參數來控制文章的數量 :* P( M9 h5 U' S" J  X2 s
  1. [recent-posts posts="5"]
複製代碼
此外 , 我們也可以為文章列表新增一個標題 :
' D) V/ d  q) ~6 J. Z0 z! o, n& X
  1. [recent-posts posts="5"]Posts Heading[/recent-posts]
複製代碼
. ]7 H4 n8 X! s9 O4 F8 N

4 r4 D0 u. o: M2 D' T+ A% X3 ^1. 簡單的短代碼
1 B4 P+ Q, ]9 S9 U, c+ X本教學的第一部分 , 我們會建立下列短代碼的程式碼 :* _. i' v# ^1 A% S3 @8 |/ n; _5 Q
  1. [recent-posts]
複製代碼
該程序的建立是非常簡單並且不需要非常進階 PHP 知識。 建立過程如下 :# M3 p' _( H/ ~3 w$ a

' @; G2 ?  O& u+ C本教學所有程式碼將會直接放到function.php(控制台==>外觀==>主題編輯器==>function.php) ,也可以放在一個被包含在function.php的單獨的php檔案中。
. I) `; y* }, R3 E: n, V1.1 建立返回函數% c  ]( c" F3 ]& M- }
當發現短代碼的時候，它會被一個稱作返回函數的一段代碼所代替，所以我們先建立一個函數，從資料庫中獲取最新的文章。
3 C' `, U! q% F0 A
  1. function recent_posts_function() {4 s2 V4 \9 I; Z& E
  2.         query_posts(array('orderby' => 'date', 'order' => 'DESC' , 'showposts' => 1));! o* I- Y3 h" ?3 v
  3.         if (have_posts()) :
    ) \  F; T  w7 h' h5 ?* x: L$ d- t
  4.                 while (have_posts()) : the_post();! S3 L, y) t: }* p5 B% V( M
  5.                         $return_string = '<a href="'.get_permalink().'">'.get_the_title().'</a>';
    9 N! |- u9 p7 V' A& M# Y, F
  6.                 endwhile;: }5 k' k  P! M9 @. d3 Y# I3 q
  7.         endif;" R/ p: d5 l- Z- T  I( o2 B
  8.         wp_reset_query();
    4 m- z8 M; g& ?7 l0 a  Y6 ]* ?% Z
  9.         return $return_string;: J" |& }' n' U$ A: @; a
  10. }
複製代碼
如上所示，我們查詢資料庫，獲取最新的文章，並返回一個帶有鏈接的字串。值得註意的是，返回函數並不印任何內容，而是返回一個字串。
; v5 h/ G: M5 J: k2 a: I/ X, p0 ^" {/ u7 i. S9 q% X; M" K* _& g
/ m% K& r( A/ r* i3 X
1.2 註册短代碼
2 d; v' \2 g! U現在，我們告訴Wordpress這個函數是一個短代碼：
  1. function register_shortcodes(){; w! `, G$ M7 f
  2.         add_shortcode('recent-posts', 'recent_posts_function');7 M4 B) o9 |9 c+ A: t1 R) \
  3. }
複製代碼
當在文章的內容中使用短代碼
& A1 x, H7 S$ s, [; t: b
  1. [recent-posts]
複製代碼
將會自動呼叫 recent_posts_function() 函數，我們需要確保短代碼的名字是唯一的，以避免重複。; U* c( [) k0 b& ~9 a; {+ \
; ?9 H  `! W0 j# ]( q9 ?4 O5 q0 t  }
: o. J, R2 h0 C* j4 @7 L$ L
1.3 Hook into WordPress0 s7 b; Z- A' {* j

- Q* f/ x5 W9 `. T& D0 d! L0 ?! l為了能夠執行 recent_posts_function() 函數，我們需要把它綁定在 WordPress 的初始化鉤子中。
& R9 S4 z  {2 H# c
  1. add_action( 'init', 'register_shortcodes');
複製代碼

- `  x  @0 l9 g5 G1.4 測試短代碼4 }# @- q8 w2 B
簡單的短代碼已設定 , 我們現在需要測試是否能正常執行。 我們可以建立新文章 ( 或開啟現有 ) , 將下列代碼加到文章內容的某個位置 :
  1. [recent-posts]
複製代碼
2. 進階短代碼
2.1 短代碼参數
短代碼是非常有彈性 , 因為它讓我們加入參數可讓它們有更多的功能。 假設我們必須要顯示某一特定數量的最新的文章。 為了達到這個目的 , 我們需要給短代碼指定其他選項以顯示最近的文章數。
我們需要使用兩個函數 ,第一個是內建在 wordpress 的shortcode _ atts ( ) 函式 , 它把用戶的短代碼屬性與本地屬性結合在一起 , 並填入到想要的位置。 第二個是 PHP的extract() 函数 , 顧名思義 , 它萃取出短代碼中的各個屬性。
展開我們的返回功能 , 我們新增一個參數 $atts, 它是一個陣列,從中可以提取到我們需要的文章數。 我們查詢資料庫來取得指定數目的文章 , 並傳回一個列表 :
  1. function recent_posts_function($atts){. J, u) A. ]" f+ q
  2.         extract(shortcode_atts(array($ }2 A9 {  f( G) G% R' I
  3.                 'posts' => 1,% ?' A; Y  o# D( c2 }) f) `
  4.         ), $atts));1 S. s+ Y% A; @4 h1 X

  5. 6 f$ O3 O7 s* @5 Q1 j$ I
  6.         $return_string = '<ul>';0 M0 l' ~3 M3 X, S5 Z9 |
  7.         query_posts(array('orderby' => 'date', 'order' => 'DESC' , 'showposts' => $posts));. @7 C4 L5 L3 H8 u( j
  8.         if (have_posts()) :# \" G) H0 h9 v; z1 A
  9.                 while (have_posts()) : the_post();+ ]$ P& K7 `" `
  10.                         $return_string .= '<li><a href="'.get_permalink().'">'.get_the_title().'</a></li>';
    % ^1 h2 T* U- x9 B& ~. u/ k
  11.                 endwhile;4 ]# v; D! R5 a% F9 N/ }" \: T
  12.         endif;
    ( K) y2 b2 x, c3 x" X9 q& d
  13.         $return_string .= '</ul>';
    ' r, \  ]: ?' q5 a7 ~9 d' ^, I
  14. ) Z0 n5 Z+ w1 @) a4 \$ l' W
  15.         wp_reset_query();2 G9 c0 E$ N) P6 {3 h
  16.         return $return_string;- x& [( `0 l: }7 K) x" r3 }3 L
  17. }
複製代碼
如果使用者未指定此選項 , 1 將是預設值。 我們可以加入多個屬性使短代碼接受更多的參數。 使用這項強化函數 , 我們就可以指定調用最新文章的數量 :
  1. [recent-posts posts="5"]
複製代碼
當顯示於瀏覽器 , 您就可以看到最近的五篇文章列表

( F! C( s( \! o) S$ C2.2 短代碼中增加内容
我們可以繼續擴展我們的短代碼、新增一些內容作為參數 來傳遞, 例如"最新文章列表的標題"。 若要達成此目的 , 我們需要在返回函數中新增第二個參數$content , 並把它顯示在列表前面的一個 <h3> 標簽中。新的函數如下：
  1. function recent_posts_function($atts, $content = null) {. r0 v" F1 \8 b
  2.         extract(shortcode_atts(array(3 k, A1 \' a) W( ~# y  b/ c
  3.                 'posts' => 1,6 n3 o* \* f! E* ~
  4.         ), $atts));
    $ n, }6 y% \( i( e, _

  5. / r  @  V( j: o" V+ H
  6.         $return_string = '<h3>'.$content.'</h3>';7 b- F2 t0 q! l2 R; }7 i
  7.         $return_string .= '<ul>';/ U5 ?) A4 B, z' V* \
  8.         query_posts(array('orderby' => 'date', 'order' => 'DESC' , 'showposts' => $posts));) ~* G7 Y; i4 `! H6 M
  9.         if (have_posts()) :
    * S2 B8 n# j: [- U2 D/ D8 p' [
  10.                 while (have_posts()) : the_post();/ w1 x+ K9 |2 o7 Q5 N7 H
  11.                         $return_string .= '<li><a href="'.get_permalink().'">'.get_the_title().'</a></li>';  k9 K6 y' U# t( c4 h1 ?* P- ]
  12.                 endwhile;
    ! W! D' N5 g. E( l
  13.         endif;2 p( I- Z  \$ u& N1 R) {
  14.         $return_string .= '</ul>';
    ( P9 u% C% q# c5 ?& n

  15. 3 {1 y. O8 [7 x! y- \. [
  16.         wp_reset_query();0 C0 y3 M: Y, T, p6 n
  17.         return $return_string;
    % \  R+ t5 g/ S  t# h9 Q$ R% T/ [$ w
  18. }
複製代碼
這種短代碼類似於一個HTML標簽：
  1. [recent-posts posts="5"]This is the list heading[/recent-posts]
複製代碼
除了文章列表多了一個標題，其餘的內容和上一個示例是一樣的：

  M2 e5 s1 n6 V6 Q1 l% e0 g$ G4 h
3. 在任何地方顯示短代碼
3.1 在側邊攔小工具中使用短代碼
預設情況下 , 側邊欄小工具是忽略短代碼的，您可以將此程式碼放在小工具
5 V1 P: N) m) `$ ^$ i1 L; s
我們可以採用一行程式碼來啟用這個函數 , 為了使側邊欄小工具支援短代碼 , 新增以下的程式碼 :
  1. add_filter('widget_text', 'do_shortcode');
複製代碼
現在不需要修改任何其他地方 , 刷新頁面, 側邊欄將會正確地顯示

" V& O# D- f1 n' {* g
同樣的，在評論中啟用短代碼：
  1. add_filter( 'comment_text', 'do_shortcode' );
複製代碼
在摘要中啟用短代碼：
  1. add_filter( 'the_excerpt', 'do_shortcode');
複製代碼
4. TinyMCE編輯器增加短代碼按鈕3 ]" }1 f' A3 `) h3 R

5 a9 U6 V+ \' E* y1 ?- C: f雖然短代碼可以方便的為文章增加動態內容，但是這對於普通用戶來說可能還是有點複雜，尤其是當參數比較多的時候。大多數用戶對於類HTML代碼並不熟悉，然而要使用短代碼，他們必須記住具體的語法與參數，因為即使是一個小小的語法錯誤，都可能導致意想不到的結果。
要解決這個，我們可以給 TinyMCE編輯器增加一個按鈕，使用戶可以透過簡單的點擊來增加短代碼。建立這個按鈕僅需兩個步驟：

4 J% q' P3 I, I- ?5 _# v4.1 透過JS文件來建立按鈕
JS文件是透過 TinyMCE API 來註冊 TinyMCE 插件的。我們在主題的 js 目錄下(/wp-content/themes/你主題名稱/js/)建立 recent-posts.js ，並貼進去下面的代碼（需要把按鈕圖片檔(/wp-content/themes/你主題名稱/js/recentpostsbutton.png)也放在同一個目錄）：
  1. (function() {
    1 e! J" Q+ d* \+ q* a9 e! m
  2.         tinymce.create('tinymce.plugins.recentposts', {: V* \; s/ y* R+ T7 \- R4 T
  3.                 init : function(ed, url) {
    $ j5 K5 T, I) j7 f/ D- ^) Y9 v; ?% f
  4.                         ed.addButton('recentposts', {0 x4 D/ G6 q8 ~, U1 g& t; L
  5.                                 title : 'Recent posts',. i. V$ L! x+ m% g7 @- x+ S: t
  6.                                 image : url+'/recentpostsbutton.png',8 U$ v/ K; F3 U6 k. \! c( K
  7.                                 onclick : function() {
    ( h9 }1 {/ M' V  c" i
  8.                                         var posts = prompt("文章數量", "1");8 q+ }2 k5 L( y
  9.                                         var text = prompt("請填入列表標題", "最新文章");3 v1 V' e  b, |$ |- z) K

  10. 9 L8 u! z+ P& F9 @
  11.                                         if (text != null && text != ''){
      X. b' T  E) B$ N0 e; `$ G6 h
  12.                                                 if (posts != null && posts != '')+ F9 `4 h! J! e  a) X# t- Y
  13.                                                 ed.execCommand('mceInsertContent', false, '[recent-posts posts="'+posts+'"]'+text+'[/recent-posts]');
    . ~, Z: ~% j6 M
  14.                                         else0 A& t. P8 c" M
  15.                                                 ed.execCommand('mceInsertContent', false, '[recent-posts]'+text+'[/recent-posts]');8 n  d2 j, c* e' Z7 v# w8 {  u. R
  16.                                         }& ]# i& u! c& a3 a" _1 k
  17.                                         else{" t- Q* z0 ~+ p9 |) ^8 @
  18.                                                 if (posts != null && posts != ''); h9 f  ~' ~4 J2 ^( I
  19.                                                         ed.execCommand('mceInsertContent', false, '[recent-posts posts="'+posts+'"]');
    0 }5 |; \9 W0 T8 @5 k
  20.                                                 else
    % W/ H, D% f; A
  21.                                                         ed.execCommand('mceInsertContent', false, '[recent-posts]');
    # Y, v5 i. D2 }* |4 R# z7 f
  22.                                         }4 E" c  w6 ?+ u  H# U3 [
  23.                                 }& j5 H1 n4 {1 g) t  M; w
  24.                         });
    # `9 n, J+ C/ Q; F$ Q4 B
  25.                 },3 u+ V# o* ]# K& ?9 [1 _
  26.                 createControl : function(n, cm) {
    6 {( D- N1 o; d
  27.                         return null;
    - [+ m2 r6 I% ]  S9 ~4 k1 _3 |  N
  28.                 },& ~- {6 Z6 `7 l+ j+ r2 K2 u8 L/ S
  29.                 getInfo : function() {
    $ U& W4 S4 C+ B$ q
  30.                         return {
    1 ^9 o! p% w! ]' ~' v( c, _
  31.                                 longname : "Recent Posts",
    6 x8 e0 T2 }- {& U- l/ J
  32.                                 author : 'Specs',2 i& u3 _) d9 B7 h# R& e, h
  33.                                 authorurl : 'http://9iphp.com',
    # I, }! H: r1 l, U9 R3 x
  34.                                 infourl : 'http://9iphp.com/opensystem/wordpress/1094.html',) @( U- P  Z: ~( f$ @: R
  35.                                 version : "1.0"4 D0 A! d( J- N2 y& F
  36.                         };
    1 M* W% s) b& O$ C$ y
  37.                 }
    ) f; m8 ]1 i: ^# A6 z
  38.         });! C) w- d* y, b. Z" r
  39.         tinymce.PluginManager.add('recentposts', tinymce.plugins.recentposts);
    : K: g6 l6 ~' {0 L2 P2 ?% L
  40. })();
複製代碼
我們透過呼叫 tinymce.create() 建立了一個插件。代碼中最重要的是 init() 函數，我們定義了一個名字，一個icon文件及 onclick() 事件處理程序。
在 onclick() 函數的前兩行，依序彈出兩個對話框讓用戶輸入文章數量及列表標題兩個參數，然後根據用戶輸入，把短代碼插入到編輯器中。
最後，TinyMCE插件透過 add() 函數增加到 PluginManager。現在我們已經成功的整合了 [recent-posts] 短代碼到Wordpress中。

& \0 U& o% S) \; \* k
4.2 註冊按鈕及TinyMCE插件
8 j  `- A0 Q9 ^7 J1 R2 u8 I. U1 A" R  S' w" y
當您完成建立的JS 檔 , 我們現在需要註冊它和短代碼按鈕。 因此我們建立了兩個函數並把它們繫結至適當的 wordpress 過濾器中。
第一個叫做 register_button() 的函數把短代碼增加到按鈕陣列中，在現有按鈕和新按鈕之間增加分割線。
  1. function register_button( $buttons ) {
    6 G5 X$ O' h$ @, y$ ^
  2.         array_push( $buttons, "|", "recentposts" );# x6 X, M$ ~' `; ]5 E5 A
  3.         return $buttons;
    . m' m" M/ V7 a- Z/ m
  4. }
複製代碼
第二個函數 add_plugin() 指定JS文件的路徑及文件名。
/ x9 p5 s7 N  a' W1 f
  1. function add_plugin( $plugin_array ) {
    9 G" r3 }$ f* b# i
  2.         $plugin_array['recentposts'] = get_template_directory_uri() . '/js/recent-posts.js';
    8 D. Q# ~: o) W, e9 d/ r) u+ p
  3.         return $plugin_array;3 Y; i4 z3 \) O+ w& l
  4. }
複製代碼
下一步是增加包含前面兩個函數的過濾器。register_button() 函數連結到 mce_buttons 過濾器，這個會在編輯器載入插件的時候執行； add_plugin() 函數連結到 mce_external_plugins 過濾器，當載入按鈕的時候執行。
! \; {' _& Q! a2 h- O/ r: ^) i: r" c
  1. function my_recent_posts_button() {
    ( \! g- A% ~- Y! H) g! J+ _
  2.         if ( ! current_user_can('edit_posts') && ! current_user_can('edit_pages') ) {
    2 U' x2 r& H* X$ S6 c, `
  3.                 return;/ ]$ _: ]2 U  w( c
  4.         }% J, m: g8 _3 s- q( P

  5. , z2 W2 E+ P- }
  6.         if ( get_user_option('rich_editing') == 'true' ) {" J0 f9 Z$ W6 s/ i
  7.                 add_filter( 'mce_external_plugins', 'add_plugin' );0 n! q# M+ I  Q# r* }% x
  8.                 add_filter( 'mce_buttons', 'register_button' );: \" f( M, M) k  `& h2 |! y
  9.         } 4 }9 h4 j2 b, b0 }
  10. }
複製代碼
當用戶沒有對文章可視化編輯器中編輯的權限時，前面的函數不會執行。
* I) ]8 G9 A+ E( _最後把函數勾到Wordpress初始化函數
  1. add_action('init', 'my_recent_posts_button');
複製代碼
& J& _5 G- t$ C# T/ P- q5 _
4.3 按鈕的用法

9 E, N/ \' r& ~. m" Q
為了測試程式碼是否正確，我們打開一篇新的文章，這時一個我們剛剛定義的按鈕是不是已經出現在第一行的末尾了？如下圖所示：
/ v. r4 u0 j2 y: \& M" d5 [
點擊按鈕的時候，會彈出對話框讓我們輸入文章的數量：

3 H& U; X. Z. f+ Q9 ~
輸入完點擊確定後，會彈出第二個對話框，讓我們輸入列表的標題：

1 g' C; Y/ B. {. X8 ^3 y, V
參數留空的話，不會出現在最後的代碼中。最後，短代碼會新加到編輯器中：
9 a8 r. O* [. S# l0 V2 n
到此就大功告成了。想要增加其他功能的短代碼及按鈕可以參考上面的教學，如法炮製舉一反三，相信可以製作出符合各位需求的短代碼功能。
參考文章: 1 2




歡迎光臨 52AV手機A片王|52AV.ONE (https://www.itech.casa/) Powered by Discuz! X3.2