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

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

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

Thematicワイヤーフレーム図解私は今回、子テーマ作りに当たっては、ほとんど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も含まれてるとかなり便利だけど、それが入っちゃうと逆にごちゃごちゃするかも? とにかく、このワイヤーフレーム図解と各親テーマ用phpファイルを照らし合わせながら、作業を進めていくとビジュアル的にコツが掴めた感じです。

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

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

6 thoughts on “【Thematic子テーマ作り覚書・その1】構造の図解

  1. こんにちは。 🙂
    図解とてもいいですね。 保存しました!(笑)
    それにしてもおしゃれなテーマですね〜! さすがっす。
    うちと同じ thematic とは思えない。。 😳

    • endunham on

      さきほどは、どうもです!

      図解とてもいいですね。 保存しました!(笑)

      おおお!良かったです。師匠様のお役立ちになれて光栄ですがな~ 😛

      それにしてもおしゃれなテーマですね〜! さすがっす。

      ありがたいお言葉。かたじけない 😆

      うちと同じ thematic とは思えない。。 😳

      そんな、そんな!クリーン&アクセシビリティ優先でイケてますよー。

      私はIE8で検証してないから、どんなもんかちょいと不安です 😳

  2. やっぱ、こういう図解いりますよねー。
    フォーラムにあったのか~。パクればよk(ry

    ぼくのサイトもいま、IE 6 無視ですよ。みんなで無視しましょう(すすめるな

    ダナンさんが thematic の構造をかきかきしている頃、ぼくは福岡用の duotone の構造をかきかきしていたのでした。

    それにしてもおしゃれなテーマですね〜! さすがっす。

    うんうん、ぼくにはこういうの作れないわん。

    • endunham on

      ぼくのサイトもいま、IE 6 無視ですよ。みんなで無視しましょう(すすめるな

      あはは。ですよね、ですよね 😉
      私もみんなお勧めしたいくらい :mrgreen:

      ダナンさんが thematic の構造をかきかきしている頃、ぼくは福岡用の duotone の構造をかきかきしていたのでした。

      おおお!あれですなー。そういや、呟いてましたね!
      WordCampの成功お祈りしてますよー。
      頑張ってくださーい 😉

      うんうん、ぼくにはこういうの作れないわん。

      おおお!御師匠様に続く、おでこ様にまで誉めてもらっちゃった!
      サンクスです!
      益々やる気満々になりましたよー 😀

  3. Pingback: 【Thematic子テーマ作り覚書・その1】構造の図解 « Ryo's todo list

  4. Pingback: Thematicテーマを入れました