WordPressのデフォルトの状態では、ビジュアルエディタにフォント選択のボックスがありません。これを表示させて、さらには選択できるフォントを編集してみましょう。

フォント選択のボックスを表示

テーマのfunctions.phpに、次のコードを追加します。

add_filter('mce_buttons', function($buttons){
	array_unshift($buttons, 'fontselect');
	return $buttons;
});

これでOK。フィルター名がmce_buttonsの場合、エディタの一番上のツールバーに追加するよ、という意味になります。ツールバーは4段目まであるようで、2段目に追加したいならmce_buttons_2、のように、末尾にアンダースコア＋段番号を加えればいいのです。

$buttonsには、そのツールバーに存在するボタンや選択ボックスが表示される順番に入っています。なので、上のコードの2行目がarray_unshiftなのはフォント選択ボックスを一番最初に表示させたいからですね。

ちなみに、フォント選択ボックス以外にもいろんなボタン／選択ボックスが追加できます。TinyMCEのドキュメントを参考にしてください。

選択できるフォントをチョイスする

この状態だと、選択できるフォントが半角英数字用のものに限られます。日本語でブログ書くわけだから、ゴシック体と明朝体があればそれでいいよね、って人は次のコードをfunctions.phpにどうぞ。

add_filter('tiny_mce_before_init', function($settings){
	$settings['font_formats'] = "ゴシック体=Arial,Meiryo,'メイリオ',sans-serif;明朝体='ヒラギノ明朝 Pro W3','Hiragino Mincho Pro','ＭＳ Ｐ明朝','MS PMincho', serif";
	return $settings;
});

このように、$settings['font_formats']に、"（一つ目のフォントの表示名）=（適用するfont-familyの値）;（二つ目のフォントの表示名）=（適用するfont-familyの値）;…"の形式で設定していきます。

ちなみに、スタイルシートのfont-familyの値は、本来"ＭＳ Ｐ明朝"のようにダブルクォーテーションで囲ってもいいはずなんですが、そうしてみたらエラーが返ってきました。なのでシングルクォーテーションでどうぞ。

エディタの表示スタイルをブログの表示スタイルと統一する

ブログの基本フォントをゴシック系にしているのだけれど、そもそもエディタの表示スタイルが明朝系なので、なんだかよく分からない、という場合は、まず次のコードをfunctions.phpにどうぞ。

add_editor_style('style.css');

これは、エディタの表示スタイルに、テーマのstyles.cssも合わせて適用します、という指示です。エディタ自体を開発者ツールで覗いてみると、

<body id="tinymce" class="mce-content-body content post-type-page post-status-publish mceContentBody webkit wp-editor wp-autoresize html4-captions has-focus" data-id="content" contenteditable="true" style="overflow-y: hidden;">

という具合にbodyなので、styles.cssで

body{
	font: 14px/2 Arial, Meiryo, "メイリオ", sans-serif;
	color: #444;
}

みたいに指定されていれば、それがそのままエディタにも適用されます。

逆にエディタにだけ特定のスタイルを適用したい場合は、上のidやclassを利用してstyles.css内にスタイルを記述してやればいいと思います。