WordPressでZen-Coding! 作業効率アップで一度使うとやめられない!

WordPressでZen-Coding

htmlソースで投稿する方は絶対オススメ!

Dreamweaverではおなじみ?のZen-Codingですが、WordPressでも使用可能です。
htmlのソースで記述する場合にはものすごく重宝します。

このプラグインを入れると
通常このようなソース

<hタグ> </hタグ>
<p></p>

<dl>
	<dt></dt>
	<dd></dd>
</dl>

<ul class="navigetion">
	<li></li>
	<li></li>
	<li></li>
	<li></li>
	<li></li>
</ul>

なんてソースが

hタグと記述して 「ctrl+E」
を押すとあら不思議!
一瞬でと記述されます。

まぁ単独ダグではまだまだ実感出来ません。
例えばこんな風に記述して

ul.navigation>li*5

そして先ほどと同じように「ctrl+E」と押してみてください!

あら、あら不思議!

<ul class="navigation">
	<li></li>
	<li></li>
	<li></li>
	<li></li>
	<li></li>
</ul>

本当に時間短縮ができますよ!

使ってみれば必ず分かる!

その便利さは使えば必ずわかります!

まずはインストール

プラグインのインストール
プラグインのインストール

「プラグイン 新規追加」から 検索窓に「WP Zen-Coding」と入れて検索してください。

「今すぐインストール」をクリックして、「有効化」してしまえばもう時間短縮はすぐ目の前!

ショートカットキーで色々出来るわけなのですが、
WordPressの設定の中に「Zen-Coding」がいますから、ショートカットキーはそちらから確認できます。

まずは
「ctrl+E」これを覚えて使ってみてください!
基本的には

#

がid、

.

がclass、

>

が子供の要素となります。
*をつけると同じタグを繰り返し使いたい時に*+数字で
例えば

li*5で
<li></li>
<li></li>
<li></li>
<li></li>
<li></li>

と記述できます。