TinyMCE Advancedを導入

wordpressにエディタの拡張プラグインを導入してみました。

プラグイン>新規追加　からTinyMCE Advancedを検索してインストール、有効化する。
設定>TinyMCE Advanced　ができるので、そこから表示したいボタンを設定する。

設定画面を日本語化したい場合は「TinyMCE Advanced*ビジュアルエディタを強化-日本語版配布 | Lovelog+*」を参照してください。設定画面以外の部分は最初から日本語で表示されるので、特に入れる必要は無いかもしれません。

設定が終わると投稿画面が↓のようになります。

このままでも十分ですが、フォントの選択部分に日本語フォントも追加したいため、もう少し設定してやりましょう。

まず、上部のフォント選択に日本語フォントを追加しましょう。「TinyMCE Init Setting プラグイン」をダウンロードして解凍します。phpファイルが1つ出てくると思うので、テキストエディタで開いて表示したいフォントを記述します。私は日本語フォントを上に持ってきたかったため、下記のようにしました。

$usefonts = array(
'ＭＳ Ｐゴシック'  => 'ＭＳ Ｐゴシック',
'ＭＳ Ｐ明朝'      => 'ＭＳ Ｐ明朝',
'MS UI Gothic'     => 'MS UI Gothic',
'ＭＳ ゴシック'    => 'ＭＳ ゴシック',
'ＭＳ 明朝'        => 'ＭＳ 明朝',
'Andale Mono'      => 'andale mono,times',
'Arial'            => 'arial,helvetica,sans-serif',
'Arial Black'      => 'arial black,avant garde',
'Book Antiqua'     => 'book antiqua,palatino',
'Comic Sans MS'    => 'comic sans ms,sans-serif',
'Courier New'      => 'courier new,courier',
'Georgia'          => 'georgia,palatino',
'Helvetica'        => 'helvetica',
'Impact'           => 'impact,chicago',
'Symbol'           => 'symbol',
'Tahoma'           => 'tahoma,arial,helvetica,sans-serif',
'Terminal'         => 'terminal,monaco',
'Times New Roman'  => 'times new roman,times',
'Trebuchet MS'     => 'trebuchet ms,geneva',
'Verdana'          => 'verdana,geneva',
'Webdings'         => 'webdings',
'Wingdings'        => 'wingdings,zapf dingbats'
);

編集したら/wp-content/pluginsに適当なフォルダ(ab_tinymce_init_settingなど)を作ってアップロードします。　プラグイン>インストール済み　のリストに挙がってくるので有効化します。

次に、CSS編集ボタンを押したときに出てくるダイアログのフォントを追加しましょう。/wp-content/plugins/tinymce-advanced/mce/style/js/props.jsを編集します。

var defaultFonts = "" +
"ＭＳ Ｐゴシック;" +
"ＭＳ Ｐ明朝;" +
"MS UI Gothic;" +
"ＭＳ ゴシック;" +
"ＭＳ 明朝;" +
"Arial, Helvetica, sans-serif=Arial, Helvetica, sans-serif;" +
"Times New Roman, Times, serif=Times New Roman, Times, serif;" +
"Courier New, Courier, mono=Courier New, Courier, mono;" +
"Times New Roman, Times, serif=Times New Roman, Times, serif;" +
"Georgia, Times New Roman, Times, serif=Georgia, Times New Roman, Times, serif;" +
"Verdana, Arial, Helvetica, sans-serif=Verdana, Arial, Helvetica, sans-serif;" +
"Geneva, Arial, Helvetica, sans-serif=Geneva, Arial, Helvetica, sans-serif";

例によって日本語フォントを上に追加しました。 以上で上部とCSS編集ボタンのフォント選択に日本語フォントが追加されます。反映されない場合は一度TinyMCE Advancedを無効にしてテキストエリアを表示、再度TinyMCE Advancedを有効にするなどしてみてください。

参考URL：
TinyMCE Advanced＋日本語フォント追加 | WordPressでホームページ制作
TinyMCE Init Setting プラグイン « Just Another WPMU weblog