WordPressの Twenty Ten テーマ の 子テーマを作る方法

Twenty Ten を親テーマとする「 Twenty Ten Kid 」という子テーマを作ってみる。

wp-content/themes 内に、子テーマ用ディレクトリを作る。今回は、twentytenkidとする。

• public_html
  • wp-content
    • themes (すべてのテーマが入るディレクトリ)
      • twentytenkid (子テーマのディレクトリ)(今回は、twentytenkidとする)
        • style.css (必須)
        • functions.php (任意)
        • ページ系テンプレートファイル (任意)
        • モジュール系テンプレートファイル (任意)
          • images (任意)(画像用ディレクトリ)
            • 画像 (任意)

子テーマに必須なのは、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 にある場合、子テーマの関数が適用される。