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という名前を付けます。このファイルに以下のコードを追加して保存してください。

/**
 * Plugin Name: TinyMCE Custom Link Class
 * Plugin URI: http://wpbeginner.com
 * Version: 1.0
 * Author: WPBeginner
 * Author URI: https://www.wpbeginner.com
 * Description: A simple TinyMCE Plugin to add a custom link class in the Visual Editor
 * License: GPL2
 */

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

WordPressの管理画面で、[プラグイン] > [インストール済みプラグイン]に移動し、TinyMCE Custom Link Classプラグインの横にある[有効化]をクリックして、新しいプラグインを有効にします。

プラグインクラスの設定

WordPressプラグインが同じ名前の関数を2つ持っている場合、エラーが発生します。クラスで関数をラップすることで、この問題を回避します。

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()関数内に次のコードを追加します。

if ( is_admin() ) {
	add_action( 'init', array(  $this, 'setup_tinymce_plugin' ) );
}

これは、WordPress 管理画面にいるかどうかを確認します。もしそうであれば、WordPress が初期ロード ルーチンを完了したときに、クラス内の setup_tinymce_plugin 関数を実行するように WordPress に依頼します。

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

/**
* Check if the current user can edit Posts or Pages, and is using the Visual Editor
* If so, add some filters so we can register our plugin
*/
function setup_tinymce_plugin() {

// Check if the logged in WordPress User can edit Posts or Pages
// If not, don't register our TinyMCE plugin
	
if ( ! current_user_can( 'edit_posts' ) && ! current_user_can( 'edit_pages' ) ) {
	        return;
}

// Check if the logged in WordPress User has the Visual Editor enabled
// If not, don't register our TinyMCE plugin
if ( get_user_option( 'rich_editing' ) !== 'true' ) {
return;
}

// Setup some filters
add_filter( 'mce_external_plugins', array( &$this, 'add_tinymce_plugin' ) );
add_filter( 'mce_buttons', array( &$this, 'add_tinymce_toolbar_button' ) );
		
	}

これは、現在ログインしているWordPressユーザーが投稿またはページを編集できるかどうかを確認します。編集できない場合、そのユーザーのためにTinyMCEプラグインを登録しても意味がありません。なぜなら、そのユーザーはビジュアルエディターを見ることはないからです。

次に、一部の WordPress ユーザーが [ユーザー] > [プロフィール] で無効にしているため、ユーザーがビジュアルエディターを使用しているかどうかを確認します。ここでも、ユーザーがビジュアルエディターを使用していない場合は、他に何もする必要がないため、関数を返します (終了します)。

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

Javascript ファイルとボタンをビジュアルエディターに登録する

add_tinymce_plugin関数を追加しましょう。

/**
* Adds a TinyMCE plugin compatible JS file to the TinyMCE / Visual Editor instance
*
* @param array $plugin_array Array of registered TinyMCE Plugins
* @return array Modified array of registered TinyMCE Plugins
*/
function add_tinymce_plugin( $plugin_array ) {

$plugin_array['custom_link_class'] = plugin_dir_url( __FILE__ ) . 'tinymce-custom-link-class.js';
return $plugin_array;

}
    

この関数は、TinyMCE に $plugin_array 配列に格納されている Javascript ファイルをロードする必要があることを伝えます。これらの Javascript ファイルは、TinyMCE に何を行うかを指示します。

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

/**
* Adds a button to the TinyMCE / Visual Editor which the user can click
* to insert a link with a custom CSS class.
*
* @param array $buttons Array of registered TinyMCE Buttons
* @return array Modified array of registered TinyMCE Buttons
*/
function add_tinymce_toolbar_button( $buttons ) {

array_push( $buttons, '|', 'custom_link_class' );
return $buttons;
}

これにより、セパレーター（|）とボタンのプログラム名（custom_link_class）の2つのアイテムがTinyMCEボタンの配列に追加されます。

プラグインを保存し、ページまたは投稿を編集してビジュアルエディターを表示します。おそらく、ツールバーは現在表示されていません。

