WordPress TinyMCEプラグインの作り方

WordPressの開発者であれば、WordPressのビジュアルエディターをカスタマイズしたり拡張したりすることがあるでしょう。例えば、ビジュアルエディターのツールバーにボタンを追加して、クライアントがHTMLコードを書かずにテキストボックスやコールトゥアクションボタンを簡単に挿入できるようにしたいと思うかもしれません。この投稿では、WordPressでTinyMCEプラグインを作成する方法を紹介します。

必須項目

このチュートリアルは上級ユーザー向けです。もしあなたがビジュアルエディターを拡張したいだけの初心者レベルのユーザーであれば、TinyMCE Advancedプラグインをチェックするか、WordPressビジュアルエディターの使い方のヒントをご覧ください。

このチュートリアルでは、基本的なコーディングスキルと、テストできるWordPressインストールへのアクセスが必要です。

生きているサイトでプラグインを開発するのはよくありません。コードのちょっとしたミスでサイトにアクセスできなくなる可能性があるからだ。しかし、どうしてもライブサイトでプラグインを開発したいのであれば、まずWordPressをバックアップしてください。

最初のTinyMCEプラグインを作成する

まず、カスタムTinyMCEツールバーボタンを登録するWordPressプラグインを作成します。このボタンをクリックすると、ユーザーはカスタム CSS クラスでリンクを追加できるようになります。

ソースコードはこの投稿の最後にすべて提供されるが、それまではステップ・バイ・ステップでプラグインを作成していこう。

まず、インストールしたWordPressのwp-content/pluginsフォルダにディレクトリを作成する必要がある。このフォルダーにtinymce-custom-link-classという名前をつける。

ここからプラグインのコードを追加していきます。

プラグインヘッダー

先ほど作成したプラグインディレクトリに新規ファイルを作成し、ファイル名をtinymce-custom-link-class.phpとします。このファイルに以下のコードを追加し、保存します。

