プログラミング

WordPressのTinyMCEをチキチキにカスタマイズする

高橋文樹

2011 年 10 月 9 日
読了4分（3,033文字）
Tips WordPress

この投稿は 13年前に公開されました。いまではもう無効になった内容を含んでいるかもしれないことをご了承ください。

最近続いているWordPressエントリーの続きです。ところでみなさん、HTMLタグは好きですか？　僕はというと、特に好きとかはなくて、「セマンティックWebを実現するために大事だとは思うけど、書きたくはない」という感じです。

さて、WordPressにはTinyMCEというWYSIWYGエディタがついています。これはWordPressの中の人ではなくMoxiecodeというスウェーデンの人が作ったオープンソースのソフトですね。

今回はいかにタグ打ちをせずに済ませるかという点にしぼってご説明します。たぶんリンク集みたいになると思いますが、カスタマイズの方法は大体下記の通りです。

TinyMCEでの見映え自分のブログと統一する（初級）
TinyMCEに元からあるボタンを追加する（中級）
TinyMCEに消されるタグを救う（特にiframe）（中級）
TinyMCEにオリジナルのボタンを追加する（上級）

TinyMCEでの見映え自分のブログと統一する（初級）

このブログのTinyMCEはこんなです

世の中には全部タグ打ちで書いているWPerもいるかと思いますが、見映えが一致しているとビジュアルエディタで書くのも楽しくなってきますし、なによりクライアントワークのときは一々説明するのがめんどくさくないので楽です。

このやり方は簡単で、テーマ内のfunctions.phpに以下のコードを書いてください。

add_editor_style("editor-style.css");

これでテーマフォルダのトップにあるeditor-style.cssが適用されるようになります。

もし投稿タイプごとに異なるデザインにしてたりする場合は、こんな感じで書いておくと別々のを読み込んでくれます。Killer hacks to enhance WordPress editorに書いてありました。

/**
 * 別々のeditor-style.cssを追加
 * @return void
 */
function _my_editor_style(){
     global $current_screen;
     switch ($current_screen->post_type){
          case 'post':
               add_editor_style('css/editor-style-post');
               break;
          case 'ebook':
               add_editor_style('css/editor-style-ebook');
               break;
     }
}
add_action('admin_head', '_my_editor_style');

TinyMCEに元からあるボタンを追加する（中級）

WordPressのTinyMCEは色々と設定が施されたものなのですが、実は後から変更できます。こんなことを書くのはなんですが、まずはTinyMCE Advancedというプラグインを使ってください。便利です。

ここではこのプラグインでたぶん実現できないものを紹介します。

ブロックレベル要素のボタンをカスタマイズ

選べるタグを変更

僕のブログではタイトルにh1を使っており、「一文書にはh1ひとつ」という原則に従って本文中にh1を使うことはありません。小見出しもレベル5までと決めています。その一方、定義リスト（dlタグ）が大好きなので、これを追加したいです。やり方はこちらをfunctions.phpに書いておいてください。

/**
 * TinyMCEの初期化配列を作成する
 * @param array $initArray
 * @return array
 */
function _my_tinymce($initArray) {
     //選択できるブロック要素を変更
     $initArray['theme_advanced_blockformats'] = 'p,h2,h3,h4,h5,dt,dd,div,pre';
     return $initArray;
}
//TMAより後に実行されるように、10000番ぐらいにフック登録
add_filter('tiny_mce_before_init', '_my_tinymce', 10000);

これで選択できるものが変わりました。なぜかdlはないのでタグ打ちしないと行けないのですが、やり方わかったら追記します。

ちなみに、選択できる要素はtinyMCEのドキュメント（見辛い！）によると、そんなに多くないですね。これ以外も書けるのかもしれませんが、よくわかりません。基本はブロック要素だけですね。sampタグなんて使うの？

スタイルボタンの要素を追加

これはeditor-style.cssをきちんと設定したときに威力を発揮します。ある程度WordPressのデザインを作り込むと、デフォルトのタグだけでは扱いきれない要素が出てきて、span.cautionとか、p.errorとかも使いたくなってきます。たとえば、このブログではp.successとp.warningという要素があります。

これはp.successです。

色んなスタイルを設定した場合、そのスタイルを適用するボタンを作りたくなりますね。スクリーンキャスト撮ったので、参考にしてください。

