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

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

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

提供: WordPress Codex 日本語版
移動先: 案内検索
(親テーマのスタイルを継承しないなら @import の記述不要、を追加)
(英語版更新 en::Child Themes 04:17, 16 January 2015‎ Pietergoosen 版)
8行目: 8行目:
  
 
このような理由で、'''使用しているテーマをカスタマイズする方法として子テーマをおすすめします'''。
 
このような理由で、'''使用しているテーマをカスタマイズする方法として子テーマをおすすめします'''。
 +
 +
A child theme is a theme that inherits the functionality and styling of another theme, called the parent theme. Child themes are the recommended way of modifying an existing theme.
 +
 +
== Why use a Child Theme? ==
 +
 +
There are a few reasons why you would want to use a child theme:
 +
 +
* If you modify a theme directly and it is updated, then your modifications may be lost. By using a child theme you will ensure that your modifications are preserved.
 +
* Using a child theme can speed up development time. 
 +
* Using a child theme is a great way to to learn about WordPress theme development.
  
 
== 子テーマのディレクトリ構造 ==
 
== 子テーマのディレクトリ構造 ==
90行目: 100行目:
 
このシナリオでは親テーマのスタイルをほんの少しだけ変更したいのであって、すべてを放棄するわけではありません。子テーマは親テーマの ''style.css'' をオーバーライドするので親テーマのスタイルシートに子テーマのスタイルシートを追加するため、<code>@import</code> ルールを明示します。このルールがないと子テーマは指定したサイトタイトルの色以外のスタイルがまったく適用されません。
 
このシナリオでは親テーマのスタイルをほんの少しだけ変更したいのであって、すべてを放棄するわけではありません。子テーマは親テーマの ''style.css'' をオーバーライドするので親テーマのスタイルシートに子テーマのスタイルシートを追加するため、<code>@import</code> ルールを明示します。このルールがないと子テーマは指定したサイトタイトルの色以外のスタイルがまったく適用されません。
 
親テーマのスタイルを継承せず、子テーマ独自のスタイルを使用する場合は、<code>@import</code> ルールを書く必要はありません。
 
親テーマのスタイルを継承せず、子テーマ独自のスタイルを使用する場合は、<code>@import</code> ルールを書く必要はありません。
 +
 +
== How to Create a Child Theme ==
 +
 +
[[Image:child-theme-items.jpeg|right|Child Theme directory structure]]
 +
 +
A child theme consists of at least one directory (the child theme directory) and two files (style.css and functions.php), which you will need to create:
 +
 +
* The child theme directory
 +
* style.css
 +
* functions.php
 +
 +
