WordPress ThematicのChild Themeをいじってみた
2010/08/15 @0:21 | 制作・運営・ノウハウ
やっぱりシンプルなデザインとレイアウトが好きなのでWordPressのデザイン・テーマをオープンソースのThematicにしたんですが、デフォルトでは気に入らないところもあるので、サクッとChild Themeを作ってカスタマイズを始めてみた。
僕がThematicを選んだメインの理由は、以下3点ですが
- デザインがシンプル。ベースにしやすい
- オープンソース
- WordPress Theme Frameworkが使われているため、拡張が煩雑にならなそう
以下のスライドでも、ThematicやWordPress Theme Frameworkについて良くまとめられている。
Child Themeとは？
また、Child Themeとは、元の「thematic」をベースにした派生版とでも言えば分かりやすいでしょうか。元のテーマ・デザインを崩さずに、シンプルに派生版を作る方法です。
さて、ということでChild Themeの作り方の簡単なまとめ。
Child Theme作成の準備
- Thematicのあるフォルダの「thematicsamplechildtheme」フォルダの名称を変更。僕は「thematic_p」に変更。
- 名称変更したフォルダをWordPressのthemesフォルダに移動。通常、WordPressのThemesフォルダはwp-contentの中にある。
これだけで、とりあえず準備は完了。
あとはWordPressの管理画面で「外観」 ＞ 「テーマ」に、作成したChild Themeが出てくるので、それを有効化する。
※このとき注意点。
テーマ変更前に設定したウィジェットは、すべて初期化されてしまうのでChild Themeを有効にしてからウィジェットを設定した方が良さそうです。
スタイルの変更
スタイルの変更は、移動したフォルダ（僕の場合は「thematic_p」）にある styles.css で行う。
なにもいじらないと @import を使ってデフォルトのスタイルをthematicのフォルダから読み込むようになっているが、これらを変更したい場合は、もとを崩さないためにも thematic_p にコピーをして編集。
僕の場合は、以下のように設定した。
- thematic_p に styles というフォルダを作って、custom.css を作成。
- thematic_p にある styles.css で、@importを使って custom.css を読み込むように設定。
- カスタムの変更に関しては、すべて、この custom.css に書き込むようにした
表示内容の変更
表示内容の変更は、Hooks もしくは Filters と呼ばれるもので行う。これらの変更を、Child Themeのフォルダ（僕の場合「thematic_p」）の functions.php に記述する。
こちらは後日まとめるとして、参考になったブログ記事をご紹介：
Zazie@Tokyo : Thematic ThemeでThemeを変えてみました
ざっと見た感じ、このFrameworkはすごく良く出来ていそうなので、これからのカスタマイズが楽しみです。
まずは、記事ページに最近発表されたTwitter公式「ツイートする」ボタンを付けてみた。