WordPress 編輯器自訂按鈕(文字模式)

以前寫報告常因應報告格式自訂一些範本,需要什麼類型的報告依樣套用;有時候使用文字模式編輯 WordPress 文章也常有一些重覆輸入文字或語法格式的情況,心想若編輯器也能有這種一鍵輸入的功能就好了。

查看了編輯器文字模式的諸多 HTML 標籤碼的快速輸入按鈕,心想若能自訂按鈕功能就好了。到 wordpress.org 官網搜尋 [ MCE custom button ] 關鍵字,找到這一篇,裡面提到了 Quicktags API,看樣子就是了。

■ 語法參數:

QTags.addButton( id, display, arg1, arg2, access_key, title, priority, instance );
其中,前三項 id, display, arg1 是必要參數,後面幾項可省略。

■ 常用參數:

QTags.addButton( id, display, arg1, arg2 );
QTags.addButton( '按鈕ID', '按鈕顯示名稱', '引數1', '引數2' );

  1. id - 按鈕內部名稱,取個容易區分、看了就懂的名稱即可。
  2. display - 按鈕顯示名稱,例如 當中見到的 img、code 等文字都是 display。
  3. arg1/arg2 - 要快速輸入的引數字串,一般使用 arg1 就夠了,若需要首尾區分,再搭配 arg2。這時,按一下輸入 arg1,按第二下輸入 arg2,第三下又回到 arg1,……。

■ 使用注意:

  1. 單雙引號運用。由於一般字串經常含括在雙引號 ” ” 中,因此我們可以把參數以單引號 ‘ ‘ 含括,相互套用,可區分內外層次:
    QTags.addButton( '參數1', 參數2', '參數3', '參數4', ... );
  2. 脫逸字元運用。在 ‘ ‘ 單引號中的字串參數,某些字元常須搭配反斜線 \ 才能正常使用。例如常用的 Javascript 標籤有雙引號 ” ” 和斜線 / 就必須這樣用:
    '<script type=\"text/javascript\">'
    '<\/script>'
  3. 斷行字元運用。既然是按鈕輸入字串,當然可能要斷行,這時斷行字元 \n 就用上了。
    '這是第一行,\n這是第二行。',輸出結果就能斷行:
    這是第一行,
    這是第二行。
  4. 定位字元應用。至於區分層次的定位鍵 Tab,就要使用定位字元 \t。
    '\t定位到四個半形空白之後。',輸出結果如下:
        定位到四個半形空白之後。

■ 啟用功能:

在使用主題或子主題中的 functions.php 加入功能碼:

// add more buttons to the html editor
function appthemes_add_quicktags() {
    if (wp_script_is('quicktags')){
?>
    <script type="text/javascript">
     QTags.addButton( 'ez_js', '插入js首尾', '<script type=\"text/javascript\">\n\n', '<\/script>\n\n' );
     QTags.addButton( 'ez_tx', '插入常用字串', '這是第一行,\n這是第二行。\n\n\t定位到四個半形空白之後。' );
</script>

<?php
    }
}
add_action( 'admin_print_footer_scripts', 'appthemes_add_quicktags' );

這樣之後,輸入字串就省事多了。

發佈留言

發佈留言必須填寫的電子郵件地址不會公開。 必填欄位標示為 *