概要
テーマをカスタマイズしたり、テーマディレクトリ下のfunctions.phpを変更したりした後に、テーマをアップデートすると、カスタマイズや変更の内容が元に戻ってしまう。
これを回避するために、適用しているテーマの「子テーマ」を作って、これをカスタマイズする。
テーマの場所
WordPressのテーマは複数のファイルで構成され、テーマ名と同じディレクトリにそれらが格納されている。
1 |
/[wpのインストール場所]/wp-content/themes/[テーマ名] |
たとえば”First”というテーマはfirstというディレクトリで、その内容は次のようになっている。
1 2 3 4 5 6 7 8 9 10 11 12 |
% ls first 404.php functions.php page_nosidebar.php archive.php genericons readme.txt changelog.txt header.php screenshot.png comments.php images search.php content-none.php inc sidebar-footer.php content-page.php index.php sidebar.php content-single.php js single.php content.php languages style.css css page.php footer.php page_fullwidth.php |
子テーマ作成の流れ
- 子テーマのディレクトリを作る
- ディレクトリ下に必要なファイルを準備する
- style.css
- カスタマイズ対象ファイル(header.php、footer.phpなど)
- functions.php(カスタマイズする場合)
- 子テーマを有効化する
子テーマのディレクトリを作る
子テーマのディレクトリの場所は、親テーマと同じwp-content/themes/
の下。ディレクトリ名は親テーマ名に接尾辞-child
を付けることが推奨されている。Firstというテーマなら、first-child
。
必要なファイルを準備する
ここでは、必須のstyle.cssだけを準備する。たとえば”First”の子テーマを作る場合は以下を記述。
1 2 3 4 5 6 7 8 9 10 11 12 |
/* Template: first Theme Name: First-child Theme URI: http://taustation.com/ Description: Child theme of First Author: taustation Version: 1.0 */ @import url("../first/style.css"); 以下、カスタマイズ内容 |
コメント行のうち必須なのは、TemplateとTheme Nameの2つ。
- Templateには親テーマのディレクトリ名を設定(テーマ名ではない)
- Theme Nameには子テーマのテーマ名を設定(ディレクトリ名ではない)
@import
文は、url()の内容をインポートして適用する。ここで親テーマのcssを設定することで、親テーマのスタイルのすべてがインポートされる。
その後の行で、必要に応じてスタイルをカスタマイズ。
子テーマを有効化する
ダッシュボードの「外観」→「テーマ」で確認すると、子テーマが加えられているので、これを有効化する。
子テーマをオーバーライドする
style.css
@import url()
で親テーマのスタイルを継承した以降、独自のスタイル設定を記述することで親テーマのスタイルをオーバーライドできる。
たとえば以下の例では、h1タグの色を青にするよう設定している。
1 2 3 4 5 6 7 8 9 10 11 |
Template: first Theme Name: First-child Theme URI: http://taustation.com/ Description: Child theme of First Author: taustation Version: 1.0 */ @import url("../first/style.css"); h1{color: #0000ff;} |
実行結果は以下の通りで、h1タグの内容の前景色が青になっている。