WordPressのビジュアルエディタに表作成機能を追加する

よくありそうなカスタマイズなので、備忘録代わりに投稿しておきます。

WordPressのビジュアルエディタは、TinyMCEを使っているみたいです。だけど、すべての機能を使えるわけではなく、厳選したプラグインと独自のプラグインしか入っていないようで、表の作成機能が入っていません。

表の作成機能が欲しければ、以下の2つの方法がありそうです。

サードパーティのプラグインで拡張
独自プラグインで拡張

サードパーティのプラグインで拡張

WordPressの管理画面からそれらしいプラグインを検索してみました。例「mce table」

MCE Table Buttonsというのがスクリーンショットを見る限りでも目的のプラグインっぽいです。

でも、これ、インストールしてみると、表の作成機能に表示される文字が英語です。それではよろしくないので、以下の方法で日本語化しましょう。

下記のプラグインのディレクトリ内にある、en_dlg.jsでUIの表記を変えられるようです。

mce-table-buttons/mce-table/langs/en_dlg.js

これをすべて手入力で変えてもいいし、面倒だったら以下のどちらかで上書きしてやれば良いと思います。

Language pack for TinyMCEの日本語packで上書き

一番確実な方法。

Language pack for TinyMCEから日本語packをダウンロード。
ダウンロードしたzipファイルを解凍。
解凍したディレクトリのplugins/tableの中にある、ja_dlg.jsをWPのwp-content/plugins/mce-table-buttons/langs/にぶっこんで、en_dlg.jsを削除する。

MODxからパクる

やっていいのかどうかはわかんないですけど、検索したらMODxの該当コードが引っかかったので、これもありかなと思いました。

MODxのja_dlg.jsのソースコードをダウンロード
それをWPのwp-content/plugins/mce-table-buttons/langs/にぶっこんで、en_dlg.jsを削除する。

独自プラグインで拡張

既存プラグインをあてにするのはバージョン依存とかもあるし、潰しが効かないので、できれば独自プラグインで拡張する方がいいのかなと思いました。

ということで、MCE Table Buttonsのソースコードを参考に、独自プラグインを書いてみます。

WordPressのTinyMCEのバージョンを確認する

どこかに掲載されているのかもしれませんが、以下の方法で確認できるようです。

WordPressの記事投稿画面に移動する。（要するに、TinyMCEが使われている画面のこと）
Firebug等のJavaScriptコンソールで以下のコマンドを実行する。

console.log(tinymce.majorVersion + '.' + tinymce.minorVersion);

TinyMCEをダウンロードしておく

さっきの手順で確認したバージョンのTinyMCEをダウンロードしておきます。

Pluginを書く

MCE Table Buttonsのソースコードを参考に、Pluginを書きます。と言うかほぼコピペしました。

<?php
/*
Plugin Name: hoge
*/
add_action('admin_init', 'mce_table_buttons_setup');

function mce_table_buttons_setup() {
  //only if editing permissions do we bother
  if (!current_user_can('edit_posts') && !current_user_can('edit_pages')) return;
  if ( get_user_option('rich_editing') == 'true') {
    add_filter('mce_external_plugins', 'add_mcetable_tinymce_plugin');
    add_filter('mce_buttons_3', 'rigbc_mcetable_buttons');
  }
}

function add_mcetable_tinymce_plugin($plugin_array) {
  $plugin_array['table'] = WP_PLUGIN_URL.'/hoge/editor_plugin.js';
  return $plugin_array;
}

function rigbc_mcetable_buttons($buttons) {
  array_push($buttons, 'tablecontrols');
  return $buttons;
}
?>

ちゃんとTinyMCEを拡張するためにプラグインフックが用意されているみたいです。

WordPressのプラグインフォルダに作ったプラグインをぶっこむ

作ったプラグインのphpファイルと、ダウンロードしたTinyMCEに入っているtableプラグインの中身を全部作ったプラグインのフォルダ内にぶっこみます。

プラグイン内のhtmファイル内のjsのパスをすべて変更する

ぶっこんだファイルの内、table.htm、row.htm、cell.htm、merge_cells.htmでscript要素を使ってTinyMCEで使用する各種jsを読み込んでいますが、パスが異なるので変更します。

具体的には、../../hoge/fuga.jsとなっている箇所を、../../../wp-includes/js/tinymce/hoge/fuga.jsみたいな感じに直します。プラグインからの相対パスを確認してください。

UIを日本語化する

「既存のプラグインを拡張」で紹介したとおり、ja_dlg.jsをtableプラグインのlangsフォルダの中に保存して、en_dlg.jsを削除すれば、UIを日本語化できます。

まとめ

既存のプラグインを拡張した方が簡単、それが気にくわなければ、それなりにめんどい手順を踏む必要がある。

あと味

たくさん情報を食べて、たくさん発信すると、あとになって味わい深い。