WordPress ThematicのChild Themeをいじってみた

やっぱりシンプルなデザインとレイアウトが好きなのでWordPressのデザイン・テーマをオープンソースのThematicにしたんですが、デフォルトでは気に入らないところもあるので、サクッとChild Themeを作ってカスタマイズを始めてみた。

僕がThematicを選んだメインの理由は、以下3点ですが

  • デザインがシンプル。ベースにしやすい
  • オープンソース
  • WordPress Theme Frameworkが使われているため、拡張が煩雑にならなそう


以下のスライドでも、ThematicやWordPress Theme Frameworkについて良くまとめられている。

Thematic : A WordPress Theme Framework のススメ

Child Themeとは？

また、Child Themeとは、元の「thematic」をベースにした派生版とでも言えば分かりやすいでしょうか。元のテーマ・デザインを崩さずに、シンプルに派生版を作る方法です。

さて、ということでChild Themeの作り方の簡単なまとめ。

Child Theme作成の準備

  1. Thematicのあるフォルダの「thematicsamplechildtheme」フォルダの名称を変更。僕は「thematic_p」に変更。
  2. 名称変更したフォルダをWordPressのthemesフォルダに移動。通常、WordPressのThemesフォルダはwp-contentの中にある。

これだけで、とりあえず準備は完了。
あとはWordPressの管理画面で「外観」 ＞ 「テーマ」に、作成したChild Themeが出てくるので、それを有効化する。

※このとき注意点。
テーマ変更前に設定したウィジェットは、すべて初期化されてしまうのでChild Themeを有効にしてからウィジェットを設定した方が良さそうです。

スタイルの変更

スタイルの変更は、移動したフォルダ（僕の場合は「thematic_p」）にある styles.css で行う。
なにもいじらないと @import を使ってデフォルトのスタイルをthematicのフォルダから読み込むようになっているが、これらを変更したい場合は、もとを崩さないためにも thematic_p にコピーをして編集。

僕の場合は、以下のように設定した。

  1. thematic_p に styles というフォルダを作って、custom.css を作成。
  2. thematic_p にある styles.css で、@importを使って custom.css を読み込むように設定。
  3. カスタムの変更に関しては、すべて、この custom.css に書き込むようにした

表示内容の変更

表示内容の変更は、Hooks もしくは Filters と呼ばれるもので行う。これらの変更を、Child Themeのフォルダ（僕の場合「thematic_p」）の functions.php に記述する。

こちらは後日まとめるとして、参考になったブログ記事をご紹介：
Zazie@Tokyo : Thematic ThemeでThemeを変えてみました

ざっと見た感じ、このFrameworkはすごく良く出来ていそうなので、これからのカスタマイズが楽しみです。
まずは、記事ページに最近発表されたTwitter公式「ツイートする」ボタンを付けてみた。

2010/08/15 0:21 by @Rriver | RSS | Fb

関連する投稿

関連するカテゴリ・タグ

カテゴリ： WordPress関連
タグ：

Ads by Google