在前面的短程式碼應用教程中，可以透過短程式碼來做一些重複的事情，比如你希望在文章內某位置新增廣告、情景：有時候我們需要新增一些固定的內容，比如你希望在每篇文章內新增廣告，你可以用一個短程式碼來實現，比如建立一個段程式碼 [myadvert] 來輸出一個固定好的廣告，不過有的人還是嫌麻煩，或者不會英語，寫了短程式碼也記不住，那可以考慮給 WordPress 預設編輯器新增一個自定義的按鈕，點選按鈕，自動插入你需要的內容。

文章參考自：http://www.tutorialchip.com/WordPress/WordPress-shortcode-tinymce-button-tutorial-part-2/

效果：

我們要新增一個自定義的按鈕 「谷歌廣告」，當我們點選這個按鈕的時候，自動插入我們需要的內容，插入的內容自定，你可以直接插入廣告程式碼，也可以插入一個短程式碼。

步驟一、新增以下程式碼到 functions.php

  1. //初始化時執行 myadvert_button 函式   
  2. add_action('init', 'myadvert_button');   
  3. function myadvert_button() {   
  4.     //判斷使用者是否有編輯文章和頁面的許可權   
  5.     if ( ! current_user_can('edit_posts') && ! current_user_can('edit_pages') ) {   
  6.         return;   
  7.     }   
  8.     //判斷使用者是否使用視覺化編輯器   
  9.     if ( get_user_option('rich_editing') == 'true' ) {   
  10.   
  11.         add_filter( 'mce_external_plugins', 'add_plugin' );   
  12.         add_filter( 'mce_buttons', 'register_button' );   
  13.     }   
  14. }  

步驟二：新增上面過濾器中的兩個函式

  1. function register_button( $buttons ) {   
  2.     array_push( $buttons, "|", "myadvert" ); //新增 一個 myadvert 按鈕   
  3.     //array_push( $buttons, "|", "mylink" ); //新增一個 mylink 按鈕   
  4.   
  5.     return $buttons;   
  6. }   
  7. function add_plugin( $plugin_array ) {   
  8.    $plugin_array['myadvert'] = get_bloginfo( 'template_url' ) . '/js/myadvert.js'; //myadvert 按鈕的 js 路徑   
  9.    //$plugin_array['mylink'] = get_bloginfo( 'template_url' ) . '/js/mylink.js'; //mylink 按鈕的 js 路徑   
  10.    return $plugin_array;   
  11. }  

上面的程式碼中 mylink 按鈕的程式碼被註釋掉了，如果需要新增多個按鈕，可按照類似的方法新增。

步驟三、準備 js 檔案

步驟二中 add_plugin 函式中引入了 js，根據路徑建立好 js 檔案，以 myadvert.js 為例，新增下列程式碼：

  1. (function() {   
  2.     tinymce.create('tinymce.plugins.myadvert', { //注意這裡有個 myadvert   
  3.         init : function(ed, url) {   
  4.             ed.addButton('myadvert', { //注意這一行有一個 myadvert   
  5.                 title : '谷歌廣告',   
  6.                 image : url+'/google.png', //注意圖片的路徑 url 是當前 js 的路徑   
  7.                 onclick : function() {   
  8.                      ed.selection.setContent('[myadvert]'); //這裡是你要插入到編輯器的內容，你可以直接寫上廣告程式碼  
  9.     
  10.                 }   
  11.             });   
  12.         },   
  13.         createControl : function(n, cm) {   
  14.             return null;   
  15.         },   
  16.     });   
  17.     tinymce.PluginManager.add('myadvert', tinymce.plugins.myadvert); //注意這裡有兩個 myadvert   
  18. })();  

js 需要對應修改的地方都有註釋，請看清。

尋找圖示，可以到 http://findicons.com/icon/16046/link?id=16153 搜尋。