【Thematic子テーマ作り覚書・その１】構造の図解

ずーっと前にThematicテーマを導入して以来、カスタマイズはおろか、子テーマ作りがまったく進んでなかった当ブログ。やっと人様に見せれる形になったんで、途中経過状態だけどとりあえず実装してみました。とは言え、IE６は完全無視で、IE7・Safari3・FF2ｘでは反映しない部分もあり、かなりお粗末な状態です。しばらくごにょごにょと弄るので、気長に見守ってくださいませ 😉

さて、本題の覚書。
まず最初にこのテーマ、Thematicフレームワークテーマについてですが、WordCamp京都で紹介されたテーマです。まあ、私があえてここで言うのもなんなんで、このテーマについてわからない人は是非おでさんのスライドを参考にしてください。

私は今回、子テーマ作りに当たっては、ほとんどThematic開発者Ian Stewartさんのサイト（themeshaper.com)にあるドキュメンテーションとフォーラムを参考にして、子テーマ作りを進めて行きました。そこで、デザイナーが一番最初にぶち当たる壁が、ThematicのフックやCSSのdiv要素などの配置ではないでしょうか。先に紹介したおでさんのスライドにもレイアウト関連の構造が簡単に説明されてありますが、もっと詳細が載ったワイヤーフレーム図解があるのをフォーラムで発見しました。これはその図解があるページのスクリーンショットです。この図解の右下にLegend（説明文）があるので、それを訳したのが↓

Legend　（説明文）
Green　（グリーンで示されてる部分）: widget areas　（ウィジット部分）
Dashed　（グリーンとダッシュで囲まれてる部分）: optional area　（オプショナル部分）
Dark red　（濃い赤で示されてる部分）: action hooks　（アクションフック）
Light red　（薄赤で示されてる部分）: filter hooks　（フィルターフック）
Italics　（イタリック書体で示されてる部分）: Thematic actions　（Thematicアクション）
Widget areas also exist for page-top, single-top etc.　（ウィジット部分もpage-topやsingle-topなどにも存在します。）

おでさんの図解の方が見やすくてキレイですが、こちらにはdiv要素・フックなどが細かく描かれてて、スタイリングするのにとっても便利でした。まあ、欲を言えばclassも含まれてるとかなり便利だけど、それが入っちゃうと逆にごちゃごちゃするかも？　とにかく、このワイヤーフレーム図解と各親テーマ用ｐｈｐファイルを照らし合わせながら、作業を進めていくとビジュアル的にコツが掴めた感じです。

最後になりましたが、この記事を書いてる時、偶然にもあのhiromasaさんもThematicカスタマイズをしてたらしい ❗ やはり師匠と崇められるお方、さすがです。そちらの記事で、カスタマイズをfunctions.phpに組み込む方法が紹介されてるのでこれは必見ですよ 😛 ちなみに、私のテーマもいろいろ見よう見真似でfunctions.phpに組み込んでます。これからhiromasaさんの記事を参考にして、更なる子テーマ作りに力を入れて行きたいですね 😉

【Thematicカスタマイズに関する参考サイト】

• Thematic開発者Ian Stewartさんのサイト（themeshaper.com　英語)
• Thematicドキュメンテーション　（英語)
• Thematicフォーラム　（英語)
• おでさんのスライド　＠WordCamp Kyoto
• 「WordPress Thematic フレームワークで hiromasa.another をつくる」　hiromasa.another :o)
• 「Thematic ThemeでThemeを変えてみました」　Zazie@Tokyo