WordPress Snippet

ワードプレスをカスタマイズしよう

TinyMCE エディタでフォントサイズを em % rem 等のサイズで変更可能にする

デフォルトのビジュアルエディタには、フォントサイズを変更するボタンがない事にふと気が付きました。

テーマのフォーラムに寄せられた苦情が、その発端だったのですが、では、機能満載な「TinyMCE Advancedプラグインを追加して見ようという事で試してみたのですが、ボタンは、設定からすぐに見つかりましたが、単位はptでした。

「pxサイズに変更したい場合はチェックボックスにチェックを入れてください」というオプションはありましたが レスポンシブ対応等で、em rem %等の相対単位を使いたいところですね

フィルターを試してみたのでメモに残します。

まず、セレクトボックスをエディタに表示するフィルタ

functions.php

if ( ! function_exists( 'extend_mce_button' ) ) {
	function extend_mce_button( $buttons ) {
		array_unshift( $buttons, 'fontsizeselect' );
		return $buttons;
	}
}
add_filter( 'mce_buttons_2', 'extend_mce_button' );

セレクトボックスのフォントサイズを変更するフィルタ
(%の例です)

functions.php

add_filter( 'tiny_mce_before_init', 'my_mce_before_init',5 );
function my_mce_before_init( $settings ) {
 $settings['fontsize_formats']= "85% 100% 116%; 138.5% 153.9% 167% 182% 197%";
 return $settings;
}

[emulsion_relate_posts]