WordPressのTinyMCE（クラシックエディター）をカスタマイズする方法｜ボタン・書式・エディタースタイル

TinyMCE は、WordPress のクラシックエディター（ビジュアルタブ）で使われているエディターです。WordPress 5.0 以降の標準はブロックエディターになりましたが、TinyMCE は今も次の場所で使われています。

• Classic Editor プラグインで旧エディターに戻した投稿・固定ページの編集画面
• ブロックエディターの「クラシック」ブロック
• プラグインやテーマが wp_editor() で表示する入力欄（例: WooCommerce の商品の簡単な説明）

ブロックエディターの段落・見出しなどの通常のブロックは TinyMCE を使っていないため、この記事の方法では変わりません。

この記事では、プラグインでツールバーを変える方法と、コードでボタン・書式・エディターの見た目を変える方法を説明します。内容は WordPress 本体のソース（wp-includes/class-wp-editor.php）とプラグインディレクトリの説明で確認しています（2026年11月時点、WordPress 7.1。同梱の TinyMCE はバージョン 4.9 系）。

方法1: Advanced Editor Toolsでボタンを並べ替える

コードを書かずにツールバーを変えたい場合は、「Advanced Editor Tools」プラグイン（旧名 TinyMCE Advanced、スラッグ tinymce-advanced）を使います。

1. 「プラグイン」→「新規追加」で「Advanced Editor Tools」を検索し、インストールして有効化します。
2. 「設定」→「Advanced Editor Tools」を開きます。
3. ボタンをドラッグして、ツールバー（最大4行）に追加・削除・並べ替えをします。フォントサイズ、文字色・背景色、表などのボタンがあります。
4. 「変更を保存」で保存し、編集画面を再読み込みして確認します。

WP-CLI でインストールする場合は次のとおりです。

wp plugin install tinymce-advanced --activate

プラグインの説明によると、このほかに次の機能があります。

• ブロックエディターで TinyMCE を使える「Classic Paragraph」ブロックと、それを既定のブロックにする設定
• テーマの editor-style.css の CSS クラスを「書式」メニューに読み込む設定
• 設定のファイルへの書き出しと読み込み

保存してもボタンが変わらない場合は、ブラウザーのキャッシュを消して編集画面を再読み込みします。それでも変わらない場合は、「ユーザー」→「プロフィール」の「ビジュアルリッチエディターを使用しない」にチェックが入っていないか確認します。

方法2: コードでツールバーを変える

テーマやプラグインを作っていて、設定画面を使わずに決まった形にしたい場合は、WordPress のフィルターを使います。コードは子テーマの functions.php か自作のプラグインに書きます。

既定のボタン

WordPress 本体が用意しているボタンは次のとおりです（class-wp-editor.php より）。

wp_adv は2行目以降の表示を切り替えるボタンです。スマートフォンでは fullscreen・dfw と wp_help は入りません。

ボタンを外す・移す・書式メニューを足す

次の例は、1行目から「続きを読む」タグのボタン（wp_more）を外し、取り消し線を2行目から1行目に移し、2行目の先頭に「書式」メニュー（styleselect）を追加します。

<?php
// 1行目: 「続きを読む」ボタンを外し、italic の後ろに取り消し線を入れる
add_filter( 'mce_buttons', function ( $buttons ) {
	$buttons = array_values( array_diff( $buttons, array( 'wp_more' ) ) );
	array_splice( $buttons, 3, 0, array( 'strikethrough' ) );
	return $buttons;
} );

// 2行目: 取り消し線を外し、先頭に「書式」メニューを追加する
add_filter( 'mce_buttons_2', function ( $buttons ) {
	$buttons = array_values( array_diff( $buttons, array( 'strikethrough' ) ) );
	array_unshift( $buttons, 'styleselect' );
	return $buttons;
} );

フィルターの第2引数には、エディターの ID が渡されます。投稿の本文は content、ブロックエディターのクラシックブロックは classic-block です。特定のエディターだけ変えたい場合は、function ( $buttons, $editor_id ) として受け取り、add_filter() の第4引数に 2 を指定して条件分岐します。

段落メニューと「書式」メニューの中身を決める

tiny_mce_before_init フィルターで、TinyMCE の初期化設定を変えられます。次の例は、段落メニュー（formatselect）に出す見出しを絞り、上で追加した「書式」メニューに独自の書式を2つ登録します。

