HTMLやCSSを簡単なスペニットとショートカットを使用して記述を高速化できるマークアップツールEmmet(Zen Codingの次期バージョン)。CodaやSublime Text、Dreamweaverで使用している方も多いのではないでしょうか。

あまりにもEmmetが便利すぎて日常化していて、Wordpressの投稿画面でもEmmetの記述をしてしまい「しまった、ここでは使えなかった…。」なんてことになることありませんか?
そんなEmmetホリックな方にオススメなWordpressプラグイン「WP Emmet」をご紹介します。

WP Emmetについて

WP Emmetは名前から想像がつくように、Wordpressの投稿画面でEmmetを使えるようにするプラグインです。

WP Emmetのインストール

WP EmmetWordPressの公式サイトからWP Emmetをダウンロードします。 Zipファイルを展開したうえでWordpressのpluginディレクトリにアップロードし、管理画面のプラグインページからWP Emmetを有効化します。これでインストールは完了です。
管理画面のプラグインページからWP Emmetを検索してインストールでも問題ないかと思います。

WP Emmetの初期設置

WP EmmetWordPress管理画面の設定メニューの中にあるEmmetから、ショートカットキーの登録などの初期設定ができます。デフォルトではスペニットの展開にはMeta(commond)+Eが登録されています。

WP Emmetの使い方

投稿画面(投稿ページでも固定ページでも可)のテキストエディターモードでEmmetのスペニットとショートカットキーで展開できます。

例えば下記スペニットを入力し、ショートカットキーを押すと、

1
ul>li#list$$*10

下記の様にソースコードが展開されます。

1
2
3
4
5
6
7
8
9
10
11
12
<ul>
    <li id="list01"></li>
    <li id="list02"></li>
    <li id="list03"></li>
    <li id="list04"></li>
    <li id="list05"></li>
    <li id="list06"></li>
    <li id="list07"></li>
    <li id="list08"></li>
    <li id="list09"></li>
    <li id="list10"></li>
</ul>

また、WP Emmetの設定画面で「Tabキーを使用」を有効にするとTabキーによるソースコードのインデントが可能なのでこれも便利です。

記事投稿者:森近 将史(もりちか まさし)