子テーマのディレクトリ構造
子テーマは wp-content/themes 内に自身のディレクトリを持ちます。次に典型的な WordPress ディレクトリ構造での子テーマの場所を示します:
- public_html
- wp-content
- themes (すべてのテーマが入るディレクトリ)
- kid (子テーマ自身のディレクトリ; 名称は自由)
- style.css (子テーマに必須; 名称は style.css)
- kid (子テーマ自身のディレクトリ; 名称は自由)
- themes (すべてのテーマが入るディレクトリ)
- wp-content
最小構成は style.css ファイルのみでも可能です。最大では通常のテーマと同じファイルを持つこともできます:
- style.css (必須)
- functions.php (任意)
- テンプレートファイル (任意、複数ファイル可)
- 他のファイル (任意)
子テーマの style.css
子テーマで必須なのは style.css ファイルだけです。このファイルで親テーマの style.css を上書きし、WordPress が子テーマを認識するためのヘッダー情報を含めます。
ヘッダー情報はファイルの先頭に必要で、通常のテーマとの違いは Template: 行が必須になります。これによりWordPressがどの親テーマを継承するのか知ることができます。
以下は子テーマ用ヘッダーの例と説明です:
[php gutter=”false”]/*
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
*/[/php]
基本的な子テーマの例
例としてTwenty Ten（WordPress 3.0 のデフォルトテーマ）を利用します。タイトルの色を黒から緑に変更する以外はすべてそのまま利用します。子テーマを利用すると、次の三つのステップでできます:
- wp-content/themes に新しいディレクトリを作成します
- 次のコードを style.css ファイルに保存し、作成した新しいディレクトリに入れます
- ダッシュボード › テーマ で新しいテーマを有効化します
[php gutter=”false”]/*
Theme Name: Kid
Author: Demetris
Template: twentyten
*/
@import url(‘../twentyten/style.css’);
#site-title a {
color: #009900;
}[/php]
上記コードを詳細に説明すると:
/*子テーマの情報ヘッダーの始まりTheme Name:子テーマ名を指定Author:作者名 (任意、省略可)Template:子テーマが継承する親テーマを指定。例えば子テーマが利用するテンプレートの入っているディレクトリ名*/子テーマ情報ヘッダーの終わり@importルールで親テーマのスタイルシートをインポート#site-title aルールで親テーマの対応するルールをオーバーライドしてサイト名の色（緑）を設定
@import ルールの注意
このシナリオでは親テーマのスタイルをほんの少しだけ変更したいのであって、すべてを放棄するわけではありません。子テーマは親テーマの style.css をオーバーライドするので親テーマのスタイルシートに子テーマのスタイルシートを追加するため、@import ルールを明示します。このルールがないと子テーマは指定したサイトタイトルの色以外のスタイルがまったく適用されません。 親テーマのスタイルを継承せず、子テーマ独自のスタイルを使用する場合は、@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 gutter=”false”]<?php
function favicon_link() {
echo ‘<link rel=”shortcut icon” type=”image/x-icon” href=”/favicon.ico” />’ . “\n”;
}
add_action(‘wp_head’, ‘favicon_link’);
?>[/php]
テンプレートファイル
子テーマのテンプレート は style.css と同じように親テーマの 同名ファイルをオーバーライドします 。単純に同名のファイル名を使用すれば親テーマのテンプレートをオーバーライドできます。（注意: index.phpをオーバーライドできるのはWordPress 3.0以上です）
繰り返しますが、この機能は親テーマのファイルをまったく修正せずにテーマの調整が可能なので、親テーマがアップデートされても変更した分は失われません。
子テーマでテンプレートファイルを使用した例をいくつか紹介します:
- 親テーマが持っていないテンプレートファイルの追加。例えば、固定ページ編集画面で選択できるサイトマップ、シングルコラムのページなど
- 親テーマが持っているテーマよりも使用用途を限ったテンプレートの追加。例えば、親ページの通常のarchive.phpの代わりにタグアーカイブで使用するためのtag.php
- 親テーマテンプレートの入れ替え。例えば、親テーマのhome.phpをオーバーライドする子テーマのhome.php
子テーマの他のファイル
style.css、functions.php、 そしてテンプレートファイルはWordPressが自動的に認識できるファイル形式です。これらに加え、通常のテーマで使用されるすべての形式のファイルを子テーマでも持つことができます。例えば、スタイルシートからリンクされるアイコンや画像、ページの一番上や一番下からリンクされるJavaScript ファイル、functions.phpや他のテンプレートファイルから呼び出されるphpファイルなどです。
コメント