The first step in creating a child theme is to create the child theme directory, which will be placed in <tt>wp-content/themes</tt>. It is recommended (though not required, especially if you're creating a theme for public use) that the name of your child theme directory is appended with '-child'. You will also want to make sure that there are no spaces in your child theme directory name, which may result in errors. In the screenshot above we have called our child theme 'twentyfifteen-child', indicating that the parent theme is the Twenty Fifteen theme.
 +
 +
The next step is to create your child theme's stylesheet (style.css). The stylesheet must begin with the following (the [[Theme_Development#Theme_Stylesheet|stylesheet header]]):
 +
 +
<pre>
 +
/*
 +
Theme Name:  Twenty Fifteen Child
 +
Theme URI:    http://example.com/twenty-fifteen-child/
 +
Description:  Twenty Fifteen Child Theme
 +
Author:      John Doe
 +
Author URI:  http://example.com
 +
Template:    twentyfifteen
 +
Version:      1.0.0
 +
License:      GNU General Public License v2 or later
 +
License URI:  http://www.gnu.org/licenses/gpl-2.0.html
 +
Tags:        light, dark, two-columns, right-sidebar, responsive-layout, accessibility-ready
 +
Text Domain:  twenty-fifteen-child
 +
*/
 +
</pre>
 +
 +
A couple things to note:
 +
 +
* You will need to replace the example text with the details relevant to your theme.
 +
 +
* The <tt>Template</tt> line corresponds to the directory name of the parent theme. The parent theme in our example is the Twenty Fifteen theme, so the <tt>Template</tt> will be <tt>twentyfifteen</tt>. You may be working with a different theme, so adjust accordingly.
 +
 +
* The only required child theme file is style.css, but functions.php is necessary to enqueue styles correctly (below).
 +
 +
The final step is to enqueue the parent and child theme stylesheets. Note that the previous method was to import the parent theme stylesheet using @import: this is no longer best practice. The correct method of enqueuing the parent theme stylesheet is to use <tt>[[Function Reference/wp_enqueue_script|wp_enqueue_script()]]</tt> in your child theme's functions.php. You will therefore need to create a functions.php in your child theme directory. The first line of your child theme's functions.php will be an opening PHP tag (<tt><?php</tt>), after which you can enqueue your parent and child theme stylesheets. The following example function will only work if your Parent Theme uses only one main style.css to hold all of the css. If your theme has more than one .css file (eg. ie.css, style.css, main.css) then you will have to make sure to maintain all of the Parent Theme dependencies.  Setting 'parent-style' as a dependency will ensure that the child theme stylesheet loads after it.  [http://wordpress.stackexchange.com/questions/163301/versioning-import-of-parent-themes-style-css See here a more detailed discussion] :
 +
 +
<pre>
 +
add_action( 'wp_enqueue_scripts', 'theme_enqueue_styles' );
 +
function theme_enqueue_styles() {
 +
    wp_enqueue_style( 'parent-style', get_template_directory_uri() . '/style.css' );
 +
 +
}
 +
</pre>
 +
 +
Your child theme is now ready for activation. Log in to your site's administration panel, and go to [[Administration Panels]] > [[Administration_Panels#Appearance|Appearance]] > [[Administration_Panels#Theme_Options|Themes]]. You should see your child theme listed and ready for activation.
 +
(If your WordPress installation is multi-site enabled, then you may need to switch to your network administration panel to enable the theme (within the [[Network Admin Themes Screen]]  tab). You can then switch back to your site-specific WordPress administration panel to activate your child theme.)
 +
 +
'''Note:''' You may need to re-save your menu (Appearance > Menus, or Appearance > Customize > Menus) and theme options (including background and header images) after activating the child theme.
 +
 +
== テンプレートファイル ==
 +
 +
 +
子テーマの[[テンプレート]] は ''style.css'' と同じように親テーマの '''同名ファイルをオーバーライドします '''。単純に同名のファイル名を使用すれば親テーマのテンプレートをオーバーライドできます。(注意: index.phpをオーバーライドできるのはWordPress 3.0以上です)
 +
 +
繰り返しますが、この機能は親テーマのファイルをまったく修正せずにテーマの調整が可能なので、親テーマがアップデートされても変更した分は失われません。
 +
 +
子テーマでテンプレートファイルを使用した例をいくつか紹介します:
 +
 +
*  親テーマが持っていないテンプレートファイルの追加。例えば、固定ページ編集画面で選択できるサイトマップ、シングルコラムのページなど
 +
*  親テーマが持っているテーマよりも使用用途を限ったテンプレートの追加。例えば、親ページの通常のarchive.phpの代わりにタグアーカイブで使用するためのtag.php
 +
*  親テーマテンプレートの入れ替え。例えば、親テーマのhome.phpをオーバーライドする子テーマのhome.php
 +
 +
If you want to change more than just the stylesheet, your child theme can override any file in the parent theme: simply include a file of the same name in the child theme directory, and it will override the equivalent file in the parent theme directory when your site loads.  For instance, if you want to change the PHP code for the site header, you can include a header.php in your child theme's directory, and that file will be used instead of the parent theme's header.php.
 +
 +
You can also include files in the child theme that are not included in the parent theme.  For instance, you might want to create a more specific template than is found in your parent theme, such as a template for a specific page or category archive.  See the [[Template Hierarchy]] for more information about how WordPress decides what template to use.
 +
  
 
== functions.php の使用方法 ==
 
== functions.php の使用方法 ==
113行目: 194行目:
 
</pre>
 
</pre>
  
== テンプレートファイル ==
+
Unlike ''style.css'', the ''functions.php'' of a child theme does not override its counterpart from the parent.  Instead, it is '''loaded in addition to the parent’s functions.php'''.  (Specifically, it is loaded right ''before'' the parent’s file.)
  
 +
In that way, the ''functions.php'' of a child theme provides a smart, trouble-free method of modifying the functionality of a parent theme.  Say that you want to add a PHP function to your theme.  The fastest way would be to open its ''functions.php'' file and put the function there.  But that’s not smart:  The next time your theme is updated, your function will disappear.  But there is an alternative way which is the smart way:  you can create a child theme, add a ''functions.php'' file in it, and add your function to that file.  The function will do the exact same job from there too, with the advantage that it will not be affected by future updates of the parent theme. Do not copy the full content of functions.php of the parent theme into functions.php in the child theme.
  
子テーマの[[テンプレート]] は ''style.css'' と同じように親テーマの '''同名ファイルをオーバーライドします '''。単純に同名のファイル名を使用すれば親テーマのテンプレートをオーバーライドできます。(注意: index.phpをオーバーライドできるのはWordPress 3.0以上です)
+
The structure of ''functions.php'' is simple:  An opening PHP tag at the top, and below it, your bits of PHP.  In it you can put as many or as few functions as you wish.  The example below shows an elementary ''functions.php'' file that does one simple thing: Adds a favicon link to the <code>head</code> element of HTML pages.
  
繰り返しますが、この機能は親テーマのファイルをまったく修正せずにテーマの調整が可能なので、親テーマがアップデートされても変更した分は失われません。
 
  
子テーマでテンプレートファイルを使用した例をいくつか紹介します:
+
<pre>
 +
<?php // Opening PHP tag - nothing should be before this, not even whitespace
 +
 
 +
// Custom Function to Include
 +
function favicon_link() {
 +
    echo '<link rel="shortcut icon" type="image/x-icon" href="/favicon.ico" />' . "\n";
 +
}
 +
add_action( 'wp_head', 'favicon_link' );
 +
</pre>
 +
 
 +
TIP FOR THEME DEVELOPERS.  The fact that a child theme’s ''functions.php'' is loaded first means that you can make the user functions of your theme pluggable —that is, replaceable by a child theme— by declaring them conditionally.  E.g.:
 +
 
 +
<pre>
 +
if ( ! function_exists( 'theme_special_nav' ) ) {
 +
    function theme_special_nav() {
 +
        //  Do something.
 +
    }
 +
}
 +
</pre>
 +
 
 +
In that way, a child theme can replace a PHP function of the parent by simply declaring it beforehand.
 +
 
  
*  親テーマが持っていないテンプレートファイルの追加。例えば、固定ページ編集画面で選択できるサイトマップ、シングルコラムのページなど
 
*  親テーマが持っているテーマよりも使用用途を限ったテンプレートの追加。例えば、親ページの通常のarchive.phpの代わりにタグアーカイブで使用するためのtag.php
 
*  親テーマテンプレートの入れ替え。例えば、親テーマのhome.phpをオーバーライドする子テーマのhome.php
 
  
  
130行目: 229行目:
  
 
''style.css''、''functions.php''、 そしてテンプレートファイルはWordPressが自動的に認識できるファイル形式です。これらに加え、通常のテーマで使用されるすべての形式のファイルを子テーマでも持つことができます。例えば、スタイルシートからリンクされるアイコンや画像、ページの一番上や一番下からリンクされるJavaScript ファイル、functions.phpや他のテンプレートファイルから呼び出されるphpファイルなどです。
 
''style.css''、''functions.php''、 そしてテンプレートファイルはWordPressが自動的に認識できるファイル形式です。これらに加え、通常のテーマで使用されるすべての形式のファイルを子テーマでも持つことができます。例えば、スタイルシートからリンクされるアイコンや画像、ページの一番上や一番下からリンクされるJavaScript ファイル、functions.phpや他のテンプレートファイルから呼び出されるphpファイルなどです。
 +
 +
 +
=== Referencing / Including Files in Your Child Theme ===
 +
 +
When you need to include files that reside within your child theme's directory structure, you will use [[Function_Reference/get_stylesheet_directory|get_stylesheet_directory()]]. Because the parent template's style.css is replaced by your child theme's style.css, and your style.css resides in the root of your child theme's subdirectory, get_stylesheet_directory() points to your child theme's directory (not the parent theme's directory).
 +
 +
Here's an example, using <code>require_once</code>, that shows how you can use get_stylesheet_directory when referencing a file stored within your child theme's directory structure.
 +
 +
<pre>
 +
require_once( get_stylesheet_directory() . '/my_included_file.php' );
 +
</pre>
 +
 +
== Other Useful Information ==
 +
 +
=== Using Post Formats ===
 +
 +
A child theme inherits [[Post Formats|post formats]] as defined by the parent theme.
 +
When creating child themes, be aware that using ''add_theme_support('post-formats')'' will '''override''' the formats defined by the parent theme, '''not add''' to it.
 +
 +
=== RTL support ===
 +
 +
To support RTL languages, add '''rtl.css''' file to your child theme, containing:
 +
 +
<pre>
 +
/*
 +
Theme Name: Twenty Fourteen Child
 +
Template: twentyfourteen
 +
*/
 +
 +
</pre>
 +
 +
'''rtl.css''' is only loaded by WordPress if [[Function Reference/is rtl|is_rtl()]] returns true.
 +
 +
It's recommended to add the rtl.css file to your child theme even if the parent theme has no rtl.css file.
 +
 +
=== Internationalization ===
 +
 +
Child themes, much like other extensions, may be translated into other languages by using gettext functions. For an overview, please see [[Translating WordPress]] & [[I18n for WordPress Developers]].
 +
 +
To internationalize a child theme follow these steps:
 +
 +
* Add a languages directory.
 +
** Something like <code>my-theme/languages/</code>.
 +
* Add language files.
 +
** Your filenames have to be <code>he_IL.po</code> & <code>he_IL.mo</code> (depending on your language), unlike plugin files which are <code>domain-he_IL.xx</code>.
 +
* Load a textdomain.
 +
** Use load_child_theme_textdomain() in functions.php during the after_setup_theme action.
 +
** The text domain defined in load_child_theme_textdomain() should be used to translate all strings in the child theme.
 +
* Use GetText functions to add i18n support for your strings.
 +
 +
==== Example: textdomain ====
 +
 +
<pre>
 +
<?php
 +
/**
 +
* Setup My Child Theme's textdomain.
 +
*
 +
* Declare textdomain for this child theme.
 +
* Translations can be filed in the /languages/ directory.
 +
*/
 +
function my_child_theme_setup() {
 +
    load_child_theme_textdomain( 'my-child-theme', get_stylesheet_directory() . '/languages' );
 +
}
 +
add_action( 'after_setup_theme', 'my_child_theme_setup' );
 +
?>
 +
</pre>
 +
 +
==== Example: gettext functions ====
 +
 +
<pre>
 +
<?php
 +
_e( 'Code is Poetry', 'my-child-theme' );
 +
?>
 +
</pre>
 +
 +
 +
To sum up, all strings that use "my-child-theme" textdomain will be translatable. The translation files must reside in "/languages/" directory.
 +
 +
  
 
== 資料とリファレンス ==
 
== 資料とリファレンス ==
136行目: 314行目:
 
*  [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.
 +
 +
 +
Be aware that some of these resources recommend using <tt>@import</tt> from your child theme's stylesheet as the method of importing the parent theme stylesheet. Please use the <tt>[[Function Reference/wp_enqueue_script|wp_enqueue_script()]]</tt> method described above.
 +
 +
* [[Theme Development]]
 +
* [http://themeshaper.com/modify-wordpress-themes/ How to Modify WordPress Themes the Smart Way (four part series)] 
 +
* [http://wpsites.net/wordpress-themes/how-to-make-your-own-child-theme-for-wordpress-beginners-guide/ How To Make Your Own Child Theme - Includes Screencast]
 +
* [http://www.hongkiat.com/blog/wordpress-child-themes-dev/ Guide to WordPress Child Theme Development]
 +
* [http://theme.fm/2011/07/how-to-create-a-child-theme-based-on-twenty-eleven-791/ How to: Create a Child Theme based on Twenty Eleven]
 +
* [http://wpmu.org/customizing-your-wordpress-theme-using-firebug/ Customizing your WordPress theme using Firebug]
 +
* [http://wp.tutsplus.com/tutorials/theme-development/child-themes-basics-and-creating-child-themes-in-wordpress/ Tutorial: Child Themes basics and creating Child Themes in WordPress]
 +
* [http://wp.tutsplus.com/tutorials/creative-coding/how-to-modify-the-parent-theme-behavior-within-the-child-theme/ How to modify the Parent Theme behavior within the Child Theme]
 +
* [https://wordpress.org/plugins/search.php?q=child+theme Child Theme Plugins]
 +
* [http://techblog.kjodle.net/2014/04/12/wordpress-child-themes-the-whys-and-hows/ WordPress Child Theme The Why and How]
 +
 +
  
 
== 変更履歴 ==
 
== 変更履歴 ==
141行目: 335行目:
 
* [[Version 3.0|3.0]] : <!-- Template files in a Child Theme -->
 
* [[Version 3.0|3.0]] : <!-- Template files in a Child Theme -->
  
{{原文|Child Themes|85251}}<!-- 10:01, 3 April 2010 Bono 版 -->
+
{{原文|Child Themes|149080}}<!-- 04:17, 16 January 2015‎ Pietergoosen 版 -->
  
 
{{DEFAULTSORT:こてえま}}
 
{{DEFAULTSORT:こてえま}}
149行目: 343行目:
  
 
[[en:Child Themes]]
 
[[en:Child Themes]]
 +
[[it:Temi Child]]
 +
[[ja:子テーマ]]
 +
[[ko:Child Themes]]
 +
[[es:Temas hijos]]
 +
[[nl:Child Thema's]]
 +
[[fr:Thèmes Enfant]]
 +
[[pt-br:Temas Filhos]]
 +
[[ru:Дочерние темы]]
 +
[[sk:Odvodené témy]]
 +
[[th:Child Themes]]
 +
[[zh-hans:子主题]]
 +
[[zh-tw:子主題]]
 +
[[mk:Дете теми]]

2015年1月24日 (土) 20:30時点における版

このページ「子テーマ」は 原文が頻繁に更新されており、情報が古くなっている可能性があります。最新版英語)も合わせてご覧ください。最新に更新してくださる協力者を求めています

WordPressの子テーマとは、別のテーマ(親テーマ)の機能を継承し、その機能にさらに機能を追加したりその機能を調整したりすることのできるテーマです。

もっとも単純な形式では style.css ファイルを一つだけ備えたディレクトリとなり、制作がとても簡単です。HTML と CSS に精通していればプログラミングの知識は必要ありません。また、基本的には親テーマ自身にはまったく手を加えないで親テーマのスタイルやレイアウトを好きなだけ変更することができます。そのため、親テーマがアップデートされても子テーマの変更は保持されます。

さらに、PHP や WordPress Plugin API を基本的に理解していれば、自分の子テーマの中で PHP を使い、親テーマにまったくさわることなくどのような改変でも可能になります。

このような理由で、使用しているテーマをカスタマイズする方法として子テーマをおすすめします

A child theme is a theme that inherits the functionality and styling of another theme, called the parent theme. Child themes are the recommended way of modifying an existing theme.

Why use a Child Theme?

There are a few reasons why you would want to use a child theme:

  • If you modify a theme directly and it is updated, then your modifications may be lost. By using a child theme you will ensure that your modifications are preserved.
  • Using a child theme can speed up development time.
  • Using a child theme is a great way to to learn about WordPress theme development.

子テーマのディレクトリ構造

子テーマは 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 ルールを明示します。このルールがないと子テーマは指定したサイトタイトルの色以外のスタイルがまったく適用されません。 親テーマのスタイルを継承せず、子テーマ独自のスタイルを使用する場合は、@import ルールを書く必要はありません。

How to Create a Child Theme

Child Theme directory structure

A child theme consists of at least one directory (the child theme directory) and two files (style.css and functions.php), which you will need to create:

  • The child theme directory
  • style.css
  • functions.php

The first step in creating a child theme is to create the child theme directory, which will be placed in wp-content/themes. It is recommended (though not required, especially if you're creating a theme for public use) that the name of your child theme directory is appended with '-child'. You will also want to make sure that there are no spaces in your child theme directory name, which may result in errors. In the screenshot above we have called our child theme 'twentyfifteen-child', indicating that the parent theme is the Twenty Fifteen theme.

The next step is to create your child theme's stylesheet (style.css). The stylesheet must begin with the following (the stylesheet header):

/*
 Theme Name:   Twenty Fifteen Child
 Theme URI:    http://example.com/twenty-fifteen-child/
 Description:  Twenty Fifteen Child Theme
 Author:       John Doe
 Author URI:   http://example.com
 Template:     twentyfifteen
 Version:      1.0.0
 License:      GNU General Public License v2 or later
 License URI:  http://www.gnu.org/licenses/gpl-2.0.html
 Tags:         light, dark, two-columns, right-sidebar, responsive-layout, accessibility-ready
 Text Domain:  twenty-fifteen-child
*/

A couple things to note:

  • You will need to replace the example text with the details relevant to your theme.
  • The Template line corresponds to the directory name of the parent theme. The parent theme in our example is the Twenty Fifteen theme, so the Template will be twentyfifteen. You may be working with a different theme, so adjust accordingly.
  • The only required child theme file is style.css, but functions.php is necessary to enqueue styles correctly (below).

The final step is to enqueue the parent and child theme stylesheets. Note that the previous method was to import the parent theme stylesheet using @import: this is no longer best practice. The correct method of enqueuing the parent theme stylesheet is to use wp_enqueue_script() in your child theme's functions.php. You will therefore need to create a functions.php in your child theme directory. The first line of your child theme's functions.php will be an opening PHP tag (<?php), after which you can enqueue your parent and child theme stylesheets. The following example function will only work if your Parent Theme uses only one main style.css to hold all of the css. If your theme has more than one .css file (eg. ie.css, style.css, main.css) then you will have to make sure to maintain all of the Parent Theme dependencies. Setting 'parent-style' as a dependency will ensure that the child theme stylesheet loads after it. See here a more detailed discussion :

add_action( 'wp_enqueue_scripts', 'theme_enqueue_styles' );
function theme_enqueue_styles() {
    wp_enqueue_style( 'parent-style', get_template_directory_uri() . '/style.css' );

}

Your child theme is now ready for activation. Log in to your site's administration panel, and go to Administration Panels > Appearance > Themes. You should see your child theme listed and ready for activation. (If your WordPress installation is multi-site enabled, then you may need to switch to your network administration panel to enable the theme (within the Network Admin Themes Screen tab). You can then switch back to your site-specific WordPress administration panel to activate your child theme.)

Note: You may need to re-save your menu (Appearance > Menus, or Appearance > Customize > Menus) and theme options (including background and header images) after activating the child theme.

テンプレートファイル

子テーマのテンプレートstyle.css と同じように親テーマの 同名ファイルをオーバーライドします 。単純に同名のファイル名を使用すれば親テーマのテンプレートをオーバーライドできます。(注意: index.phpをオーバーライドできるのはWordPress 3.0以上です)

繰り返しますが、この機能は親テーマのファイルをまったく修正せずにテーマの調整が可能なので、親テーマがアップデートされても変更した分は失われません。

子テーマでテンプレートファイルを使用した例をいくつか紹介します:

  • 親テーマが持っていないテンプレートファイルの追加。例えば、固定ページ編集画面で選択できるサイトマップ、シングルコラムのページなど
  • 親テーマが持っているテーマよりも使用用途を限ったテンプレートの追加。例えば、親ページの通常のarchive.phpの代わりにタグアーカイブで使用するためのtag.php
  • 親テーマテンプレートの入れ替え。例えば、親テーマのhome.phpをオーバーライドする子テーマのhome.php

If you want to change more than just the stylesheet, your child theme can override any file in the parent theme: simply include a file of the same name in the child theme directory, and it will override the equivalent file in the parent theme directory when your site loads. For instance, if you want to change the PHP code for the site header, you can include a header.php in your child theme's directory, and that file will be used instead of the parent theme's header.php.

You can also include files in the child theme that are not included in the parent theme. For instance, you might want to create a more specific template than is found in your parent theme, such as a template for a specific page or category archive. See the Template Hierarchy for more information about how WordPress decides what template to use.


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');

?>

Unlike style.css, the functions.php of a child theme does not override its counterpart from the parent. Instead, it is loaded in addition to the parent’s functions.php. (Specifically, it is loaded right before the parent’s file.)

In that way, the functions.php of a child theme provides a smart, trouble-free method of modifying the functionality of a parent theme. Say that you want to add a PHP function to your theme. The fastest way would be to open its functions.php file and put the function there. But that’s not smart: The next time your theme is updated, your function will disappear. But there is an alternative way which is the smart way: you can create a child theme, add a functions.php file in it, and add your function to that file. The function will do the exact same job from there too, with the advantage that it will not be affected by future updates of the parent theme. Do not copy the full content of functions.php of the parent theme into functions.php in the child theme.

The structure of functions.php is simple: An opening PHP tag at the top, and below it, your bits of PHP. In it you can put as many or as few functions as you wish. The example below shows an elementary functions.php file that does one simple thing: Adds a favicon link to the head element of HTML pages.


<?php // Opening PHP tag - nothing should be before this, not even whitespace

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

TIP FOR THEME DEVELOPERS. The fact that a child theme’s functions.php is loaded first means that you can make the user functions of your theme pluggable —that is, replaceable by a child theme— by declaring them conditionally. E.g.:

if ( ! function_exists( 'theme_special_nav' ) ) {
    function theme_special_nav() {
        //  Do something.
    }
}

In that way, a child theme can replace a PHP function of the parent by simply declaring it beforehand.



子テーマの他のファイル

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


Referencing / Including Files in Your Child Theme

When you need to include files that reside within your child theme's directory structure, you will use get_stylesheet_directory(). Because the parent template's style.css is replaced by your child theme's style.css, and your style.css resides in the root of your child theme's subdirectory, get_stylesheet_directory() points to your child theme's directory (not the parent theme's directory).

Here's an example, using require_once, that shows how you can use get_stylesheet_directory when referencing a file stored within your child theme's directory structure.

require_once( get_stylesheet_directory() . '/my_included_file.php' );

Other Useful Information

Using Post Formats

A child theme inherits post formats as defined by the parent theme. When creating child themes, be aware that using add_theme_support('post-formats') will override the formats defined by the parent theme, not add to it.

RTL support

To support RTL languages, add rtl.css file to your child theme, containing:

/*
Theme Name: Twenty Fourteen Child
Template: twentyfourteen
*/

rtl.css is only loaded by WordPress if is_rtl() returns true.

It's recommended to add the rtl.css file to your child theme even if the parent theme has no rtl.css file.

Internationalization

Child themes, much like other extensions, may be translated into other languages by using gettext functions. For an overview, please see Translating WordPress & I18n for WordPress Developers.

To internationalize a child theme follow these steps:

  • Add a languages directory.
    • Something like my-theme/languages/.
  • Add language files.
    • Your filenames have to be he_IL.po & he_IL.mo (depending on your language), unlike plugin files which are domain-he_IL.xx.
  • Load a textdomain.
    • Use load_child_theme_textdomain() in functions.php during the after_setup_theme action.
    • The text domain defined in load_child_theme_textdomain() should be used to translate all strings in the child theme.
  • Use GetText functions to add i18n support for your strings.

Example: textdomain

<?php
/**
 * Setup My Child Theme's textdomain.
 *
 * Declare textdomain for this child theme.
 * Translations can be filed in the /languages/ directory.
 */
function my_child_theme_setup() {
    load_child_theme_textdomain( 'my-child-theme', get_stylesheet_directory() . '/languages' );
}
add_action( 'after_setup_theme', 'my_child_theme_setup' );
?>

Example: gettext functions

<?php
_e( 'Code is Poetry', 'my-child-theme' );
?>


To sum up, all strings that use "my-child-theme" textdomain will be translatable. The translation files must reside in "/languages/" directory.


資料とリファレンス


Be aware that some of these resources recommend using @import from your child theme's stylesheet as the method of importing the parent theme stylesheet. Please use the wp_enqueue_script() method described above.


変更履歴

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