WordPressでもEmmetが使えるWP Emmetが超便利

以前Sublime Text2のときにもお話したEmmetですが、WordPressではZen-Codingはあったのに、Emmetはなかなか見つけることができませんでした。 ((以前検索した時の話なので約2ヶ月位前の話です))

ですが、ふと思い出して久々にプラグインディレクトリ検索してみたら、いつの間にかWordPressのエディタでも使える「WP Emmet」というプラグインが登場していましたので早速インストールしてみました。

インストール

いつも通りプラグインディレクトリからダウンロードするか、管理画面のプラグインより「WP Emmet」と検索し、インストールして有効化すれば完了です。

自分好みにカスタマイズ

有効化が完了したら、とりあえず「設定」→「Emmet」からWP Emmetの設定画面へ移動します。

少しスクロールすると「ショートカット」という項目があるので「ショートカットを上書きする」にチェックを入れるとショートカット設定が表示されますので、自分が普段タグを展開するのに使っているショートカットキーに入れ替えましょう。 ((特に変えるつもりが無くてもどのキーで展開できるのか再確認する意味で見ておいてもいいと思います。))

自分はいつもCtrl+Eを使ってますので、これに設定しました。 ((コマンド“⌘”キーを指定する場合は「Meta」を指定します))

因みに「Tabキーを使用」にチェックしてあればTabキーでも展開出来ます。

実際に使ってみた

早速新規投稿に入って「テキスト」モードに切り替えてEmmetを使ってコーディングしてみましたが、普段コーディングする感覚でどんどん書いていけるので便利ですね。

今回のテーマからはビジュアルエディターにもCSSを適用してるのでだいぶ更新しやすくはなっていますが、まだ直接タグ打ちしてしまったほうが早い場面もありますので、そんなときはかなり活躍しそうです。

（6/21追記）

ちなみにこれ、今日気づいたのですがHTMLモード以外にも、カスタムフィールドやCrayon Syntax Highlighterのコード入力エリア等でも展開出来た上に、TABキーでコード入力フィールドにタブインデントを挿入出来ました。（いつもテキストエディタなどでタブを入力→コピペでインデントを開けていたのでこれは嬉しい）

もしかしたら他のシンタックスハイライト系のプラグインでも展開できるかもしれませんので、普段はビジュアルエディタ派の方でもさくさくとサンプル用コードを書き込んでいったりと、結構使い道はあるかもしれませんね。

まぁ、サンプル用のコードは予め用意しておいてからコピペすることが殆どかもしれませんけど…ｗ

（追記ここまで）