[WordPress] ビジュアルエディタにオリジナル機能のボタンを付ける
ビジュアルエディタからテーブルのセル（td要素）の背景色を変更するのに Editor Extender プラグインを使っていましたが、プラグインの開発が止まっているようで、現在のWPでは使えなくなっていました…。どうしてもビジュアルエディタから簡単に、td要素の背景色変更をしたかったためオリジナルボタンをエディタに追加しました。その方法のメモです。
全体の流れやWordPressへの組み込み方など以下の記事が大変参考になりました。
WordPress のエディタは TinyMCE という外部のエディターが使われている為、エディタ部分をカスタマイズするには TinyMCE のプラグインを作る必要があります。TinyMCE のプラグインファイルを作り、そのプラグインを WordPress で読み込むという感じです。
この記事では「カーソルがあたっている要素の背景色を変更するボタンを作る」を例として説明しています。※ここでご紹介している方法は、WordPress 3.9.1 で動作確認しています。
TinyMCE のプラグインを作る（editor_plugin.js ファイルを作る）
まずは、実装したい機能のボタンを追加するコードを TinyMCE のプラグインファイルに書いていきます。
TinyMCE の公式ドキュメントにもプラグインの作成方法が書かれています。（WordPress 3.9 だと TinyMCE 4 になっているようですが、この 3.X 系のマニュアルでも大丈夫みたいです。 ）
TinyMCE – Creating a plugin
ボタンを追加するプラグインのひな形（例）
editor_plugin.js というファイルを新規で作り以下のようにコードを記入します。
(function() {
tinymce.create('tinymce.plugins.ExamplePlugin', { // 'ExamplePlugin' の部分には任意のプラグイン名が入ります。
init : function( ed, url) {
// ed には現在開いてるエディタの情報が入る
// url にはこのJsファイルまでのパスが入る
// コマンドを作る
ed.addCommand( 'example_cd', // 任意のコマンド名
// ↓追加したいコマンド（機能）内容を記入
function() {
ed.execCommand("mceInsertContent", false, "<div>example</div>");
// ↑ これだと <div>example</div> を挿入するコマンドです
});
// 上で書いたコマンドを実行するボタンを作る
ed.addButton( 'example', { // 任意のボタン名
title : 'example.desc', // ボタンのタイトル（マウスオーバー時に表示される）
cmd : 'example_cd', // 上で書いたコマンド名
image : url + '/img/example.gif' // ボタン画像のパス
});
},
// プラグインに関する情報（著者、ver など）を記入
getInfo : function() {
return {
longname : 'Example plugin',
author : 'Some author',
authorurl : 'http://tinymce.moxiecode.com',
infourl : 'http://wiki.moxiecode.com/index.php/TinyMCE:Plugins/example',
version : "1.0"
};
}
});
// ここまでに書いたプラグインコードを tinymce.PluginManager に登録。引数には行頭に書いたプラグイン名を入れる。
tinymce.PluginManager.add('example', tinymce.plugins.ExamplePlugin);
})();
上記のコードで使っている mceInsertContent は指定したコンテンツを挿入するというコマンドですが、他にもいろいろコマンドが用意されています。
TinyMCE – Command identifiers
コマンド内で使われているメソッドは TinyMCE 独自のもので、わかりにくいですが公式ドキュメントに一覧があります。
TinyMCE – tinymce.dom.DOMUtils
ボタンの画像は別途作成して（20px × 20px程度のもの）このJSファイルと同じディレクトリかそれ以下にアップロードしておく必要があります。
カーソルがあたっている要素の背景色を変更するボタンを作る
上記のひな形を元に、ビジュアルエディタ内のカーソルがあたっている要素の背景色を変更するボタンを作ってみます。ここでは、addbutton という名前のフォルダを作り、そのフォルダへ editor_plugin.js と表示するボタンの画像 pink.png を入れ、使用中のテーマファイル内にアップロードしています。
editor_plugin.js ファイルに以下のように記入します。
(function() {
tinymce.create('tinymce.plugins.addBgcolor', {
init : function( ed, url) {
// コマンドを作る
ed.addCommand( 'add_bgcolor', // 任意のコマンド名
function() {
var node = ed.selection.getNode();
// var node には現在選択中の要素が入る
ed.dom.setStyle(node, 'background-color', 'pink');
// setStyle でスタイルを入れる
});
// 上で書いたコマンドを実行するボタンを作る
ed.addButton( 'button_pink', { // 任意のボタン名
title : '背景色を赤へ変更', // ボタンのタイトル（マウスオーバー時に表示される）
cmd : 'add_bgcolor', // 上で書いたコマンド名
image : url + '/pink.png' // ボタン画像のパス
});
},
getInfo : function() {
return {
longname : 'tinymce.plugins.addBgcolor',
author : 'Saori',
authorurl : 'https://memocarilog.info/',
infourl : 'https://memocarilog.info/wordpress/6227',
version : "1.0"
};
}
});
tinymce.PluginManager.add('addBgcolor', tinymce.plugins.addBgcolor);
})();
これで TinyMCE のプラグインファイルは完成です。次にこのファイルを WordPress に読み込んでもらうためのコードを functions.php へ書き込んでいきます。
TinyMCE のプラグインを読み込むコードを functions.php へ記入する
ここはほとんど参考記事コードのままです。functions.php へ以下のように記入します。
書き換える点は、「ボタンを追加する」ところでプラグインファイルに記入したボタン名を、
「プラグインファイルに関する情報」のところでプラグイン名とファイルのパスを記入します。
class newMceButton {
function newMceButton() {
add_action('init', array(&$this, 'addbuttons'));
}
function sink_hooks(){
add_filter('mce_plugins', array(&$this, 'mce_plugins'));
}
function addbuttons() {
if ( ! current_user_can('edit_posts') && ! current_user_can('edit_pages') )
return;
if ( get_user_option('rich_editing') == 'true') {
add_filter("mce_external_plugins", array(&$this, 'mce_external_plugins'));
add_filter('mce_buttons', array(&$this, 'mce_buttons'));
}
}
// ボタンを追加する
function mce_buttons($buttons) {
array_push($buttons, "button_pink" ); // 第二引数には作ったボタン名
return $buttons;
}
// プラグインファイルに関する情報
function mce_external_plugins($plugin_array) {
$plugin_array['addBgcolor'] = get_bloginfo('template_url') .'/addButton/editer_plugin.js';
// プラグイン名とアップした editer_plugin.js のパス
return $plugin_array;
}
}
$mybutton = new newMceButton();
add_action('init',array(&$mybutton, 'newMceButton'));
これでボタンの追加作業が終了です。投稿画面を開くとボタンが追加されています。
ボタン追加後の投稿画面
td要素にカーソルを合わせボタンをクリックすると背景色がかわります。
背景色を変更したソースコードは以下のように直接タグにスタイルをあてる感じになります。classを付与してCSSファイル側で色を変更してもよいですね。
デモでは、もう一つ、色をクリアにするボタンも付けました。
ボタンをもう一つ増やすには、editor_plugin.js ファイルにコマンド部分とボタン部分の記述を増やすだけです。この例で付けたクリアボタンは以下のようになっています。
ed.addCommand( 'add_bgcolor',
function() {
var node = ed.selection.getNode();
ed.dom.setStyle(node, 'background-color', 'pink');
});
ed.addButton( 'button_pink', {
title : '背景色をピンクへ変更',
cmd : 'add_bgcolor',
image : url + '/pink.png'
});
// 以下を付けたす
ed.addCommand( 'clear_bgcolor',
function() {
var node = ed.selection.getNode();
ed.dom.setStyle(node, 'background-color', '');
});
ed.addButton( 'bg_clear', {
title : '背景色をクリア',
cmd : 'clear_bgcolor',
image : url + '/clear.png'
});
そして、functions.php ファイルの以下の部分、array_push でボタン名を追加すればOKです。
// ボタンを追加する
function mce_buttons($buttons) {
array_push($buttons, "bg_pink","bg_clear");
return $buttons;
}
その他のコードメモ
いろいろ調べるうちに見つけた TinyMCE の class を付与したり要素を取得するコードのメモです。
クラスを付ける
tinyMCE.activeEditor.dom.addClass( tinyMCE.activeEditor.dom.select("セレクタ"), 'クラス名' );
クラスを外す
tinyMCE.activeEditor.dom.removeClass(
tinyMCE.activeEditor.dom.select('セレクタ'), 'クラス名'
);
現在カーソルがあたっている要素を取得
tinyMCE.activeEditor.selection.getNode();
現在カーソルがあたっている要素の直近の親要素を取得
tinyMCE.activeEditor.dom.getParent(tinyMCE.activeEditor.selection.getNode());
選択したテキストを取得
tinyMCE.activeEditor.selection.getContent()
2 Comments & Tracbacks