【WordPress・ビジュアルエディタ】プルダウンメニューのカスタマイズ

WordPressでは本文を編集する際に、ビジュアルエディタ（TinyMCE）が利用できます。

そのビジュアルエディタのツールバーには、HTMLを編集できるボタンがありますが、今回は、その中のセレクトボックス（プルダウンメニュー）の選択肢をカスタマイズとなります。

※今回のビジュアルエディタのカスタマイズは、以前のバージョンのWordPressで利用されていたクラシックエディタでのカスタマイズとなります。また、以下のプラグインを利用することでクラシックエディタに戻すことが可能です。

Classic Editor – WordPress プラグイン | WordPress.org

セレクトボックスの選択肢をカスタマイズする例

例として、ビジュアルエディタのセレクトボックスをカスタマイズした内容は以下の2点。

• 「スタイル」のセレクトボックスを追加し、メニューから選択できるタグを<dl>、<dt>、<dd>、<span class="keyboard-dark">に設定
• デフォルトのセレクトボックスから選択できるブロック要素のタグを<p>、<h2>、<h3>、<h4>に変更

カスタマイズするソースコードの例は以下となり、function.phpファイルに記述します。

function tinymce_add_buttons_3( $buttons ) {
	// 「スタイル」のセレクトボックスを追加
    array_unshift( $buttons,'styleselect');
	return $buttons;
}
add_filter( 'mce_buttons_3', 'tinymce_add_buttons_3' );

function my_tiny_mce_before_init( $init_array ) {
	// 追加した「スタイル」のセレクトボックスのメニューから選択できるタグを配列で作成
	$style = array(
		array(
			'title' => 'dl',
			'block' => 'dl',
		),
		array(
			'title' => 'dt',
			'block' => 'dt',
		),
		array(
			'title' => 'dd',
			'block' => 'dd',
		),
     	array(
			'title' => 'keyboard-dark',
			'inline' => 'span',
			'classes' => 'keyboard-dark',
		),
	);
	// $styleの配列をJSONに変換し、キー'style_formats'の値を指定
	$init_array['style_formats'] = json_encode($style);
    
    // キー'block_formats'の値を変更
	$init_array['block_formats'] = 'Paragraph=p;h2=h2;h3=h3;h4=h4';
    
	return $init_array;
}
add_filter( 'tiny_mce_before_init', 'my_tiny_mce_before_init' );

ソースコードの説明

上記ソースコードのポイントの部分を説明します。

フィルターフック mce_buttons_3

フィルターフック mce_buttons_3 のコールバック関数の引数には、ビジュアルエディタ（TinyMCE ）のツールバー3段目の項目が配列で渡されます。そして、関数内でその配列を変更しreturnで返すことにより、ツールバーをカスタマイズすることができます。

今回の例では、array_unshift関数を使い「スタイル」のセレクトボックスをツールバーの先頭に追加します。

例のソースコードでは、1行目からの以下の箇所となります。

function tinymce_add_buttons_3( $buttons ) {
	// 「スタイル」のセレクトボックスを追加
    array_unshift( $buttons,'styleselect');
	return $buttons;
}
add_filter( 'mce_buttons_3', 'tinymce_add_buttons_3' );

ツールバーの何段目にボタンを追加するかは、フィルターフックの種類によって指定できます。以下がそのフィルターフックの種類となります。

ツールバーにボタンを追加するフィルターフックの種類

• mce_buttons （1段目）
• mce_buttons_2 （2段目）
• mce_buttons_3 （3段目）
• mce_buttons_4（4段目）

フィルターフック tiny_mce_before_init

フィルターフック tiny_mce_before_init のコールバック関数の引数には、ビジュアルエディタ（TinyMCE ）の設定が項目ごとに配列で渡されます。そのため、関数内でその配列を変更しreturnで返すことにより、ビジュアルエディタをカスタマイズすることができます。

「スタイル」のセレクトボックスのメニューを配列で作成

まずは、フィルターフック mce_buttons_3で追加した「スタイル」のセレクトボックスのメニュー作成します。メニューは配列で作成し、配列の主なキーと値は以下となります。配列変数は $style としています。

• 'title' => 'メニューの名前を指定'
• 'block' => 'ブロック要素のタグ指定' または、 'inline' => 'インライン要素のタグを指定'
• 'classes' => 'タグにclassを設定する場合にclass名指定'

例のソースコードでは、9行目からの以下の箇所となります。

// 追加した「スタイル」のセレクトボックスのメニューから選択できるタグを配列で作成
$style = array(
	array(
		'title' => 'dl',
		'block' => 'dl',
	),
	array(
		'title' => 'dt',
		'block' => 'dt',
	),
	array(
		'title' => 'dd',
		'block' => 'dd',
	),
    array(
		'title' => 'keyboard-dark',
		'inline' => 'span',
		'classes' => 'keyboard-dark',
	),
);

'style_formats'に値をセット

次に、追加した「スタイル」のセレクトボックスへ、上記の配列で作成したメニューを設定します。

設定する方法は、キー'style_formats'の値に、配列変数 $style を指定します。'style_formats'の値は、文字列をJSON 形式に変換しなければいけないため、json_encode関数を使用し指定しています。

JSON 形式については以下を参考にしてみてください。

JSONってなにもの？ | Think IT（シンクイット）

例のソースコードでは、29行目からの以下の箇所となります。

// $styleの配列をJSONに変換し、キー'style_formats'の値を指定
$init_array['style_formats'] = json_encode($style);

'block_formats'の値を変更

キー'block_formats'の値を変更することで、デフォルトのセレクトボックスから選択できるメニュー（ブロック要素のタグ）を変更できます。今回の例では、メニュー（ブロック要素のタグ）をP、h2、h3、h4に変更しています。

変更する方法は、'block_formats'の値を、'メニュー名=タグ名' で指定し、メニューを区切る際は ； を使用します。指定できるタグはブロック要素のタグですが、指定できないブロック要素のタグもあるようです。

例のソースコードでは、32行目からの以下の箇所となります。

// キー'block_formats'の値を変更
$init_array['block_formats'] = 'Paragraph=p;h2=h2;h3=h3;h4=h4';