『WP Zen-Coding』WordPressの記事投稿でZen-Codingが使用できるプラグイン

WordPressの管理画面上でZen-Codingが使用できるプラグインWP Zen-Coding

Zen-Codingについて

Zen-CodingはHTML/CSSをショートカット+スニペットで簡略化してコードを書くことができるライブラリです。
例えば

<!DOCTYPE HTML>
<html lang="ja">
<head>
	<meta charset="UTF-8">
	<title></title>
</head>
<body>
	<div id="page">
		<div id="header">
			<ul class="navigation">
				<li><a href=""></a></li>
				<li><a href=""></a></li>
				<li><a href=""></a></li>
				<li><a href=""></a></li>
			</ul>
		</div>
	</div>
</body>
</html>

のようなhtmlを

html:5>div#page>div#header>ul.navigation>li*4>a

として記述し展開するとhtmlが作られます。コーディング時間の短縮には必須のツールです。
広まってからしばらく経ちました。使い方や参考の書き方はググると多くの情報が引っ張り出せます。

参照URL

知らない人は損してる?コーディングが3倍速くなるZen-Codingを導入してみた – EC studio デザインブログ

動作環境

WordPress3.3.1
プラグインバージョン0.3.1

インストール

WordPress › WP Zen-Coding « WordPress Plugins
よりダウンロードしてwp-content/plugins/ディレクトリにアップします。
または
WP Zen-Coding

管理画面 > プラグイン > 新規追加 > WP Zen-Coding

で検索します。インストール後有効化します。

設定

WP Zen-Coding
プラグインを有効化したら

管理画面 > 設定 > WP Zen-Coding

から詳細設定をします。
デフォルトのショートカットキーに [Meta+E]や[Meta+D]と指定されていますが、
MetaキーはMacだとコマンドキーのことです。
また、省略コードの展開は「tabキー」でも展開されます

コメントを残す

メールアドレスが公開されることはありません。 * が付いている欄は必須項目です

次のHTML タグと属性が使えます: <a href="" title=""> <abbr title=""> <acronym title=""> <b> <blockquote cite=""> <cite> <code> <del datetime=""> <em> <i> <q cite=""> <strike> <strong>