【WordPress】Emmetが使えるシンタックスハイライトHTMLエディタープラグインを作成

投稿日:

 

 
今回はWordPressのテキストエディターをEmmetが使えるシンタックスハイライトHTMLエディターに強化するプラグイン「Hee-html-emmet-editor」を作成しましたので、紹介していきたいと思います。

 

類似プラグイン

類似プラグインを紹介しますので、そちらと使いやすさを比較して好きなものを使って下さい。
 

 

HTML Editor Syntax Highlighter

 
WordPressのテキストエディターで恐らく最強。
しかし、Emmetが使えません。
これだけが惜しい点です。Emmetが使いたい方は別のプラグインを使用しましょう。
 

 

WP Emmet

 
今回作成したプラグインの対抗馬です。設定も色々変更でき、Emmetが使えます。
しかし更新が5年以上も止まっており、プラグインの不具合か稀に記事を書いている最中にフリーズします。
機能的には申し分なかったのですが何回もフリーズして記事を打ち直しになったため今回類似プラグインを作成しました。
 

 

Hee-html-emmet-editorの機能

 

 
今回作成したプラグインを使用するとこのように表示されます。
機能を大まかに紹介しますと以下の通りです。

  • Emmetが使える
  • HTML等がハイライトされる
  • sublimetextのショートカットキーが使える
  • Ctrl + S で下書きを保存 or 記事を更新できる

 
機能的には「WP Emmet」の劣化版なのですがフリーズしないという点や、必要最低限のものしかインストールしないので軽いという点が勝っていると思います。
 

 

インストール方法

 

DL:H_HEE_html_emmet_editor.zip
 

 
公式プラグインに登録していないため、FTPでアップロードしてインストールして下さい。
解凍して出てきた「hee-html-emmet-editor」をサーバー内の「/wp-content/plugins」の中にアップロードします。
 

 
管理画面で有効化すると自動的にプラグインが動きます。
 

 

カスタマイズ方法

ここからは少しマニアックな話になりますので、プラグインに満足できたらブラウザバックして下さい。

 

 

エディターのテーマを変える

 

テーマを変えることで文字色や背景色などを変更することができます。
自分の好きなエディターのテーマに変えてみましょう。
 

 
このプラグインは「CodeMirror」を元に作成されていますので、CodeMirrorのテーマを読み込むことで任意のテーマに変更することができます。
 

 
CodeMirror公式よりdownloadを押してダウンロードしましょう。
CodeMirror
 

 
中にあるthemeファイルの中身が目的のファイルになります。
サーバー上にあるhee-html-emmet-editorのthemeの中に好きなテーマをアップロードしましょう。
 

 

プラグインを編集

 
今回は例としてテーマをRuby Blueに変更します。
それではプラグイン内のhee-html-emmet-editor.phpを編集します。

 

 
hee-html-emmet-editor.php

				//変更前
				wp_enqueue_style( 'hee_codemirror_style4', plugins_url().'/hee-html-emmet-editor/codemirror/theme/monokai.css' );
				//変更後
				wp_enqueue_style( 'hee_codemirror_style4', plugins_url().'/hee-html-emmet-editor/codemirror/theme/rubyblue.css' );
			

 
monokai.cssの部分を任意のcss名に変更します。
例)monokai.css → rubyblue.css
 

 
hee-html-emmet-editor.php

				//CodeMirror 設定
				//CodeMirror settings
				var editor = CodeMirror.fromTextArea(document.getElementById("content"), {
					mode: "htmlmixed",
					lineNumbers: true,
					lineWrapping: true,
					keyMap: "sublime",
					autoCloseBrackets: true,
					matchBrackets: true,
					showCursorWhenSelecting: true,
					theme: "monokai",
					indentUnit: 4,
					indentWithTabs: true,
				});
			

 
CodeMirror 設定部分の 「theme: “monokai“,」を好きなテーマ名に変更します。
例)theme: “monokai” → theme: “rubyblue
 

 
これだけでテーマを変更することができます!簡単ですね!
テーマ名はCSSの名前と同じになっているのであまり困らないと思います。
 

 

その他のカスタマイズ

 
CodeMirrorの設定をそのまま使用できるため、自分の好きな設定に変更してみましょう!

 
特に「keyMap」などをよく使ってるエディターのものにすると良いかもしれません。
CodeMirrorマニュアル