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

子テーマ

提供: WordPress Codex 日本語版
2010年4月6日 (火) 20:07時点におけるTai (トーク | 投稿記録)による版 (style.css in a Child Theme: 子テーマの style.css)

移動先: 案内検索

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

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

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

Example of basic Child Theme

TRANSITION

Let’s say that our main theme is Twenty Ten (the default theme in WordPress 3.0). We like everything in it, except the colour of the site’s title, which we want to change from black to green. Using the child-theme method, all it takes is three simple steps:

  1. We make a new directory in wp-content/themes.
  2. We save the code below in a file named style.css, and we drop this file in our new directory.
  3. We go to Dashboard › Themes to activate our new theme.
/*
Theme Name:     Kid
Author:         Demetris
Template:       twentyten
*/

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

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

Here is what the above code does, step by step:

  1. /* opens the child theme’s information header.
  2. Theme Name: specifies the child theme’s name.
  3. Author: gives the author’s name. (This is optional and can be left out.)
  4. Template: declares the child theme’s parent; i.e., the directory of the theme whose templates the child uses.
  5. */ closes the child’s information header.
  6. The @import rule brings in the parent’s stylesheet.
  7. The #site-title a rule defines a colour (green) for the site’s name, overriding the corresponding rule of the parent.

Note on the @import rule

In our scenario, we wanted to make a tiny change to the parent theme’s styling, not discard it completely. Since child themes override the parental style.css, we used an explicit @import rule to add the parent’s stylesheet into the child’s stylesheet. Without that rule the child theme would have not styling or layout at all, other that the green site title which we specified.

functions.php in a Child Theme

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).

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.

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 head element of HTML pages.

<?php

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

?>

Template files in a Child Theme

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:

  • 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 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.

References and Resources

変更履歴

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