“恋に落ちるエディタ”は、WordPressのテーマ作りにも効く!?

2012.11.09 | この方法お勧めです！ |
スポンサードリンク

年末が近づいてきて財布の中にも風が吹きあれ、こんなんで年が越せるのかと心配しているホワイトです。こんにちは。

さて、お仕事であってもプライベートでも、WordPressのサイトをより魅力的にしようと考えたら大体テーマを編集することになります。Webブラウザからダッシュボード経由で編集するというのがひとつの方法ですね。

でも、WordPressのサイト構築を仕事にしているようなデザイナーさんなんかは、Dreamweaverや秀丸、EmEditor、NetBeansとか自分のお気に入りのコードエディタで編集することが多いかと思います。テーマ編集をスムーズにおこなうには、できるだけ手間がかからずやりやすいような環境作りがかかせませんからね。

typewriter

じゃあ、ホワイトお前何使ってやってるんだよ？

即答ですよ即答。そんなの巷で“恋に落ちるエディタ”として話題沸騰中の「Sublime Text 2」に決まってるじゃないですか、アーハッハッハ。いや、私ホワイトは1年ちょっと前に恋に落ちまして…。それからずっと一途にSublime Text 2と二人三脚で平穏な日々を過ごしています。

テーマ編集って基本PHPのファイルをいじるけど、中にはHTMLのコードも含まれるし、CSSファイルをいじってスタイルを編集したりもしますから、できればスムーズにこれらのファイルを編集したい、っていう至極単純な理由だったりします。

Sublime Text 2 にはパッケージという素敵アイテムが！

Sublime Text 2ってのは、文字列編集のためのアレコレに加えて拡張性が高いのが売りなんです。世界中の有志の手によって、次から次に出てくるプログラミング言語のシンタックスファイルや入力補完、各種スニペットなどがパッケージ（簡単に言えば拡張機能）として公開されています。中には有償のパッケージなんかもありますが、基本的には無償で使えるものがほとんど。彼らに足向けてなんて寝れません、ホント。

そんなパッケージの中には、WordPressのテーマ作りに一役買うものがあるんです。それを紹介するのが、今日の私ホワイトの仕事です。

Sublime Text 2 WordPress Package

パッケージとしての名前は「WordPress」じゃなくて「Wordpress」となってます（※一応書いておかないと間違えるなとか言われる）。このパッケージ、スニペットはもちろん、トリガーとなる文字列を入力することでいろいろなコードが自動的に入力補完されるようになります。OS XのCoda 2ってエディタにも同様の補完機能をくっつけてくれる「Fix WordPress Syntax Mode for Coda 2（※最新版で使うにはサイトの下のコメント欄にある改良版を使いましょう）」ってのがあったりします。

theloop

と入力して、TABキーとかで展開すると、

<?php if ( have_posts() ) : while ( have_posts() ) : the_post(); ?>
<!-- post -->
<?php endwhile; ?>
<!-- post navigation -->
<?php else: ?>
<!-- no posts found -->
<?php endif; ?>

まぁ、スニペットに登録されてるのが自動的に入ったりするわけです。

Sublime Text 2 Search WordPress Codex

「Search WordPress Codex」はその名の通り、選択した文字列をWordPress Codexで検索したり、Function Referenceを呼び出したりできる優れもの。たまにあるわけですよ、あれ？これってどういう使い方だっけとかね（笑）。関数の使い方がわかりません！みたいな人に特にオススメです。また、このパッケージの元になっている「Stack Overflow Plugin」ってのは、ありとあらゆるIT系の疑問とその回答が集まるStack Overflowに検索をかけるものです。これもあわせて入れておくといいですね。

PHP code formatter for Sublime Text editor with phptidy

長い名前ですが、略せば「PhpTidy」です。phptidyをベースとしながら、WordPress Coding Standardsにあわせて成型してくれる便利ツールです。使い方はファイルを開いて、コマンドパレットから「Tidy PHP」を選ぶだけです。あとはよろしくやってくれます。こういうのは自分一人じゃなくてみんなで作業する時にも役立ちますよね。

LESS syntax package & Sass for Sublime Text 2

で、最後に。最近配布されいてるテーマなんかを眺めていると、LESSやSass/SCSSを使ってスタイルを定義しているものが多くなってきました。レスポンシブなテーマなんかでは特に多いみたいです。実際、一度この類のCSSプリプロセッサに慣れてしまうと、普通のスタイルシートなんて書いてられません。LESSのパッケージは単なるシンタックスカラーリングだけですが、Sassの方はちゃんとスニペットなんかもあるしちゃんとアップデートされています。CSSの簡単入力には「Zen-Coding」やその後継と巷で話題の「Emmet」で決まりです。

そんなSublime Text 2はクロスプラットフォーム対応です

ようやく日本でも火がつき始めたSublime Text 2ですが、これは嬉しいことにクロスプラットフォームで使えます（Windows版は日本語入力時にインラインにならない環境もあるようで、それを解消するパッケージも出ています）。こちら無償ではなく有償のソフトウェアになりますが、こういった便利なパッケージを組み合わせて使えばテーマ作りが楽になるかもしれません。言語の区別関係なくいろいろやる人には、職種を問わずオススメですよ。

まぁ、エディタは人の好みがあるのでこれ以上アレコレは言いません（笑）。

これから始める人は、このあたりを参考にしてみましょう

Sublime Text 2の解説は、こちらの『”恋に落ちるエディタ”「Sublime Text」 完全入門ガイド！』が詳しいです。他にも先日おこなわれた「第0回 Sublime Text 2 勉強会」のスライドなんかも公開されているようです。

あ、そうそう忘れてた。今日11月9日の夜に開催予定の「CPI x CSS Nite「After Dark」（5）」っていうイベントでは、Coda 2 vs. Sublime Text 2でエディタ対決がおこなわれるとか。会場参加のほうは既に満席ですがUSTREAM中継は無償で見れるらしいですよ（※事前登録制みたい）。

興味のある方はご覧になってみては？

（追記）早速そのイベントの資料が公開されたぞ！

本日開催された先のイベントのスライドが公開されていました。あわせて、Sublime Text 2のお薦めパッケージのリストも公開されています。WordPressの補完のもCodexの検索のも、PhpTidyもしっかり入っていますね（笑）。