2012年5月現在、Wordpressには「twentyeleven」というデフォルトテーマが入っていますが、オリジナルのテーマを作ろうと思ったら、このテーマの子テーマとして作ると便利です。

確かに「twentyeleven」のテーマは複雑すぎて、HTMLやCSS、テンプレートタグなどをある程度理解していないと難しく感じるのですが、function.phpにいろいろ追加しなくても、とりあえず「twentyeleven」が提供してくれる機能をフルサポートしながらデザインを変えられるという大きな利点があります。

子テーマ用のフォルダを作成
最低限必要なのはstyle.css
その他のファイル
イメージフォルダのパス
スクリーンショット

１．子テーマ用のフォルダを作成

まずは子テーマ用のフォルダを作成します。フォルダ名は任意の名前でＯＫです。
「wp-content/themes/子テーマのフォルダ名」

２．最低限必要なのはstyle.css

子テーマ用のフォルダ内に、「style.css」と名前を付けたCSSファイルを作成します。wordpressはこのstyle.cssの記述を元に管理画面上にテーマ情報を表示し始めますので、定型のルールに従ってstyle.cssにテーマ情報を記載します。

/*
Theme Name: Kid
Template: twentyeleven
*/

@import url('../twentyeleven/style.css');

p {
    color: red;
}

１～４行目までが最低限必要な項目です。Theme Nameは半角英数字のみで、Templateの項目で親テーマを指定しているので、ここには親テーマの名称を記述します。

また6行目に「@import url()」の記述を追加し、親テーマのCSSをインポートしています。これによって、CSSに何の記述がなくても、初期では親テーマのCSSが効いている状態になります。

親テーマからデザインを変更したい場合には、8行目以降にあるように任意のCSSをどんどん追記していけば、親テーマのCSSよりこちらの記述の方が優先されます。

３．その他のファイル

CSSの追記だけでもサイトの見た目をがらりと変更することができますが、もっと大がかりな変更を加えようと思ったら、各テンプレートファイルに手を加えます。

子テーマでは、子テーマ用のフォルダ内に追加したテンプレートファイルは、親テーマの同名テンプレートファイルをオーバーライドする仕組みになっているので、例えば「footer.phpの内容を変更したい」場合には、子テーマ用フォルダ内にfooter.phpを追加し編集すればＯＫです。

４．イメージフォルダのパス

オリジナルのデザイン用に画像を用意した場合には、「images」フォルダを子テーマ用フォルダの中に追加し、そこにすべての画像を保存することとなるかと思います。

これらの画像をイメージタグで呼び出す場合のsrc属性の記述ですが、テンプレートタグのbloginfo(‘template_url’)やbloginfo( ‘template_directory’ )でパスを指定すると親テーマのパスが入ってしまうので、bloginfo(‘stylesheet_directory’)を利用します。

例

<img src="<?php bloginfo('stylesheet_directory') ?>/images/○○.png" />

５．スクリーンショット

wordpressの管理画面の「外観＞テーマ」の項目で表示される各テーマのスクリーンショットは、テーマフォルダ内に「screenshot.png」と名前を付けた画像ファイルを配置するだけで表示されます。子テーマを作成した際には、このスクリーンショットも作ってあげるとGoodです。