Twenty Ten を親テーマとする「 Twenty Ten Kid 」という子テーマを作ってみる。
wp-content/themes 内に、子テーマ用ディレクトリを作る。今回は、twentytenkidとする。
- public_html
- wp-content
- themes (すべてのテーマが入るディレクトリ)
- twentytenkid (子テーマのディレクトリ)(今回は、twentytenkidとする)
- style.css (必須)
- functions.php (任意)
- ページ系テンプレートファイル (任意)
- モジュール系テンプレートファイル (任意)
- images (任意)(画像用ディレクトリ)
- 画像 (任意)
- images (任意)(画像用ディレクトリ)
- twentytenkid (子テーマのディレクトリ)(今回は、twentytenkidとする)
- themes (すべてのテーマが入るディレクトリ)
- wp-content
子テーマに必須なのは、style.css ファイルのみなので、今回は、style.css ファイルのみの最小構成で作る。
style.css
twentytenkid フォルダ内に、style.css ファイルを作成。テキストエディタで開き、ファイルの先頭にヘッダー情報を書く。
@charset "utf-8"; /* Theme Name: Twenty Ten Kid Theme URI: http://alphasis.info/2010/09/twentyten-kid/ Description: Twenty Ten を親テーマとする子テーマ Author: cyberLab Author URI: http://alphasis.info/ Template: twentyten Version: 0.1.0 */
- Theme Name: 子テーマ名 (必須)
- Theme URI: 子テーマのウェブページ (任意)
- Description: テーマの説明 (任意)
- Author URI: 作者のウェブページ (任意)
- Author: 作者の名前 (任意)
- Template: 親テーマのディレクトリ名 (必須)
- Version: 子テーマのバージョン (任意)
先頭行の「@charset “utf-8”;」は、このスタイルシートは、utf-8で書かれていると宣言している。
子テーマに必須なのは、「 Theme Name: 」と「 Template: 」。
大事なのは、「 Template: 」。ここで親テーマのディレクトリを指定している。
次に、
@import url('../twentyten/style.css');
と記入し、親テーマのスタイルシートを読み込む。
これだけで、子テーマの出来上がり。とは言え、まだ何も変更を加えていないので、Twenty Ten のまま。
試しに、全体のフォントを指定してみる。
body, input, textarea, .page-title span, .pingback a.url { font-family: Verdana, sans-serif; }
を追記。
さらに、投稿記事のマージン設定が気に入らないので、
/* =Content -------------------------------------------------------------- */ #content p, #content ul, #content ol, #content dd, #content pre, #content hr { margin-bottom: 0px; } #content h1, #content h2, #content h3, #content h4, #content h5, #content h6 { color: #000; line-height: 1.5em; margin: 15px 0 5px 0; } .entry-utility { clear: both; color: #888; font-size: 12px; line-height: 18px; margin-top: 15px; }
を追記。
ここで、管理パネルで「 外観->テーマ 」「 テーマの管理 」タブ内で「 Twenty Ten Kid 0.1.0 」を有効化する。
子テーマのスタイルシートは、問題なく機能した。
テンプレートファイル
子テーマフォルダ内に親テーマフォルダ内と同名のテンプレートファイルを作ると、親テーマフォルダ内の同名のテンプレートファイルをオーバーライド(上書き・再定義)することができる。
functions.php
functions.php は、親テーマの functions.php を子テーマの functions.php でオーバーライド(上書き・再定義)されない。親テーマの functions.php が読み込まれる直前に、子テーマの functions.php を読み込む。もし親テーマの functions.php にある関数と同名の関数が子テーマの functions.php にある場合、子テーマの関数が適用される。