在前面的短代碼應用教程中，可以通過短代碼來做一些重複的事情，比如你希望在文章內某位置添加廣告、情景：有時候我們需要添加一些固定的內容，比如你希望在每篇文章內添加廣告，你可以用一個短代碼來實現，比如建立一個段代碼 [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 搜尋。