[WordPress] プラグインを使わずにビジュアルエディタへボタンを追加/削除したり、オリジナルの並びにしたりする方法

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

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

フィルターフック適応場所
デフォルトでは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段目に入っている「太字にするボタン」
例えば、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列目のボタン

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 );

1列目に入っているボタン

  • bold 太字
  • italic イタリック
  • strikethrough 打ち消し
  • bullist 番号なしリスト
  • numlist 番号付きリスト
  • blockquote 引用
  • hr 横ライン
  • alignleft 左寄よせ
  • aligncenter 中央揃え
  • alignright 右寄よせ
  • link リンクの挿入/編集
  • unlink リンクの解除
  • wp_more 続きを読むタグ挿入
  • spellchecker スペルチェッカー(?)
  • fullscreen フルスクリーンモード
  • wp_adv ツールバー切替え

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 );

2列目に入っているボタン

  • formatselect フォーマットセレクト
  • underline 下線
  • alignjustify 両端揃え
  • forecolor テキスト色
  • pastetext テキストとしてペースト
  • removeformat フォーマットをクリア
  • charmap 特殊文字
  • outdent インデントを減らす
  • indent インデントを増やす
  • undo 取り消し
  • redo やり直し
  • wp_help キーボードショートカット

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

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

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

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

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

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

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

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

追加できるボタンの種類

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

  • copy コピー
  • paste 貼付け
  • backcolor 選択した文字の背景色を変更
  • fontselect フォントファミリーを選択
  • fontsizeselect フォントサイズを選択
  • styleselect テキストのスタイルを変更
  • media 動画を挿入/編集
  • newdocument 現在入力中のテキストをクリア

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 などのプラグインを使うのがやっぱり楽かなと思いました…。

Related Article

2 Comments & Tracbacks

Leave a Comment

Emailは公開されません。*は必須項目です。


*


Categorys

Tags

CSS3 ダッシュボード ヘッダー jQueryプラグイン スライドショー トラブル コードサンプル 素材 コンテンツ Facebook php 引っ越し お知らせ JavaScript カテゴリー Shareボタン CSS IE 投稿タイプ レスポンシブ Photoshop seo Macアプリ サイドバー タクソノミー HTML5 WPセキュリティ Git カスタムメニュー ナビゲーション PHPリファレンス SVG API query_posts RSS WP使い方 iTunes データベース コメント function 条件分岐 get_posts() スマートフォン Sass/Compass moreタグ