NeGiMeMo.net

ねぎさんのメモ帳。日常・メモ・ときどきWordPress。

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

bell賞味期限切れコンテンツ

この記事は公開または最終更新から1262日くらい経過しています。
このメッセージが表示されている記事(特にプログラミング系)は情報が古くなっている可能性があるので注意して下さい。

以前Sublime Text2のときにもお話したEmmetですが、WordPressではZen-Codingはあったのに、Emmetはなかなか見つけることができませんでした。[*1]

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

インストール

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

自分好みにカスタマイズ

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

スクリーンショット(2013-06-18 6月18日 19.01.06)少しスクロールすると「ショートカット」という項目があるので「ショートカットを上書きする」にチェックを入れるとショートカット設定が表示されますので、自分が普段タグを展開するのに使っているショートカットキーに入れ替えましょう。[*2]

自分はいつもCtrl+Eを使ってますので、これに設定しました。[*3]

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

実際に使ってみた

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

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

 


(6/21追記)

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

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

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

(追記ここまで)

TAGS

Pingback / Trackback