WordPress Emmetプラグイン一覧:投稿エディタの機能拡張 HTMLを入力しやすく

Hee-html-emmet-editor

おそらく、現状まともに使える唯一のEmmetプラグイン。

Emmetに対応するだけでなく、Ctrl+Sのショートカットキーで保存ができるなど他の便利機能もある。

ただ、WordPress.org公式のプラグインページに登録されていないので、インストールやアップデートをすべて手動でやらなければならないのが残念。

WP Emmet

昔からあるプラグインだが、今でも一応は動く。

といってもかなり前に開発が止まってしまい、時々不具合が出ることもあるので要注意。

一方ですべて明示的にオープンソース化されているので、自分でカスタマイズしやすい面もある。

他の方法

実はこうしたプラグインの大半が、Web上(ブラウザ上)でリッチなテキストエディタを提供する「CodeMirror」というオープンソースのJavaScript・HTMLライブラリを内部で利用している(要はtextarea要素の拡張)。

そのため、プログラミングの知識が一定程度あるなら、自分でWordPressプラグインをつくったり、既存のプラグインのカスタマイズをしたりすることも十分可能。

特にCodeMirror向けの拡張機能は多いので、それらを追加するだけでもさまざまなことができるようになる。

実際、Emmetの拡張機能もすでに提供されている。

解説

ローカルのクライアント(ソフトウェア)版の主要なテキストエディタやIDEならば、大半のものがEmmetには対応しているので、そもそも無理をしてWordPressのエディタにそれを導入する理由はない。

ただ、少しの加筆修正の場合、テキストエディタなどと行ったり来たりするのは明らかに面倒なので、そういったときには役に立つだろう。

残念ながら、WordPressのEmmet対応プラグインは多くないが……

Emmetとは

HTMLの要素(タグ)やその属性、そしてスタイルシート(CSS)の記述を簡易入力するための機能。

特定の方式に則って書き、それをHTML・CSSに変換するやり方をとる。

例:

変換前:
table>tr*3>td.class[data-a=abc]{いろいろ}*2

変換後:
いろいろ いろいろ
いろいろ いろいろ
いろいろ いろいろ

要は、記述の面倒な部分を自動入力してくれるということ。

WordPressだけでなく、各種テキストエディタなど、さまざまな環境で対応されている。

以前のバージョンはZen Codingと呼ばれていた。