WordPressのエディタをHTMLモードで使うときに便利なプラグイン、「WP Zen-Coding」。

以前、当ブログの過去記事、「WordPressの自動整形表示機能。」で。

WordPressのエディタを「ビジュアルモード」のまま使っていると、オートパラグラフ(自動整形表示)機能のせいで、入力したテキストが勝手に整形されてしまうことがある、ということを書きました。

入力したテキストを思い通りに表示させたい方は、エディタを、「ビジュアルモード」から「HTMLモード」に変更したまま使うのがいい、とも書きました。

で、私の場合、WordPressのエディタは常時「HTMLモード」にしたまま、ちょうどホームページを手作りするように、<p>タグや、</br>タグを打ち込んで、テキストを入力しています。

別にタグを打ち込まなくても、入力したテキストはきちんと表示されるのですが、このほうがパッと見、文章の構造や、テキストと、挿入する画像や広告のコードなどが区別しやすいので、そうしています。

で、1つの記事を書くと、短いものでも30前後の段落にはなるので、「<p></p>」だけでも30前後打ち込まなければなりません。

そういうときに便利なのが、「WP Zen-Coding」というプラグインです。

たとえば、エディタ画面に「p*30」と入力して、コントロールキーとEキー(Ctrl + E)を同時押しすると、「<p></p>」が30個ずらっと表示されます。

また、エディタを「HTMLモード」にしていると、専用ボタンが表示されないので面倒なテーブルタグなども。

やはり、エディタ画面に「table>tr>td*2」と入力して、コントロールキーとEキー(Ctrl + E)を同時押しすると、下の画像のように、テーブルタグが一瞬で表示されます。

HTMLエディタの中には、HTMLタグを打ち込んでいる途中で、自動的に残りの部分を入力してくれる「入力支援機能」があるものもありますけど・・・。

「WP Zen-Coding」は、そういうのとはちょっと違っていて、あらかじめ決められた記法にのっとって、HTMLタグの組み合わせの省略形を入力して、特定のショートカットキーを押すと、自動的に展開して、一気にたくさんのHTMLコードを吐き出してくれる、といった感じでしょうか。

実は、この「WP Zen-Coding」。

もともとは、「Zen-Coding」という、HTMLやCSSのタグをラクに入力するための各種エディタソフト用プラグインを、日本のrewさんという方がWordPressで使えるように、プラグインにしてくださったもの。

まず、「web担当者forum」サイトの記事、「HTML+CSSコーディングが10倍速くなるZen Coding」と、バックナンバー記事に目を通して、Zen-Codingがどういうものなのかを理解してから、実際に「WP Zen-Coding」をインストールして使ってみると、わかりやすいかと思います。

また、「HTML+CSSコーディングが10倍速くなるZen Coding」という本も出ていて、各種エディタなどへのインストール方法が解説されています。

何となく、Zen-Codingの雰囲気がつかめてきたら、Zen-Coding公式サイトのダウンロードページから、「Zen-Coding cheat sheet (PDF)」という、使い方の早見表をダウンロードして印刷し、ときどき目を通しておくと、すぐに使えるようになると思います。

なお、「WP Zen-Coding」をインストールすると、記事だけではなく、ウィジェットでもZen-Codingを使えるようになるので、ウィジェットでHTMLやCSSコードをよく使う方にはおすすめです。

end.

※追記: 「WP Zen-Coding」は、「WP Emmet」になりました。

  • このエントリーをはてなブックマークに追加

コメントをどうぞ

メールアドレスが公開されることはありません。