「mce_buttons」及び「mce_external_plugins」は共にフィルターフックで、WordPressのビジュアルエディタに新たなボタンを追加する時に利用されます。
ボタン追加の流れ
ビジュアルエディタに新たなボタンを付け加える為には下記の3つの処理を行う必要があります。
①追加するボタンの名前を定義します。
追加するボタンの場所により「mce_buttons」、「mce_buttons_2」、「mce_buttons_3」のフィルターフックが用意されています。
②ボタンの処理を行うJavaScriptファイルを指定します。
「mce_external_plugins」とういうフィルターフックでファイルを指定します。
③JavaScriptファイルに下記を記述します。
■ボタンの名前に所に表示する画像ファイルを指定します。
■上記の画像がクリックされた時の動作を記述します。
メモ
ビジュアルエディタの中で行う操作は、あくまでの表示されたデバイスの中で行う操作なので、Webサーバとは無関係です。
よってこの動作はphpではなく、JavaScriptで記述する必要があります。
フィルターフック：mce_buttonsとは
「mce_buttons」は、下図のビジュアルエディタの一段目のボタンリストをカスタマイズする為のフィルターフックです。
二段目に追加する場合は「mce_buttons_2」
三段目に追加する場合は「mce_buttons_3」を使います。
＜サンプルプログラム＞
function add_icon($buttons) { $buttons[] = 'media-default'; // media-defaultという名前のアイコン名を追加します。 return $buttons;} add_filter( 'mce_buttons', 'add_icon' );
上記は一段目の後ろに「media-default」という名前のアイコンを定義した例です。
①引数で現在のボタン配列（$buttons）を取得します。
②配列の最後に「media-default」という名前を追加します。
③ボタン配列を返します。
フィルターフック：mce_external_pluginsとは
「mce_external_plugins」は、ボタンの画像と動作を記述しているJavaScriptファイルを指定するフィルターフックです。
＜サンプルプログラム＞
function plugins_directory($plugin_array) { $plugin_array['custom_button_script'] = get_stylesheet_directory_uri()."/icon/tinymce.js"; return $plugin_array;} add_filter( 'mce_external_plugins', 'plugins_directory' );
上記は「tinymce.js」というJavaScriptファイルの場所を指定したサンプルです。
①引数で現在のスクリプト一覧を取得します。
②その配列の中の「custom_button_script」という変数に、利用するJavaScriptのファイル名を指定します。
上記の例では子テーマフォルダの中にあるiconフォルダの中にある「tinymce.js」ファイルを指定しています。
③スクリプト一覧を戻します。
JavaScriptに書く内容
①即時関数形式で書く
(function(window) { ここに処理を書く})(window);
上記の書き方は即時関数形式と呼ばれています。
これは、関数定義と実行を合わせて行う関数という事です。
{}の中にボタンの画像とボタンクリック時の動作を記述（関数定義）した後、この関数を実行してボタン画像を表示（実行）します。
下記の様な書き方もでき、この書き方が一般的です。
(function() { ここに処理を書く})();
②具体的なサンプルプログラム
(function() { tinymce.create('tinymce.plugins.MyButtons', { //関数tinymce.plugins.MyButtonsの宣言 init : function(ed, url) { // ed にはエディタの情報,urlにはこのJsファイルまでのパスが入る ed.addButton( 'media-default', { //mce_buttonsで設定したボタン名 title : 'media-default', // マウスオーバー時にボタンのタイトル image : url + '/media-default.png', // ボタン画像のパス cmd: 'media-default_cmd' // ボタンの処理プログラム名 }); ed.addCommand( 'media-default_cmd', function() { //ボタン定義で指定したプログラム名 return_text = '<span class="dashicons dashicons-media-default"> </span> ';//返り値のセット ed.execCommand('mceInsertContent', 0, return_text); //返り値の実行 }); }, }); tinymce.PluginManager.add( 'custom_button_script', tinymce.plugins.MyButtons ); //関数を実行して書き込む })();
上記はダッシュアイコン をメニュに表示して、文書の中に入れられるようにしたプログラムです。
尚、iconフォルダの中には下記にファイルがある事が前提です。
①media-default.png
②tinymce.js
尚、このサイトで使っている具体的なプログラムは下記のドキュメントを参照してください。