• 赤色のリンクは、まだ日本語Codexに存在しないページ・画像です。英語版と併せてご覧ください。(詳細

このWikiはいつでも誰でも編集できます

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

提供: WordPress Codex 日本語版
移動先: 案内検索
(en:Child Themes 10:01, 3 April 2010 Bono 版を翻訳用にコピー)
 
(要翻訳、変更履歴セクション追加(テンプレートのオーバーライド))
1行目: 1行目:
 
{{Draft}}
 
{{Draft}}
 +
{{NeedTrans}}
  
 
A WordPress child theme is a theme that inherits the functionality of another theme (its parent theme) and adds to that functionality or modifies it.
 
A WordPress child theme is a theme that inherits the functionality of another theme (its parent theme) and adds to that functionality or modifies it.
134行目: 135行目:
 
*  [http://op111.net/53 How to make a child theme for WordPress: A pictorial introduction for beginners].  Illustrated introduction at op111.net.
 
*  [http://op111.net/53 How to make a child theme for WordPress: A pictorial introduction for beginners].  Illustrated introduction at op111.net.
 
*  [http://themeshaper.com/modify-wordpress-themes/ How to Modify WordPress Themes the Smart Way].  Four-part series on child themes at ThemeShaper.com.
 
*  [http://themeshaper.com/modify-wordpress-themes/ How to Modify WordPress Themes the Smart Way].  Four-part series on child themes at ThemeShaper.com.
 +
 +
== 変更履歴 ==
 +
 +
* [[Version 3.0|3.0]] : <!-- Template files in a Child Theme -->
  
 
{{原文|Child Themes|85251}}<!-- 10:01, 3 April 2010 Bono 版 -->
 
{{原文|Child Themes|85251}}<!-- 10:01, 3 April 2010 Bono 版 -->

2010年4月3日 (土) 19:14時点における版

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

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

A WordPress child theme is a theme that inherits the functionality of another theme (its parent theme) and adds to that functionality or modifies it.

In its most basic form—a directory with a style.css file in it—, a child theme is very easy to make; it requires only a basic familiarity with HTML and CSS, and no programming knowledge at all. At the same time, a child theme of that basic form allows you to modify the styling and layout of a parent theme to any extent without altering anything in the parent theme itself. So, when the parent theme is updated, your modifications are preserved.

With a basic understanding of PHP and of WordPress templates and the WordPress Plugin API, you can also use PHP in your child theme and modify any aspect of a parent theme without touching anything in it.

For this reason, child themes are the recommended way of making modifications to the theme you use.

Directory structure of a Child Theme

A child theme resides in its own directory in wp-content/themes. The following scheme shows the location of a child theme in a typical WordPress directory structure:

  • public_html
    • wp-content
      • themes (directory where all themes are located)
        • kid (directory of our child theme; can be named anything)
          • style.css (required file in a child theme; must be named style.css)

This directory can contain as little as a style.css file, and as much as is included in the most complex WordPress theme. In general, child themes can have any files full-fledged themes have:

  1. style.css (required)
  2. functions.php (optional)
  3. Template files (optional)
  4. Other files (optional)

TRANSITION

style.css in a Child Theme

style.css is the only required file in a child theme. It overrides the style.css of the parent theme and provides the information header by which WordPress recognizes the child theme.

The information header must be at the top of the file, as in WordPress themes in general, the only difference being that in child themes the Template: line is required (so that WordPress knows from which theme the child inherits its templates).

Below is an example of a child theme’s information header, along with a short explanation of each line:

/*
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. (required) Child theme name.
  • Theme URI. (optional) Child theme webpage.
  • Description. (optional) What this theme is. E.g.: My first child theme. Hurrah!
  • Author URI. (optional) Author webpage.
  • Author. (optional) Author name.
  • Template. (required) directory name of parent theme, case-sensitively.
  • Version. (optional) Child theme version. E.g.: 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最新版との差分