memocarilog

プラグインを使わずにビジュアルエディタへボタンを追加・削除したり、オリジナルの並びにしたりする方法です。フィルターフックを使って簡単にできました。

使用するフィルターフック

デフォルトでは1段目と2段にボタンが配置されていますが、3段目と4段目にもボタンを配置することができるようです。カスタマイズしたい列により、フィルターフックがそれぞれ用意されています。

// 1段目をカスタマイズするフック
add_filter( 'mce_buttons', '〜' );

// 2段目をカスタマイズするフック
add_filter( 'mce_buttons_2', '〜' );

// 3段目をカスタマイズするフック
add_filter( 'mce_buttons_3', '〜' );

// 4段目をカスタマイズするフック
add_filter( 'mce_buttons_4', '〜' );

デフォルトのボタンを外す

例えば、1段目に入っている「太字にするボタン」を削除したい場合は以下のように functions.php へ記入します。

function myplugin_tinymce_buttons($buttons){
      $remove = 'bold';
      // ↑ 外したいボタン名を $remove へ入れる
      if ( ( $key = array_search($remove,$buttons) ) !== false ){
	      unset($buttons[$key]);
      }
      return $buttons;
 }
add_filter('mce_buttons','myplugin_tinymce_buttons');

これを保存して、リロードすると、太字のボタンが外れます。

デフォルトのボタンのキーなど

1列目のボタン

1列目には以下のボタンが入っています。wp-includes/class-wp-editor.php ファイル参照。

$mce_buttons = apply_filters( 'mce_buttons', array('bold', 'italic', 'strikethrough', 'bu<h3>l</h3>list', 'numlist', 'blockquote', 'hr', 'alignleft', 'aligncenter', 'alignright', 'link', 'unlink', 'wp_more', 'spellchecker', 'fullscreen', 'wp_adv' ), $editor_id );

2列目のボタン

2列目には以下のボタンが入っています。

$mce_buttons_2 = apply_filters( 'mce_buttons_2', array( 'formatselect', 'underline', 'alignjustify', 'forecolor', 'pastetext', 'removeformat', 'charmap', 'outdent', 'indent', 'undo', 'redo', 'wp_help' ), $editor_id );

デフォルトで表示されていないボタンを追加する

ビジュアルエディタへボタンを追加するには、以下のように functions.php へ記入します。

例1）1列目の最後に「文字の背景色を変更する」ボタンを追加する。

function myplugin_tinymce_buttons($buttons){
	array_push($buttons, 'backcolor');
	// ↑ 第二引数以降に追加したいボタン名を入れる
	return $buttons;
}
add_filter("mce_buttons", "myplugin_tinymce_buttons");

例2）2列目の最初に「フォントサイズを変更する」ボタンを追加する。

function myplugin_tinymce_buttons($buttons) {
    array_unshift($buttons, 'fontsizeselect');
    // ↑ 第二引数以降に追加したいボタン名を入れる
    return $buttons;
}
// ↓ フックを mce_buttons_2 にする
add_filter('mce_buttons_2','myplugin_tinymce_buttons');

追加できるボタンの種類

試してみた中で、以下のようなボタンを追加できました。

WordPress 本体に入っている TinyMCE のプラグインファイルのものがボタンとして実装できるのかなと思ったのですが、できないものとできるものがあってよくわかりませんでした…。

ビジュアルエディタをオリジナルの並びにする

1段目のボタンの並びをオリジナルにするには、以下のように functions.php へ記入します。

function myplugin_tinymce_buttons($buttons){
      unset($buttons);
      $buttons = array('styleselect','removeformat','forecolor','backcolor','bold','wp_adv');
      // ↑ array の中に表示したいボタンのキーを入力します
      return $buttons;
 }
add_filter('mce_buttons','myplugin_tinymce_buttons');

これでスッキリオリジナルボタンの並びになります。

使わないボタンを外してみやすくするには、プラグインなしで簡単にできるのでよいなと思いました。しかし、ボタンを追加するのはいまいち機能がわからないところもありTinyMCE Advanced などのプラグインを使うのがやっぱり楽かなと思いました…。