[cbk1］

これは単なるPHPコメントで、WordPressにプラグインの名前、投稿者、説明を伝えます。

WordPressの管理エリアで、「プラグイン」＞「インストール済みプラグイン」と進み、TinyMCE Custom Link Classプラグインの横にある「有効化」をクリックして、新規プラグインを有効化します：

プラグインクラスの設定

もし2つのWordPressプラグインが同じ名前の関数を持つと、エラーになります。関数をクラスでラップすることで、この問題を回避します。

class TinyMCE_Custom_Link_Class {
	
	/**
	* Constructor. Called when the plugin is initialised.
	*/
	function __construct() {
		
	}

}

$tinymce_custom_link_class = new TinyMCE_Custom_Link_Class;

これでPHPクラスが作成され、$tinymce_custom_link_class = new TinyMCE_Custom_Link_Class;という行に到達したときに呼び出されるようになります。

このクラスの中に追加する関数は、他のWordPressプラグインと衝突しないようにします。

TinyMCEプラグインのセットアップを開始する

次に、ビジュアルエディターのツールバーにカスタムボタンを追加したいことをTinyMCEに伝える必要があります。これを行うには、WordPressのアクション、特にinitアクションを使います。

プラグインの__construct()関数の中に以下のコードを追加します：

[cbk3］

これは、WordPressの管理者インターフェースにいるかどうかをチェックします。もしそうなら、WordPressが最初の読み込みルーチンを終了したときに、WordPressにクラス内のsetup_tinymce_plugin関数を実行するように依頼します。

次に、setup_tinymce_plugin関数を追加します：

[cbk4］

これは、現在ログイン中のWordPressユーザーが投稿やページを編集できるかどうかをチェックします。もし編集できなければ、ビジュアルエディターが表示されないので、そのユーザーにTinyMCEプラグインを登録する意味がありません。

WordPressユーザーの中には、「ユーザー」>「プロフィール」でビジュアルエディターをオフにしている人もいます。ユーザーがビジュアルエディターを使用していない場合は、他に何もする必要がないので、関数をリターン（終了）します。

最後に、2つのWordPressフィルター –mce_external_pluginsと mce_buttonsを追加して、TinyMCEに必要なJavascriptファイルを読み込み、TinyMCEツールバーにボタンを追加する関数を呼び出します。

ビジュアル・エディターへのJavascriptファイルとボタンの登録

それでは、add_tinymce_plugin関数を追加してみましょう：
[cbk5］

この関数は、$plugin_array配列に格納されているJavascriptファイルを読み込む必要があることをTinyMCEに伝えます。これらのJavascriptファイルは、TinyMCEに何をすべきかを指示します。

また、add_tinymce_toolbar_button関数にコードを追加して、ツールバーに追加したいボタンについてTinyMCEに伝える必要があります：

[cbk6］

区切り（｜）とボタンのプログラム名（custom_link_class）です。

プラグインを保存し、ページまたは投稿を編集してビジュアルエディターを表示します。ツールバーが表示されていない可能性があります：

ウェブブラウザーのインスペクター・コンソールを使用すると、TinyMCEによって404エラーと通知が生成され、Javascriptファイルが見つからないことがわかります。

これは、TinyMCEカスタムプラグインの登録に成功したことを意味し、あとはTinyMCEに指示を出すためのJavascriptファイルを作成する必要があります。

Javascriptプラグインの作成

wp-content/plugins/tinymce-custom-link-classフォルダに新規ファイルを作成し、tinymce-custom-link-class.jsと名付けます。jsファイルに次のコードを追加します：

[cbk7］

これはTinyMCEプラグイン・マネージャ・クラスを呼び出すもので、TinyMCEプラグインに関連する多くのアクションを実行するために使用できます。具体的には、add関数を使ってプラグインをTinyMCEに追加します。

これは、プラグインの名前（custom_link_class）と匿名関数の2つの項目を受け入れます。

コーディングにおける関数の概念に慣れているなら、無名関数とは単に名前のない関数のことです。例えば、関数foobar() { . ..} は、foobar() を使うことで、コードのどこかで呼び出すことができる関数です。

add()関数が呼び出された時点でのみ呼び出されるのです。

Javascriptファイルを保存し、ページまたは投稿を編集してビジュアルエディターを表示します。すべてがうまくいっていれば、ツールバーが表示されます：

今現在、私たちのボタンはツールバーに追加されていません。それは、TinyMCEにカスタムプラグインであることを伝えただけだからです。今度は、TinyMCEに何をすべきか、つまり、ツールバーにボタンを追加することを指示する必要がある。

Javascriptファイルを更新し、既存のコードを次のように置き換えます：

[cbk8］

無名関数には引数が2つあることに注意してください。1つ目はエディターのインスタンスで、これはTinyMCEビジュアル・エディターです。PluginManager上でさまざまな関数を呼び出せるのと同じように、エディター上でもさまざまな関数を呼び出せます。この場合、ツールバーにボタンを追加するためにaddButton関数を呼び出しています。

Javascriptファイルを保存し、ビジュアル・エディターに戻ってください。一見したところ、何も変わっていないように見えます。しかし、一番上の行の一番右のアイコンの右にマウスカーソルをオーバーすると、ツールチップが表示されるはずです：

ツールバーにボタンが追加されましたが、画像が必要です。addButton関数のtitle:行の下に以下のパラメータを追加します：

image: url + '/icon.png'、

urlはプラグインのURLです。プラグインフォルダー内の画像ファイルを参照したい場合、画像ファイル名をURLに追加できるので便利です。この場合、プラグインのフォルダーにicon.pngという画像が必要です。以下のアイコンを使用してください：

ビジュアルエディターをリロードすると、アイコンが付いたボタンが表示されます：

実行するコマンドの定義

現在、ボタンをクリックしても何も起こりません。ボタンがクリックされたときに実行するコマンドをTinyMCEに追加してみましょう。

Javascriptファイルのeditor.addButtonセクションの最後に、以下のコードを追加します：

[cbk9］

ビジュアルエディターをリロードし、ボタンをクリックすると、ボタンをクリックしたことを確認するアラートが表示されます：

このアラートをプロンプトに置き換えて、ビジュアルエディターで選択したテキストを囲むリンクをユーザーに尋ねてみましょう：

[cbk10］

このコードのブロックはいくつかのアクションを実行します。

まず、ユーザーがビジュアルエディターでリンクするテキストを選択したかどうかをチェックします。もしそうでなければ、リンクするテキストを選択するようアラートが表示されます。

次に、リンクの入力を求めます。キャンセルされた場合、あるいは何も入力されなかった場合、私たちはそれ以上何もしません。

最後に、TinyMCEエディター上でexecCommand関数を実行し、特にmceReplaceContentアクションを実行します。これは、ユーザーが選択したテキストを使って、class=”button “のアンカー・リンクからなるHTMLコードで、選択したテキストを置き換えます。

すべてがうまくいっていれば、選択したテキストがビジュアルエディターとテキストビューでリンクされ、クラスがボタンに設定されていることがわかります：

要約

WordPressのTinyMCEビジュアルエディターにボタンを追加するWordPressプラグインを作成することに成功した。このチュートリアルでは、TinyMCE API の基礎と、TinyMCE の統合に利用できる WordPress フィルターについても説明した。

ユーザーがカスタマイザーのボタンをクリックすると、ビジュアルエディターでテキストを選択するよう促され、任意の URL にリンクできるようにコードを追加しました。 最後に、プラグインは選択されたテキストを、buttonというカスタムCSSクラスを含むリンクされたバージョンに置き換えます。

このチュートリアルで、WordPress TinyMCEプラグインの作成方法を学んでいただけたら幸いです。サイト固有のWordPressプラグインの作成方法についてのガイドもご覧ください。

この投稿が気に入ったなら、WordPress動画チュートリアルのYouTubeチャンネルを購読してください。Twitterや Facebookでもご覧いただけます。