デフォルトでは表示されていないボタンを追加したり、エディタ部分に任意のクラスやスタイルを適用させるなど、WordPressのビジュアルエディタをカスタマイズしたいときに使えるプラグインやTipsなどを備忘録兼ねてまとめました。普段からビジュアルエディタを多用しているのであれば、これらをいろいろ組み合わせてみることでより便利に使いやすくできると思います。
WordPress：ビジュアルエディタをカスタマイズする際の備忘録 目次
1. ビジュアルエディタを簡単にカスタマイズできるプラグイン「TinyMCE Advanced」
「TinyMCE Advanced」は投稿画面などに用意されているビジュアルエディタをより便利にしてくれるプラグインで、有効化することでデフォルトでは表示されていないボタンが追加したり、並び順を任意のものに変更することができます。
使い方もプラグインをインストール・有効化するだけと簡単で、自分好みにカスタマイズしたい場合は「設定 → TinyMCE Advanced」から可能です。
設定画面はキャプチャのようになっており、ページ上部で各ボタンの表示・非表示を選んだり、並び順を変えたりといったことがドラッグで設定できるようになっています。
また、デフォルトではボタンが表示される領域は2列分だと思いますが、このプラグインを使うことで最大4列まで表示させることができるので、例えば使用頻度によってボタンを配置する列をわけたりといったことができます。
他の部分ではエディタについての設定や管理についての項目があり、設定では右クリックメニューの置換やフォントサイズのデフォルト単位がptとなっているのをpxに置き換えたりすることができ、管理部分では設定のインポート・エクスポートなどができるようになっています。
プラグインの詳細やダウンロードは以下より。
2. float解除用のボタンを追加するプラグイン「TinyMCE Clear Float」
エディタ内で画像を追加する際に表示位置の項目を右や左にすることで画像を回り込ませることができ、これを利用することで例えば左に画像・右にテキストのようなレイアウトを作ることができますが、回り込みにはfloatが用いられている（テーマやカスタマイズによります）ので、回り込みさせたくないコンテンツにも適用されてしまったり、最悪その後のコンテンツが大きく崩れてしまう可能性もあります。
「TinyMCE Clear Float」はそれを防ぐのに役立つプラグインで、プラグインをインストール・有効化するとキャプチャでツールチップが表示されている箇所にあるようなボタンがエディタに追加されます。
このボタン押下でキャプチャのエディタ部分にあるような形で要素（コードでいうと<br style="clear: both;" />）が挿入されて回り込みを解除してくれます。
プラグインの詳細やダウンロードは以下より。
3. ビジュアルエディタにCSSを適用する
ビジュアルエディタに独自のCSSを適用させるというもので、これを利用することで例えばエディタ上でもフロントと全く同じ見栄えでコンテンツ入力をすることが可能になります。
実装には下記をfunctions.phpに記述します。
functions.php
add_editor_style( 'admin/editor-style.css' );上記の場合はテーマ内にまず/adminというディレクトリを作成し、その中にeditor-style.cssを格納するという形を取っている場合の記述となりますが、テーマ内直下にeditor-style.css置くのであればadd_editor_style();だけで実装できます。
ちなみに、上で紹介した「TinyMCE Advanced」などのプラグインを使っている場合など、設定したスタイルが上手く適用されないという場合はスタイル指定時のセレクタに#tinymceを記述するなど詳細度を調整すれば適用されると思います。
4. ビジュアルエディタに任意のクラスを追加する
デフォルトで.mce-content-bodyや.mceContentBodyなどのクラスがエディタを表示しているbody要素に付与されていますが、それ以外に任意のクラスを付与したいというときは、functions.phpに下記を記述することで実装できます。
functions.php
add_filter( 'tiny_mce_before_init', 'custom_tiny_mce_body_class' );
function custom_tiny_mce_body_class( $settings ){
$settings['body_class'] = 'my-editor-class';
return $settings;
}上記を記述すると、エディタを表示しているbody要素に.my-editor-classというクラスが付与されます。
他のクラス名にしたい場合は、ソースの赤文字部分を任意のものに変更してください。
5. ボタン（TinyMCE Buttons）を追加する
デフォルトでは表示されていないボタンを追加で表示させる方法です。
上で紹介した「TinyMCE Advanced」などのプラグインを使った方が簡単に且つ沢山の種類を追加できますが、プラグインを使用しない場合はfunctions.phpに下記のような形で記述することで追加できます。
functions.php
// 1段目に追加
add_filter( 'mce_buttons', 'add_mce_buttons' );
function add_mce_buttons( $buttons ) {
$add = array(
'wp_page'
);
return array_merge( $buttons, $add );
}
// 2段目に追加
add_filter( 'mce_buttons_2', 'add_mce_buttons_2' );
function add_mce_buttons_2( $buttons ) {
$add_buttons_2 = array(
'fontselect',
'fontsizeselect',
'backcolor'
);
return array_merge( $buttons, $add_buttons_2 );
}
// 3段目に追加
add_filter( 'mce_buttons_3', 'add_mce_buttons_3' );
function add_mce_buttons_3( $buttons ) {
$add_buttons_3 = array(
'cut',
'copy',
'paste'
);
return array_merge( $buttons, $add_buttons_3 );
}
// 4段目に追加
add_filter( 'mce_buttons_4', 'add_mce_buttons_4' );
function add_mce_buttons_4( $buttons ) {
$add_buttons_4 = array(
'superscript',
'subscript'
);
return array_merge( $buttons, $add_buttons_4 );
}上記記述後にエディタを確認してみると、1段目に「改ページ」というボタンが追加されていたり、2段目にはフォントファミリーやサイズを選択できるセレクトが追加されていると思います。
それぞれ別の段に表示したいときは、表示したいボタン名を任意の段に同じように記述してください。
また、デフォルトではエディタの3段目や4段目は非表示になっていると思いますが、上記のようにmce_buttons_3やmce_buttons_4といったフィルターを利用することで、3段目・4段目にボタンを追加することができます。
ちなみに、すべて追加できるかを試したわけではなく、一部試してみたものの単純に掲載されている名前を記述するだけでは追加できなかったものもあったのですが、「TinyMCE | Buttons/Controls」がどのようなボタンを追加できるかの参考になります。
（もし、わかりやすく一覧化していたり追加方法をまとめているページなど知っている方がいれば是非教えてください）
6. ボタンを削除する
※キャプチャは1段目のボタンを全部削除した場合
先ほどとは逆で、エディタに確実に使わないであろうボタンがあるときは、functions.phpへ下記のように記述することで削除できます。
追加するときと同様で「TinyMCE Advanced」を使えば簡単にできますが、特にボタンを追加するわけでもなく削除するのもひとつふたつ程度とかであればこちらの対応で十分だと思います。
functions.php
add_filter( 'mce_buttons', 'remove_mce_buttons' );
function remove_mce_buttons( $buttons ) {
$remove = array(
'formatselect', // フォーマット
'bold', // 太字
'italic', // イタリック
'bullist', // 番号なしリスト
'numlist', // 番号付きリスト
'blockquote', // 引用
'alignleft', // 左寄せ
'aligncenter', // 中央揃え
'alignright', // 右寄せ
'link', // リンクの挿入/編集
'unlink', // リンクの削除
'wp_more', // 「続きを読む」タグを挿入
'wp_adv', // ツールバー切り替え
'dfw' // 集中執筆モード
);
return array_diff( $buttons, $remove );
}
add_filter( 'mce_buttons_2', 'remove_mce_buttons_2' );
function remove_mce_buttons_2( $buttons ) {
$remove = array(
'strikethrough', // 打ち消し
'hr', // 横ライン
'forecolor', // テキスト色
'pastetext', // テキストとしてペースト
'removeformat', // 書式設定をクリア
'charmap', // 特殊文字
'outdent', // インデントを減らす
'indent', // インデントを増やす
'undo', // 取り消し
'redo', // やり直し
'wp_help' // キーボードショートカット
);
return array_diff( $buttons, $remove );
}7. オリジナルのスタイルセレクトボタンを追加する
デフォルトで用意されているフォーマットを使うことでテキストをh1やpといった要素で括れるようになっていますが、それら以外で例えば特定のクラスが付いた特定の要素で括りたいときなどに使える方法で、HTMLを書くのが苦手な人や手間を省きたいという人には特に便利だと思います。
ここではサンプルとして.format01というクラスが付いたdiv要素と.format02というクラスの付いたspan要素の2フォーマットを独自で作成して、キャプチャにあるようなセレクトを追加してみます。
実装にはfunctions.phpへ下記を記述します。
functions.php
add_filter( 'tiny_mce_before_init', 'custom_tiny_mce_style_formats' );
function custom_tiny_mce_style_formats( $settings ) {
$style_formats = array(
array(
'title' => 'Format 01',
'block' => 'div',
'classes' => 'format01',
'wrapper' => true,
),
array(
'title' => 'Format 02',
'inline' => 'span',
'classes' => 'format02',
'wrapper' => true,
),
);
$settings[ 'style_formats' ] = json_encode( $style_formats );
return $settings;
}
add_filter( 'mce_buttons', 'add_original_styles_button' );
function add_original_styles_button( $buttons ) {
array_splice( $buttons, 1, 0, 'styleselect' );
return $buttons;
}上記記述後にエディタを確認すると、デフォルトでは1段目左に表示されていると思うフォーマット横に「スタイル」と記述された項目が追加されており、あとは適用したい部分を選択状態にして追加したものを選択すれば任意のクラス付き要素で括られます。
ちなみに、ここではarray_spliceを利用していますが、フォーマットより前（一番左）に表示したい場合はarray_unshiftを使えば表示位置を変更できます。
また、「3. ビジュアルエディタにCSSを適用する」で紹介した独自スタイルを読み込む方法と組み合わせて実装すればエディタ上でも見栄えが反映されてよりわかりやすくなるのでおすすめです。
8. オリジナルのボタンを追加する
「5. ボタン（TinyMCE Buttons）を追加する」で紹介したボタン追加は、もともとあったTinyMCEのボタンを表示するという感じのものでしたが、こちらは完全にオリジナルなボタンを追加するというものになります。
※以下で紹介する方法はテーマ内に/adminというディレクトリを作成し、その中にJSファイルやボタンに使用する画像などを格納する形になっているので、もしテーマ内直下やその他ディレクトリに格納する場合は環境にあわせて変更してください。
まず、ボタン押下時の動きやボタンに使用したい画像を指定したJSファイルを作成します。
テーマ内に/adminというディレクトリを作成し、その中にeditor-button.jsというファイル名で下記を記述したJSを作成します。
editor-button.js
(function() {
tinymce.create( 'tinymce.plugins.original_tinymce_button', {
init: function( ed, url ) {
ed.addButton( 'example', {
title: 'Button Title',
image: url + '/editor-button.png',
cmd: 'example_cmd'
});
ed.addCommand( 'example_cmd', function() {
var selected_text = ed.selection.getContent(),
return_text = '<div class="example">' + selected_text + '</div>';
ed.execCommand( 'mceInsertContent', 0, return_text );
});
},
createControl : function( n, cm ) {
return null;
},
});
tinymce.PluginManager.add( 'original_tinymce_button_plugin', tinymce.plugins.original_tinymce_button );
})();変更することが多い箇所をあげると、まず4行目〜7行目辺りでボタンの名前やボタン画像としてい使用するイメージの指定などを行います。
イメージを用意するのが面倒とかTinyMCEで他のボタンで使用されているアイコンを利用したいというときは、imageの部分をiconに変更することで指定でき、例えばicon: 'code'のようにすれば「< >」のようなアイコンを表示することができます。
10行目からのed.addCommandにはボタン押下時の動作を記述し、このコードの場合は「example」というクラスが付いたdiv要素が挿入されるものになっており、テキストなどを選択した状態でボタン押下するとそれらを括る形で挿入されるようになっています。
あとは、上で作成したJSを読み込ませるのと作成したボタンをエディタに追加するための記述としてfunctions.phpへ下記を記述します。
記述後に投稿画面などでエディタを確認すると、自分が設定したボタンが追加されているのを確認できます。
functions.php
add_filter( 'mce_external_plugins', 'add_original_tinymce_button_plugin' );
function add_original_tinymce_button_plugin( $plugin_array ) {
$plugin_array[ 'original_tinymce_button_plugin' ] = get_template_directory_uri() . '/admin/editor-button.js';
return $plugin_array;
}
add_filter( 'mce_buttons', 'add_original_tinymce_button' );
function add_original_tinymce_button( $buttons ) {
$buttons[] = 'example';
return $buttons;
}ちなみに、上と同じような動作をするものでもっと手軽に実装したいときは「Visual Editor Custom Buttons」というプラグインが便利で、プラグインをインストール・有効化すると「Visual Editor Custom Buttons」というメニューが追加され、そこからボタンを追加することができます。
設定画面は英語ではありますが追加方法も簡単で、各項目を入力・選択していけばボタンを追加することができ、アイコンも実際にどんなものが使用されるかを確認しながら設定することが可能です。
また、設定画面にも記載されていますが、/wp-content/uploads/内に/vecb/というディレクトリを作成してイメージを格納しておけば、あらかじめ用意されているもの以外のイメージをボタンに設定して表示させることもできます。
プラグインのダウンロードや詳細については以下より確認できます。
9. 段落挿入と改行を逆にする
デフォルトのエディタはEnterで段落挿入、Shift+Enterで改行という動きになっていますが、これらの動きを逆にする方法です。
慣れてしまえば気にならないですし利用機会も少ないですが、普段利用しているアプリやツールなどに合わせたいとか更新担当の人の好みで変更したいなど要望があったときに使えます。
実装にはfunctions.phpへ下記を記述します。
functions.php
add_filter( 'tiny_mce_before_init', 'custom_tiny_mce_forced_root_block' );
function custom_tiny_mce_forced_root_block( $settings ) {
$settings[ 'forced_root_block' ] = false;
return $settings;
}10. フォーマット・フォントサイズ・フォントファミリーの指定項目を変更する
フォーマット・フォントサイズ・フォントファミリーの項目の中身をそれぞれ任意のものに変更する方法です。
（フォントサイズ・フォントファミリーについては、別途プラグインを使用するなどしてボタンを追加してください）
実装はいずれもfunctions.phpへ記述します。
10-1. 指定できるフォーマットを変更する
以前はtheme_advanced_blockformatsという配列を使用し、表示させるものもカンマで区切って指定するとかで指定できたのですが、現在このカスタマイズを行う場合はblock_formatsを使用し、さらに指定する際も表示名=タグ名;のようにする必要があります。
functions.php
add_filter( 'tiny_mce_before_init', 'custom_tiny_mce_block_formats' );
function custom_tiny_mce_block_formats( $settings ){
$settings[ 'block_formats' ] = '段落=p;見出し1=h4;見出し2=h5;見出し3=h6;';
return $settings;
}上記を記述するとデフォルトでは見出し1～見出し3はh1～h3が使用されるようになっていたものが、h4～h6が使用される形に変更でき、必要なくなった本来の見出し4～見出し6までを削除することができます。
10-2. 指定できるフォントサイズを変更する
デフォルトだと8pt, 10pt, 12pt ... という感じで単位がptになっていますが、その数値や単位を任意のものに変更します。
例えば、下記のように記述することで5サイズ分の数値にして単位はremにしたものが選択できるようになります。
functions.php
add_filter( 'tiny_mce_before_init', 'custom_tiny_mce_fontsize_formats' );
function custom_tiny_mce_fontsize_formats( $settings ) {
$settings[ 'fontsize_formats' ] = '0.8rem 1.0rem 1.2rem 1.5rem 2.0rem';
return $settings;
}10-3. 指定できるフォントファミリーを変更する
デフォルトでは10種類以上のフォントファミリーを選択できるようになっていますが、例えば「Comic Sans MS」や「Impact」のように、場合によってはサイトデザインを大きく損なってしまうフォントも含まれています。
更新者にそれらは利用しないように伝えれば済む話ではありますが、確実に使わない（使ってほしくない）とか使用できるものを限定したいときは、下記のように記述することで任意のフォントファミリーのみにできます。
また、このサンプルコードのようにフォント名ではピンとこない更新者向けとしてわかりやすい名前を付けたりしておくのもいいと思います。
functions.php
add_filter( 'tiny_mce_before_init', 'custom_tiny_mce_fontselect_formats' );
function custom_tiny_mce_fontselect_formats( $settings ) {
$settings[ 'font_formats' ] = 'ゴシック=serif;明朝=sans-serif;等幅=monospace;';
return $settings;
}