やり方はこんな感じです。先ほど上で定義した_my_tinymceの中に書いて下さい。

//スタイリング用クラス
$style_formats = array(
      array(
           'title' => 'サクセス',
           'block' => 'p',
           'classes' => 'message success'
      ),
      array(
           'title' => '注意',
           'block' => 'p',
           'classes' => 'message warning'
      ),
      array(
           'title' => '注意書き',
           'inline' => 'span',
           'classes' => 'alert'
      )
);
$initArray['style_formats'] = json_encode($style_formats);
return $initArray;

クラスは複数指定可能なので、clearfixとかも使えます。フロート解除等にも便利ですね。

TinyMCEに消されるタグを救う（特にiframe）（中級）

これはGoogleマップが消される問題を解決するために使っています。他にもrubyタグとか、mapタグとか、マイナーなタグを使うときはこの方法で。HTML5もいけるんじゃないでしょうか。上と同様、_my_tinymceの中に記述してください。

$initArray[ 'extended_valid_elements' ] .= "iframe[id|class|title|style|align|frameborder|height|longdesc|marginheight|marginwidth|name|scrolling|src|width]";
//タグ名[属性|属性],タグ名[属性|属性],タグ名[属性|属性]...

TinyMCEにオリジナルのボタンを追加する（上級）

オリジナルのボタンを追加するとなるとかなり使いこなしてる感が出て嬉しいですね。たとえば、僕が個人的に好きなのにあんまり使われてないタグに引用文であることを示すqタグというのがあります。blockquoteのインライン版ですね。これにcite属性を組み合せれば、かなり論文っぽいブログを作ることができます。qタグのcite属性を引っこ抜いて文末脚注を作るようなjQueryを書いたりするとアカデミックでかっこいいですよね。ibid. citéとか書きたいです。

オリジナルのボタンを追加するには、プラグイン（WordPressのプラグインではなく、TinyMCEのプラグイン）として作成する必要があります。一応、このためのインターフェースは用意されています。

/**
 * オリジナルのボタンを登録する
 * @param array $buttons
 * @return array
 */
function _my_register_button($buttons)
{
	array_unshift($buttons, "mybutton", "separator");
	return $buttons;
}
//mce_button_の数字は1〜3で好きな値に
add_filter('mce_buttons_3', '_my_register_button');

/**
 * TinyMCE用のプラグインを登録する
 * @param array $plugin_array
 * @return array
 */
function _my_mce_plugin($plugin_array)
{
	$plugin_array['mybutton'] = '/url/to/plugin/directory/editor_plugin.js';
	return $plugin_array;
}
add_filter("mce_external_plugins", "_my_mce_plugin", 100);

これでeditor_plugin.jsにTinyMCEのプラグインとしてのコードを書いていかなくては行くことになるのですが、けっこうやることは多いです。

翻訳用ファイルを登録する（これはなくてもいいけど、WordPressのgettextを使った翻訳と統一するためにはちょっと工夫が必要）
ポップアップダイアログ（qタグの場合、cite属性を入力するためのプロンプトが必要になる）を作る場合は、そのためのファイルを用意する必要があり、ダイアログウインドウの入力を受け取るためのJSを記載する必要がある
選択文字列のタグを脱がせたり着せたりするのはTinyMCEのAPIを使うとできるので、ドキュメントを漁ってください。基本的にはtinymce.Editorクラスをなんとかすればいけるはずです。

もっと細かく説明しようと思ったのですが、もう出かけなくてはいけないのと、めんどくさいという感情が高まってきたので、以前作ったrubyタグ挿入プラグインのGithubリンクを貼って終わりにします。他にWebTechNoteというブログにTinyMCEのビジュアルリッチエディタにカスタムボタンを追加するや自作したショートコードをビジュアルエディタ内で置換するなどの記事があるので、参考にしてみてください。上級者ならできる！

終わりに

TinyMCEは改行連続がついこのあいだまでできなかったことやタグの自動消去機能などからマークアップ大好きな人に嫌われていたのですが、世の中の大半の人はマークアップを知らないので、WordPressを納品したり、WordPressでサービスを提供している人はがんばってカスタマイズするのが吉だと思います。

でも管理画面使いやすくしてもあんまりお金貰えないんだよなーと愚痴りつつ、尻すぼみでエントリーを終えます。WordPressのビジュアルエディタをカスタマイズするというエントリーなども参考になります。