2024年06月14日
ビジュアルエディタにアイコンボタンを追加する方法
下図の赤枠の中がビジュアルエディタに追加したアイコンボタンです
■メニュの1段目に4つのアイコンが追加されています。
■上記のアイコンをクリックすると、ダッシュアイコンのコードが追加されて、上記のアイコンが文書に追加されます。
上図の様なアイコンボタンを追加する流れは下記になります。
3.ボタン処理を行うJavaScripのファイルの場所をフィルターフックで指定します。
4.JavaScriptでアイコンをクリックした時の処理を記述します。
それでは具体的な設定を解説していきます。
1.追加するアイコンボタンの画像を作成します。
テーマフォルダの中に「icon」というフォルダを作成し、この中に下記の様な画像ファイルを作成しています。
■上記の「tinymce.js」はJavaScriptファイルで3項及び4項で解説します。
＜対応表＞
| ファイル名 | 画像 | 備考（クリックされた時に書かれるコード） |
| media-default.png | | <span class=”dashicons dashicons-media-default“></span> |
| welcome-write-blog.png | | <span class=”dashicons dashicons-welcome-write-blog“></span> |
| edit.png | | <span class=”dashicons dashicons-edit“></span> |
| clock.png | | <span class=”dashicons dashicons-clock“></span> |
＜画像作成時の注意点＞
①画像サイズ：200×300px位の画像
②背景色：#f5f5f5
画像はGIMP等の画像編集ソフトで作成して下さい。
2.追加するボタンの名前をフィルターフックで指定します。
ボタン名称の登録はFilterフック：mce_buttonsを利用します。
[functions.php]に下記プログラムを記述します
function add_icon_buttons($buttons) {
$buttons[] = 'media-default'; // media-defaultアイコン
$buttons[] = 'welcome-write-blog'; // welcome-write-blogアイコン
$buttons[] = 'edit'; // editアイコン
$buttons[] = 'clock'; // clockアイコン
return $buttons;}
add_filter( 'mce_buttons', 'add_icon_buttons' );
■上記で指定しているのは、ボタンの名前だけです。
■7行目の'mce_buttons'は、1段目に追加する事を意味しています。
2段目に追加する場合は'mce_buttons_2'を指定します。
3.ボタン処理を行うJavaScripのファイルの場所をフィルターフックで指定します。
ボタン処理のjavascriptファイルの登録はFilterフック：mce_external_pluginsを利用します。
[functions.php]に下記プログラムを記述します。
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' );
■上記で指定しているのは、ボタン処理を行うスクリプトがある場所を指定しています。
上記は「icon」というフォルダの「tinymce.js」を見なさい！と指定しています。
4.JavaScriptでアイコンをクリックした時の処理を記述します。
最後にボタンがクリックされた時の処理を「tinymce.js」の中に記述します。
(function() {
tinymce.create('add.buttons', {
init : function(ed, url) {
ed.addButton( 'media-default', { // [media-default]のボタン情報
title : 'media-default', // ボタンのタイトル
image : url + '/media-default.png', // ボタン画像のパス
cmd: 'media-default_cmd' // ボタンの処理プログラムの名前
});
ed.addButton( 'welcome-write-blog', { // [welcome-write-blog]のボタン情報
title : 'welcome-write-blog',
image : url + '/welcome-write-blog.png',
cmd: 'welcome-write-blog_cmd'
});
ed.addButton( 'edit', { // [edit]のボタン情報
title : 'edit',
image : url + '/edit.png',
cmd: 'edit_cmd'
});
ed.addButton( 'clock', { // [dashicons-clock]のボタン情報
title : 'clock',
image : url + '/clock.png',
cmd: 'clock_cmd'
});
ed.addCommand( 'media-default_cmd', function() { // [media-default]の処理 //上記で指定したコマンド名
return_text = ' <span class="dashicons dashicons-media-default"> </span> ';//返り値のセット
ed.execCommand('mceInsertContent', 0, return_text); //返り値の実行
});
ed.addCommand( 'welcome-write-blog_cmd', function() { // [welcome-write-blog]の処理
return_text = ' <span class="dashicons dashicons-welcome-write-blog"> </span> ';
ed.execCommand('mceInsertContent', 0, return_text);
});
ed.addCommand( 'edit_cmd', function() { // [edit]の処理
return_text = ' <span class="dashicons dashicons-edit"> </span> ';
ed.execCommand('mceInsertContent', 0, return_text);
});
ed.addCommand( 'clock_cmd', function() { // [dashicons-clock]の処理
return_text = ' <span class="dashicons dashicons-clock"> </span> ';
ed.execCommand('mceInsertContent', 0, return_text);
});
},
});
tinymce.PluginManager.add( 'custom_button_script', add.buttons );
})();
<解説>
プログラムを書くにあたって幾つかの注意点があります。
①プログラムは即時関数形式で書く
(function(window) { ここに処理を書く})(window);
上記の様な書き方が即時関数形式と呼ばれています。
これは、関数定義と実行を合わせて行う関数という意味です。
具体的に言うと{}の中にボタンの画像とボタンクリック時の動作を記述（関数定義）した後、(window)でこの関数を実行してボタン画像を表示します。
しかし、一般的にはwindowを省略して下記の様な書き方をします。この書き方が一般的です。
(function() { ここに処理を書く})();
②書き方の構造
(function() {
tinymce.create('add.buttons', {
init : function(ed, url) {/*ここにアイコンボタンの定義を書きます*/ },
});
tinymce.PluginManager.add( 'custom_button_script', add.buttons );
})();
■tinymce.createの第一引数に関数名(任意名称)、第二引数に処理の内容を記述します。
■init : function(ed, url) {}を指定すると、edにエディタ情報、urlにこのファイルまでのパスが返されます。
edとurlを使ってボタンの定義を行います。
■tinymce.PluginManager.addに関数名を指定し、実行します。
③アイコンボタンの定義例
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); //返り値の実行
});
ボタンを複数設定する場合は、上記の下に続けて書きます。
メモ
ダッシュアイコン のコードは下記です。
<span class=”dashicons dashicons-media-default“></span>
しかし、上記で書き込んでいるのは「 」が追加された下記コードになっています。
 <span class="dashicons dashicons-media-default"> </span> 
上記の[ ]は半角スペースの半分の幅のスペースです。
これを入れる事によりアイコン前後にカーソルが入る様にしています。
又、ダッシュアイコンのサイズ等を修正する場合はCSSに.dashicons{}で指定して下さい。
参考情報
①その他のビジュアル・エディタ関連資料
ここを参照して下さい。