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カスタムリンククラスプラグインの横にある[有効化]をクリックして、新しいプラグインを有効化してください。

プラグインクラスの設定

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

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ユーザーは、[ユーザー] > [プロフィール]からこれをオフにしています。ここでも、ユーザーがビジュアルエディタを使用していない場合は、他に何もする必要がないため、関数を終了（return）します。

最後に、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;

}
    

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

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

/**
* 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;
}

これにより、2つの項目がTinyMCEボタンの配列に追加されます。区切り文字（|）と、ボタンのプログラム名（custom_link_class）です。

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

心配いりません。ウェブブラウザのインスペクタコンソールを使用すると、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!');
});

Visual Editorをリロードし、ボタンをクリックすると、ボタンをクリックしたことを確認するアラートが表示されます。

アラートをプロンプトに置き換え、Visual Editorで選択したテキストを囲みたいリンクをユーザーに尋ねましょう。

// 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>');
});

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

まず、Visual Editorでリンクするテキストをユーザーが選択したかどうかを確認します。選択していない場合は、リンクするテキストを選択するように指示するアラートが表示されます。

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

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

すべてがうまくいった場合、Visual EditorとTextビューの両方で、選択したテキストがbuttonに設定されたクラスでリンクされていることがわかります。

概要

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

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

このチュートリアルがお役に立てば幸いです。WordPress TinyMCEプラグインの作成方法を学べたことでしょう。また、サイト固有のWordPressプラグインを作成する方法に関するガイドも参照してください。

この記事が気に入った場合は、WordPressのビデオチュートリアルのためにYouTubeチャンネルを購読してください。また、TwitterやFacebookでも私たちを見つけることができます。