「子テーマ」の版間の差分

2010年4月17日 (土) 23:59時点における版

WordPressの子テーマとは、別のテーマ（親テーマ）の機能を継承し、その機能にさらに機能を追加したりその機能を調整したりすることのできるテーマです。

もっとも単純な形式では style.css ファイルを一つだけ備えたディレクトリとなり、制作がとても簡単です。HTML と CSS に精通していればプログラミングの知識は必要ありません。また、基本的には親テーマ自身にはまったく手を加えないで親テーマのスタイルやレイアウトを好きなだけ変更することができます。そのため、親テーマがアップデートされても子テーマの変更は保持されます。

さらに、PHP や WordPress Plugin API を基本的に理解していれば、自分の子テーマの中で PHP を使い、親テーマにまったくさわることなくどのような改変でも可能になります。

このような理由で、使用しているテーマをカスタマイズする方法として子テーマをおすすめします。

子テーマのディレクトリ構造

子テーマは wp-content/themes 内に自身のディレクトリを持ちます。次に典型的な WordPress ディレクトリ構造での子テーマの場所を示します:

• public_html
  • wp-content
    • themes (すべてのテーマが入るディレクトリ)
      • kid (子テーマ自身のディレクトリ; 名称は自由)
        • style.css (子テーマに必須; 名称は style.css)

最小構成は style.css ファイルのみでも可能です。最大では通常のテーマと同じファイルを持つこともできます:

1. style.css (必須)
2. functions.php (任意)
3. テンプレートファイル (任意、複数フィアル可)
4. 他のファイル (任意)

子テーマの style.css

子テーマで必須なのは style.css ファイルだけです。このファイルで親テーマの style.css をオーバーライドし、WordPress が子テーマを認識するためのヘッダー情報を含めます。

ヘッダー情報はファイルの先頭に必要で、通常のテーマとの違いは Template: 行が必須になります。これによりWordPressがどの親テーマを継承するのか知ることができます。

以下は子テーマ用ヘッダーの例と説明です:

/*
Theme Name:     Kid
Theme URI:      http: //example.com/
Description:    Child theme for the Twenty Ten theme for WordPress
Author:         Demetris
Author URI:     http: //example.com/about/
Template:       twentyten
Version:        0.1.0
*/

• Theme Name (必須) 子テーマ名
• Theme URI (任意) 子テーマのウェブページ
• Description (任意) テーマの説明。例: わたしの最初の子テーマ。ワーイ!
• Author URI (任意) 作者のウェブページ
• Author (任意) 作者の名前
• Template (必須) 親テーマのディレクトリ名, 大文字小文字を区別します
• Version (任意) 子テーマのバージョン。例: 0.1, 1.0, etc

基本的な子テーマの例

例としてTwenty Ten（WordPress 3.0 のデフォルトテーマ）を利用します。タイトルの色を黒から緑に変更する以外はすべてそのまま利用します。子テーマを利用すると、次の三つのステップでできます:

1. wp-content/themes に新しいディレクトリを作成します
2. 次のコードを style.css ファイルに保存し、作成した新しいディレクトリに入れます
3. ダッシュボード › テーマ で新しいテーマを有効化します

/*
Theme Name:     Kid
Author:         Demetris
Template:       twentyten
*/

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

#site-title a {
    color: #009900;
}

上記コードを詳細に説明すると:

1. /* 子テーマの情報ヘッダーの始まり
2. Theme Name: 子テーマ名を指定
3. Author: 作者名 (任意、省略可)
4. Template: 子テーマが継承する親テーマを指定。例えば子テーマが利用するテンプレートの入っているディレクトリ名
5. */ 子テーマ情報ヘッダーの終わり
6. @import ルールで親テーマのスタイルシートをインポート
7. #site-title a ルールで親テーマの対応するルールをオーバーライドしてサイト名の色（緑）を設定

@import ルールの注意

このシナリオでは親テーマのスタイルをほんの少しだけ変更したいのであって、すべてを放棄するわけではありません。子テーマは親テーマの style.css をオーバーライドするので親テーマのスタイルシートに子テーマのスタイルシートを追加するため、@import ルールを明示します。このルールがないと子テーマは指定したサイトタイトルの色以外のスタイルがまったく適用されません。

functions.php の使用方法

style.css と違い、functions.php は同名ファイルでオーバーライドできません。その代わり、親の functions.php に追加して読み込まれます。正確にいうと、親テーマの functions.php の直前に読み込まれます。したがって、もし親テーマの functions.php で favicon_link() という関数があるとき、子テーマのfunctions.php で同名の関数があれば、子テーマの関数が使用されます。

再び、WordPressのこの処理方法のおかげで、親テーマの機能を変更するための賢くてトラブルの無い手段をこのファイルは提供します。親テーマのfunctions.phpを編集して次のアップデートでその変更分を失ってしまう代わりに、子テーマを作成し、そこにfunctions.phpを追加し、それを使って自分の変更を追加するようにします。

functions.phpの構造は単純です。最初にphpの開始タグがあり、最後にphpの閉じタグがあります。そしてその間にphpのコードが入ります。そこには必要な関数をいくつでも入れることができます。

次のサンプルは、HTMLページのhead要素に faviconを追加するためだけの簡単なfunctions.php ファイルです:

<?php

function favicon_link() {
    echo '<link rel="shortcut icon" type="image/x-icon" href="/favicon.ico" />' . "\n";
}
add_action('wp_head', 'favicon_link');

?>

テンプレートファイル

子テーマのテンプレート は style.css と同じように親テーマの 同名ファイルをオーバーライドします 。単純に同名のファイル名を使用すれば親テーマのテンプレートをオーバーライドできます。（注意: index.phpをオーバーライドできるのはWordPress 3.0以上です）

繰り返しますが、この機能は親テーマのファイルをまったく修正せずにテーマの調整が可能なので、親テーマがアップデートされても変更した分は失われません。

子テーマでテンプレートファイルを使用した例をいくつか紹介します:

• 親テーマが持っていないテンプレートファイルの追加。例えば、固定ページ編集画面で選択できるサイトマップ、シングルコラムのページなど
• 親テーマが持っているテーマよりも使用用途を限ったテンプレートの追加。例えば、親ページの通常のarchive.phpの代わりにタグアーカイブで使用するためのtag.php
• 親テーマテンプレートの入れ替え。例えば、親テーマのhome.phpをオーバーライドする子テーマのhome.php

子テーマの他のファイル

style.css、functions.php、 そしてテンプレートファイルはWordPressが自動的に認識できるファイル形式です。これらに加え、通常のテーマで使用されるすべての形式のファイルを子テーマでも持つことができます。例えば、スタイルシートからリンクされるアイコンや画像、ページの一番上や一番下からリンクされるJavaScript ファイル、functions.phpや他のテンプレートファイルから呼び出されるphpファイルなどです。

資料とリファレンス

• テーマの作成
• How to make a child theme for WordPress: A pictorial introduction for beginners. Illustrated introduction at op111.net.
• How to Modify WordPress Themes the Smart Way. Four-part series on child themes at ThemeShaper.com.

変更履歴

• 3.0 :

最新英語版： WordPress Codex » Child Themes （最新版との差分）