WordPressのテーマをいじるのなんて３年ぶりぐらいなので、当時購入したリファレンス本と今のデフォルトテーマにあるテーマ実装を見比べながらテーマ作りをしてました。
昔は条件分け、繰り返しの記述ばかりで、テンプレートがカオスになりがちだったけど、テンプレート関数が充実してきてかなり楽になってる印象。
例えば、スレッド形式にできたり複雑化していたコメントも、
<?php wp_list_comments();?>だけで表示され、後はスタイルシートで味付けするだけでお手軽ですね。
本題のテーマ作り、
Blueprint CSSを使ったテーマ作り
Blueprint CSSはCSSのフレームワーク（ブラウザ間の表示差違をなくすリセットや、グリッドデザインが簡単にできたり便利！）なんですが、それをWordPressのテーマにあわせると幸せになれそうなのでやってみた。下にポイントをいくつか。
デフォルトテーマを使う
公開されてる自由に使えるテーマって沢山あるんだけど、国際化されてなくて日本語に対応させるだけで面倒。なので、デフォルトテーマを新しいテーマフォルダにコピーして使うのが楽。
不要なファイルを削除
私の場合は、
- index.phpを基準にsingle.php、archive.php、search.php、comments.php、footer.php、header.php、sidebar.php、page.phpの各テンプレート
- 国際化ファイルをフックするfunctions.php
- 日本語用ja.mo、ja.po、kubrick.pot
- スタイルシートとしてstyle.css
これくらいしか使わない。
必要になったときにあとから足せばいいやって考え。
Blueprint CSSの設置
テーマフォルダ以下にcss/blueprint/ としてファイルを置いた。
呼び出しは、header.php に
<link rel="stylesheet" href="<?php bloginfo('template_directory'); ?>/css/blueprint/screen.css" type="text/css" media="screen, projection" />
<link rel="stylesheet" href="<?php bloginfo('template_directory'); ?>/css/blueprint/print.css" type="text/css" media="print" />
<!--[if IE]><link rel="stylesheet" href="<?php bloginfo('template_directory'); ?>/css/blueprint/ie.css" type="text/css" media="screen, projection" /><![endif]-->ってデフォルトのスタイルシートを呼び出してるところの前に挿入すればok。
デザインレイアウトの変更
header.php （footer.phpで閉じてね）に
<div class="container">って記述すれば、Blueprint CSSのグリッド構造スタートの合図。containerクラスの幅が標準で950pxなので、それが気に入らない場合は、style.css のほうで上書き定義してやる（Blueprint CSS本体を修正しない！）。
メインコンテンツとサイドバーを分けるためのグリッド構造はお好みで、
index.php（single.php、archive.php、search.phpも同様） では、
<div class="span-14 colborder">
（中身）
</div>sidebar.phpでは、
<div class="span-5 last">
（中身）
</div>これでおしまい。簡単でしょ。
CSSの調整
あとは、style.css で必要ないものを削除して（幅の絶対指定など）、見た目の調整に移ればいい。
Blueprint CSS化しちゃえば、今後新しい異端なブラウザが登場してもCSSハックとか覚える必要なく、Blueprint CSSをバージョンアップさえすればいいし、
何より、どこでも同じCSSが通用するのが非常にキモチいい。おすすめです。