心配しないでください。Webブラウザのインスペクタコンソールを使用すると、TinyMCEによって404エラーと通知が生成されていることがわかります。これは、JavaScriptファイルが見つからないことを示しています。

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

JavaScriptプラグインの作成

wp-content/plugins/tinymce-custom-link-classフォルダ内に新しいファイルを作成し、tinymce-custom-link-class.jsという名前を付けます。このコードをjsファイルに追加してください。

(function() {
	tinymce.PluginManager.add( 'custom_link_class', function( editor, url ) {
		
	});
})();

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

これは2つの項目を受け取ります。プラグインの名前（custom_link_class）と無名関数です。

コーディングにおける関数の概念に慣れている場合、無名関数とは単に名前のない関数のことです。たとえば、function foobar() { ... } は、コードの別の場所で foobar() を使用して呼び出すことができる関数です。

無名関数を使用すると、コードの他の場所からその関数を呼び出すことはできません。add()関数が呼び出された時点で初めて呼び出されます。

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

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

JavaScriptファイルを更新し、既存のコードを次のコードに置き換えてください。

(function() {
	tinymce.PluginManager.add( 'custom_link_class', function( editor, url ) {
		// Add Button to Visual Editor Toolbar
		editor.addButton('custom_link_class', {
			title: 'Insert Button Link',
			cmd: 'custom_link_class',
		});	
	});
})();

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

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

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

image: url + '/icon.png',

url is the URL to our plugin. This is handy if we want to reference an image file within our plugin folder, as we can append the image file name to the URL. In this case, we’ll need an image called icon.png in our plugin’s folder. Use the below icon:

Reload our Visual Editor, and you’ll now see your button with the icon:

実行するコマンドの定義

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

Javascriptファイルで、editor.addButtonセクションの末尾に以下のコードを追加してください。

// Add Command when Button Clicked
editor.addCommand('custom_link_class', function() {
	alert('Button clicked!');
});

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

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

// Add Command when Button Clicked
editor.addCommand('custom_link_class', function() {
	// Check we have selected some text that we want to link
	var text = editor.selection.getContent({
		'format': 'html'
	});
	if ( text.length === 0 ) {
		alert( 'Please select some text to link.' );
		return;
	}

	// Ask the user to enter a URL
	var result = prompt('Enter the link');
	if ( !result ) {
		// User cancelled - exit
		return;
	}
	if (result.length === 0) {
		// User didn't enter a URL - exit
		return;
	}

	// Insert selected text back into editor, wrapping it in an anchor tag
	editor.execCommand('mceReplaceContent', false, '<a class="button" href="' + result + '">' + text + '</a>');
});

このコードブロックはいくつかの処理を実行します。

まず、ビジュアルエディターでリンクするテキストがユーザーによって選択されているかを確認します。選択されていない場合は、リンクするテキストを選択するように促すアラートが表示されます。

次に、リンクを入力するように求めます。ここでも、入力したかどうかを確認します。キャンセルした場合、または何も入力しなかった場合は、他に何も行いません。

最後に、TinyMCEエディタでexecCommand関数を実行し、具体的にはmceReplaceContentアクションを実行します。これにより、選択されたテキストが、ユーザーが選択したテキストを使用した、class="button"のアンカーリンクで構成されるHTMLコードに置き換えられます。

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

まとめ

WordPressにボタンを追加するWordPressプラグインを正常に作成しました。このチュートリアルでは、TinyMCE APIの基本と、TinyMCE統合で利用可能なWordPressフィルターについてもいくつか説明しました。

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

このチュートリアルでWordPress TinyMCEプラグインの作成方法を学んでいただけたことを願っています。また、サイト固有のWordPressプラグインの作成方法に関するガイドも参照してください。

この記事が気に入った場合は、WordPressのビデオチュートリアルをご覧ください。YouTubeチャンネルに登録してください。また、TwitterやFacebookでもフォローできます。