当サイト、Codex 日本語版は今後積極的な更新は行わない予定です。後継となる新ユーザーマニュアルは、https://ja.wordpress.org/support/ にあります。
万が一、当サイトで重大な問題を発見した際などは、フォーラムWordSlack #docs チャンネルでお知らせください。</p>

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

提供: WordPress Codex 日本語版
移動先: 案内検索
(Example of basic Child Theme: 基本的な子テーマの例)
91行目: 91行目:
 
このシナリオでは親テーマのスタイルをほんの少しだけ変更したいのであって、すべてを放棄するわけではありません。子テーマは親テーマの ''style.css'' をオーバーライドするので親テーマのスタイルシートに子テーマのスタイルシートを追加するため、<code>@import</code> ルールを明示します。このルールがないと子テーマは指定したサイトタイトルの色以外のスタイルがまったく適用されません。
 
このシナリオでは親テーマのスタイルをほんの少しだけ変更したいのであって、すべてを放棄するわけではありません。子テーマは親テーマの ''style.css'' をオーバーライドするので親テーマのスタイルシートに子テーマのスタイルシートを追加するため、<code>@import</code> ルールを明示します。このルールがないと子テーマは指定したサイトタイトルの色以外のスタイルがまったく適用されません。
  
== functions.php in a Child Theme ==
+
== functions.php の使用方法 ==
  
Unlike ''style.css'', the ''functions.php'' of a child theme does not override its namesake from the parent.  Instead, '''it is loaded in addition to the parent’s functions.php''' (to be exact, it is loaded right ''before'' the parent’s file).
+
''style.css'' と違い、''functions.php'' は同名ファイルでオーバーライドできません。その代わり、'''親の functions.php に追加して読み込まれます'''。正確にいうと、親テーマの functions.php の直前に読み込まれます。したがって、もし親テーマの functions.php で favicon_link() という関数があるとき、子テーマのfunctions.php で同名の関数があれば、子テーマの関数が使用されます。<br>
  
Here again, thanks to the way it is handled by WordPress, this file is a smart and trouble-free method of modifying the functionality of your main theme:  Instead of editing the ''functions.php'' of you main theme and losing your work in the next update, you can make a child theme and use its ''functions.php'' to add your modifications.
+
再び、WordPressのこの処理方法のおかげで、親テーマの機能を変更するための賢くてトラブルの無い手段をこのファイルは提供します。親テーマのfunctions.phpを編集して次のアップデートでその変更分を失ってしまう代わりに、子テーマを作成し、そこにfunctions.phpを追加し、それを使って自分の変更を追加するようにします。
 +
 
 +
functions.phpの構造は単純です。最初にphpの開始タグがあり、最後にphpの閉じタグがあります。そしてその間にphpのコードが入ります。そこには必要な関数をいくつでも入れることができます。
 +
 
 +
次のサンプルは、HTMLページのhead要素に faviconを追加するためだけの簡単なfunctions.php ファイルです:
  
The structure of ''functions.php'' is simple:  An opening PHP tag at the top, a closing PHP tag at the bottom, and, between the two, your bits of code.  In it you can put as many or as few functions as you wish.  The example below is a basic ''functions.php'' file that does one simple thing:  adds a favicon link to the <code>head</code> element of HTML pages.
 
  
 
<pre>
 
<pre>
110行目: 113行目:
 
</pre>
 
</pre>
  
== Template files in a Child Theme ==
+
== テンプレートファイル ==
 +
 
 +
 
 +
子テーマの[[テンプレート]] は ''style.css'' と同じように親テーマの '''同名ファイルをオーバーライドします '''。単純に同名のファイル名を使用すれば親テーマのテンプレートをオーバーライドできます。(注意: index.phpをオーバーライドできるのはWordPress 3.0以上です)
  
[[Templates]] in child themes behave like ''style.css'' in that '''they override their namesakes''' from the parent.  A child theme can override any parental template by simply using a file with the same name.  (NOTE.  ''index.php'' can only be overriden in WordPress 3.0 and newer.)
+
繰り返しますが、この機能は親テーマのファイルをまったく修正せずにテーマの調整が可能なので、親テーマがアップデートされても変更した分は失われません。
  
Again, this feature of WordPress lets you make changes in the templates of your theme without touching anything in them, so that your modifications are preserved every time the parent theme is updated.
+
子テーマでテンプレートファイルを使用した例をいくつか紹介します:
  
Here are a few example cases for using template files in a child theme:
+
*  親テーマが持っていないテンプレートファイルの追加。例えば、固定ページ編集画面で選択できるサイトマップ、シングルコラムのページなど
 +
*  親テーマが持っているテーマよりも使用用途を限ったテンプレートの追加。例えば、親ページの通常のarchive.phpの代わりにタグアーカイブで使用するためのtag.php
 +
*  親テーマテンプレートの入れ替え。例えば、親テーマのhome.phpをオーバーライドする子テーマのhome.php
  
*  Add a template that the parent theme does not have.  E.g., a page template for a sitemap, or for single-column pages, that will be availabe to select in the Page Edit screen.
 
*  Add a template [[Template Hierarchy|more specific]] than what the parent has.  E.g., a ''tag.php'' to use for tag archives instead of the generic ''archive.php'' of the parent.
 
*  Replace a template of the parent.  E.g., make your own ''home.php'' to override the parent’s ''home.php''.
 
  
== Other files in a Child Theme ==
+
== 子テーマの他のファイル ==
  
''style.css'', ''functions.php'', and templates are the three types of file in a (child) theme recognized automatically by WordPress.  In addition to these, a child theme can also have all types of files used by full-fledged themes.  For example, icons and images that are linked from its stylesheet,  JavaScript files linked from the top or bottom of pages, or PHP files that are called from its templates or from ''functions.php''.
+
''style.css''''functions.php''、 そしてテンプレートファイルはWordPressが自動的に認識できるファイル形式です。これらに加え、通常のテーマで使用されるすべての形式のファイルを子テーマでも持つことができます。例えば、スタイルシートからリンクされるアイコンや画像、ページの一番上や一番下からリンクされるJavaScript ファイル、functions.phpや他のテンプレートファイルから呼び出されるphpファイルなどです。
  
== References and Resources ==
+
== 資料とリファレンス ==
  
 
*  [[Theme Development]]
 
*  [[Theme Development]]

2010年4月12日 (月) 15:38時点における版

このページはラフドラフトで、まだ内容の検証が済んでいません。情報が間違っていたり書き直されることがあります。
執筆中のため、執筆者の許可なく編集しないでください

このページ「子テーマ」は未翻訳です。和訳や日本語情報を加筆してくださる協力者を求めています

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

資料とリファレンス

変更履歴

最新英語版: WordPress Codex » Child Themes最新版との差分