<?php
add_filter( 'tiny_mce_before_init', function ( $init ) {
	// 段落メニューに出す項目（表示名=タグ を ; で区切る）
	$init['block_formats'] = '段落=p;見出し2=h2;見出し3=h3;見出し4=h4;整形済みテキスト=pre';

	// 「書式」メニューの項目（JSON の文字列で渡す）
	$init['style_formats'] = wp_json_encode(
		array(
			array(
				'title'   => '注意ボックス',
				'block'   => 'div',
				'classes' => 'note-box',
				'wrapper' => true,
			),
			array(
				'title'   => 'マーカー',
				'inline'  => 'span',
				'classes' => 'marker',
			),
		)
	);

	return $init;
} );

style_formats は配列のままではなく、wp_json_encode() で JSON の文字列にして渡します。WordPress は [ で始まり ] で終わる文字列を JavaScript の配列として出力するためです。

エディターの見た目を公開ページに近づける

書式で付けたクラスがエディター内でも同じ見た目になるように、エディター用の CSS を読み込みます。

<?php
add_action( 'after_setup_theme', function () {
	add_editor_style( 'editor-style.css' );
} );

editor-style.css はテーマのフォルダー（子テーマなら子テーマのフォルダー）に置きます。公開ページでも同じ見た目にするため、同じ CSS をテーマの style.css にも書いておきます。

.note-box {
	border-left: 4px solid #d63638;
	background: #fcf0f1;
	padding: 1em;
}

.marker {
	background: linear-gradient(transparent 60%, #fff3a0 60%);
}

方法3: 独自のボタンを追加する

ボタンを押したときの動作を自分で決めたい場合は、TinyMCE のプラグイン（JavaScript）を作り、mce_external_plugins で読み込みます。次の例は、選択した文字を「注意ボックス」で囲むボタンを追加します。

<?php
// TinyMCE のプラグインとして JavaScript を読み込む
add_filter( 'mce_external_plugins', function ( $plugins ) {
	$plugins['mytheme_note'] = get_theme_file_uri( 'js/mce-note.js' );
	return $plugins;
} );

// 1行目の末尾にボタンを追加する
add_filter( 'mce_buttons', function ( $buttons ) {
	$buttons[] = 'mytheme_note';
	return $buttons;
} );

テーマの js/mce-note.js に、次の内容を置きます。WordPress が同梱している TinyMCE 4 の書き方です。

( function () {
	tinymce.PluginManager.add( 'mytheme_note', function ( editor ) {
		editor.addButton( 'mytheme_note', {
			text: '注意',
			tooltip: '選択した文字を注意ボックスで囲む',
			onclick: function () {
				var selected = editor.selection.getContent( { format: 'text' } );
				editor.insertContent(
					'<div class="note-box"><p>' + editor.dom.encode( selected || '本文' ) + '</p></div>'
				);
			}
		} );
	} );
} )();

mce_external_plugins のキー（mytheme_note）と、tinymce.PluginManager.add() に渡す名前、mce_buttons に追加する名前をそろえます。選択範囲はテキストとして取り出しているため、太字などの書式は外れます。

うまく反映されないときの確認点

JavaScript のエラーはサーバーのエラーログには出ないので、ブラウザーの開発者ツールで確認します。PHP のコードを追加したあとに管理画面が表示されなくなった場合は、wp-content/debug.log やサーバーの PHP エラーログを確認します。

運用上の注意

• 変更の前にバックアップを取る: functions.php の書き間違いでサイトが表示されなくなることがあります。FTP や SSH で元に戻せる状態で作業します。
• 親テーマの functions.php に直接書かない: テーマの更新で消えます。子テーマか自作のプラグインに書きます。
• 書式は公開ページの CSS とそろえる: エディターでだけ付けたクラスは、テーマの CSS に定義がないと公開ページで見た目が変わりません。
• 今後の方針を決めておく: 新しく作る記事はブロックエディターで書き、TinyMCE のカスタマイズは過去の記事の編集やクラシックブロック用にとどめると、エディターの違いによる混乱を減らせます。

まとめ

• TinyMCE が使われるのは、クラシックエディター、クラシックブロック、wp_editor() の入力欄。通常のブロックには影響しない。
• コードを書かずに変えるなら Advanced Editor Tools（旧 TinyMCE Advanced）で、「設定」→「Advanced Editor Tools」からボタンを並べ替える。
• コードで変えるなら、mce_buttons・mce_buttons_2 でボタン、tiny_mce_before_init で段落メニューと「書式」メニュー、add_editor_style() でエディターの見た目を変える。
• 独自のボタンは mce_external_plugins で TinyMCE 4 のプラグインを読み込んで作る。