WordPressのTinyMCEをカスタマイズする(2012年版)

TinyMCEのカスタマイズ

ずっと前に、WordPessのビジュアルエディタのフォントを変える方法について書いたのですが、その後WordPressのバージョンが上がって、もっと柔軟にカスタマイズする方法も分かったので、私がクライアントワークで設定している方法をまとめておきます。

編集画面の見た目をブログの見た目と合わせる

まずは、編集画面に自分の作ったCSSを適用できるようにします。
functions.phpに

add_editor_style('editor-style.css');
function custom_editor_settings( $initArray ){
 $initArray['body_class'] = 'editor-area'; //オリジナルのクラスを設定する
 return $initArray;
 }
 add_filter( 'tiny_mce_before_init', 'custom_editor_settings' );

と記述し、使用中のテーマフォルダの中に editor-style.css という名前のCSSファイルを入れます。

editor-style.cssの中身

上のコードで、編集画面の部分に.editor-areaというクラスを指定しているので、これをCSSファイルに書いておきます。

html .mceContentBody {
 color: #333;
 line-height: 1.6;
 max-width: 560px;
 }
.editor-area h3 {
 font-size: 18px;
 }
.editor-area. h4 {
 font-size: 16px;
 }

これはTwenty Elevenのeditor-style.cssを参考にしているのですが、最初だけ.mceContentBody でBodyの幅を決めて、あとは普通にスタイル指定しているみたいです。
念のため、頭に.editor-areaをつけてから指定しているのですが、もしかしたら不要なんでしょうか。

TinyMCEのボタンをカスタマイズする

フォーマットを追加する

ほとんどのケースでh1h2タグはページの見出しに使っていて、記事の編集画面では不要となるので、TinyMCEのボタンからh1h2を削除します。
functions.phpに

function custom_editor_settings( $initArray ){
 $initArray['theme_advanced_blockformats'] = 'p,pre,code,h3,h4,h5,h6'; //メニュー内容の指定
 return $initArray;
 }
 add_filter( 'tiny_mce_before_init', 'custom_editor_settings' );

と書きます。メニュー内容を指定する部分に、p(段落)、pre(整形済み)、code(ソースコード)、その他h3以下の見出しを入れています。
h1は不要だけどh2は必要という場合は、codeh3のあとに、h2を入れます。

不要なボタンを削除する

コンテンツによっては、hrなどTinyMCEに標準で入っていないボタンを使いたい時があるので、コンテンツの内容に応じて追加しています。

functions.phpに

function custom_editor_settings( $initArray ){
 $initArray['theme_advanced_buttons3'] = 'hr,fontsizeselect';
 return $initArray;
 }
 add_filter( 'tiny_mce_before_init', 'custom_editor_settings' );

と記述すると、ボタンを追加できますが、位置の指定まではできないみたいです。
普段は上のメニュー追加と合わせて、まとめて以下のように記述しています。

function custom_editor_settings( $initArray ){
 $initArray['body_class'] = 'editor-area'; //オリジナルのクラスを設定する
 $initArray['theme_advanced_blockformats'] = 'p,address,pre,code,h3,h4,h5,h6'; //メニュー内容の指定
 $initArray['theme_advanced_buttons3'] = 'hr,fontsizeselect';
 return $initArray;
 }
 add_filter( 'tiny_mce_before_init', 'custom_editor_settings' );

プラグインを使ってカスタマイズする

私は言われたことないですが、テーブルを頻繁に入れたいとか、標準のボタンで対応できない内容をリクエストされた場合は、プラグインを使っても良いのかなと思います。

WordPressで使うのだったら、

の2つが定番だと思うのですが、2つ同時には使えないので注意です。

プラグインは便利なんですが、あんまり沢山入れると管理画面を見たときゴチャゴチャになるし、サイト納品後にちゃんとアップデートしてもらえるか分からないので、functions.phpに書いて済むものは、なるべくそうするようにしています。

おまけ:コンテンツ部分の幅をfunctions.phpに指定する

自分で作ったテーマのチェックをしていて気がついたのですが、functions.phpに

if ( ! isset( $content_width ) )
 $content_width = 560;

と、コンテンツの幅をpxで指定しておくと、画像をアップロードするときにこのサイズが選べるようになりました。便利!

コメントを残す