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

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

提供: WordPress Codex 日本語版
移動先: 案内検索
(英語版更新 en::Child Themes 04:17, 16 January 2015‎ Pietergoosen 版)
(翻訳についてのリンクを追加。)
 
(3人の利用者による、間の3版が非表示)
1行目: 1行目:
{{Old|原文が頻繁に更新されており、}}
+
<div class="important">
 +
'''このページは最新情報に追随して更新されていません'''。
 +
最新の子テーマ開発手法については[https://developer.wordpress.org/themes/advanced-topics/child-themes/ テーマハンドブック] (英語版) をご確認ください。翻訳にご協力くださる方はぜひ[https://ja.wordpress.org/team/handbook/translation/translating-documentation/#developer-wordpress-org-%e5%86%85%e3%81%ae%e3%83%89%e3%82%ad%e3%83%a5%e3%83%a1%e3%83%b3%e3%83%88 ご相談ください]。
 +
</div>
  
WordPressの子テーマとは、別のテーマ(親テーマ)の機能を継承し、その機能にさらに機能を追加したりその機能を調整したりすることのできるテーマです。
 
  
もっとも単純な形式では ''style.css'' ファイルを一つだけ備えたディレクトリとなり、制作がとても簡単です。HTML と CSS に精通していればプログラミングの知識は必要ありません。また、基本的には親テーマ自身にはまったく手を加えないで親テーマのスタイルやレイアウトを''好きなだけ変更することができます''。そのため、親テーマがアップデートされても子テーマの変更は保持されます。
+
子テーマは、親テーマと呼ばれる別のテーマの機能とスタイルを継承したテーマです。既存のテーマを変更する方法として、子テーマが推奨されています。
  
さらに、PHP や WordPress Plugin API を基本的に理解していれば、自分の子テーマの中で PHP を使い、親テーマにまったくさわることなくどのような改変でも可能になります。
 
  
このような理由で、'''使用しているテーマをカスタマイズする方法として子テーマをおすすめします'''。
+
== なぜ子テーマを使うのか?<!--Why use a Child Theme?--> ==
  
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:
+
* テーマを直接変更した場合、そのテーマがアップデートされると変更が失われるかもしれません。子テーマを使用すればテーマの変更は確実に保持されます。
 +
* 子テーマを使用することで開発時間を短縮できます。
 +
* 子テーマの使用することでWordPressのテーマの開発を良い形で学べます。
  
* 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.
 
  
== 子テーマのディレクトリ構造 ==
+
== 子テーマの作り方<!--How to Create a Child Theme--> ==
 +
[[Image:child-theme-items.jpeg|right|子テーマのディレクトリ構造]]
  
子テーマは ''wp-content/themes'' 内に自身のディレクトリを持ちます。次に典型的な WordPress ディレクトリ構造での子テーマの場所を示します:
+
子テーマは、少なくとも 1つのディレクトリ(子テーマディレクトリ)と、2つのファイル(style.css と functions.php) から構成されます。以下を作成する必要があります。
  
*  '''public_html'''
 
**      '''wp-content'''
 
***        '''themes''' (すべてのテーマが入るディレクトリ)
 
****            '''kid''' (子テーマ自身のディレクトリ; 名称は自由)
 
*****              '''style.css''' (子テーマに必須; 名称は ''style.css'')
 
  
最小構成は ''style.css'' ファイルのみでも可能です。最大では通常のテーマと同じファイルを持つこともできます:
+
* 子テーマディレクトリ
 +
* style.css
 +
* functions.php
  
#  style.css (必須)
 
#  functions.php (任意)
 
#  テンプレートファイル (任意、複数ファイル可)
 
#  他のファイル (任意)
 
  
== 子テーマの style.css ==
+
子テーマを作成する最初のステップは、子テーマディレクトリの作成です。<tt>wp-content/themes</tt> ディレクトリ下に作成します。子テーマディレクトリの名前には最後に '-child' を付けることが推奨されます(ただし必須ではありません。特に一般に公開する予定のテーマを作成する場合はこの限りではありません)。また、子テーマディレクトリの名前には空白を含めないでください。エラーが発生します。上の画面コピーでは子テーマ「twentyfifteen-child」を作成しています。これは親テーマが「Twenty Fifteen」テーマであることを意味します。
 
+
子テーマで必須なのは ''style.css'' ファイルだけです。'''このファイルで親テーマの style.css を上書き'''し、WordPress が子テーマを認識するためのヘッダー情報を含めます。
+
 
+
ヘッダー情報はファイルの先頭に必要で、通常のテーマとの違いは <code>Template:</code> 行が必須になります。これによりWordPressがどの親テーマを継承するのか知ることができます。
+
 
+
以下は子テーマ用ヘッダーの例と説明です:
+
 
+
<pre>
+
/*
+
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
+
*/
+
</pre>
+
 
+
*  <code>Theme Name</code>  (必須)  子テーマ'''名'''
+
*  <code>Theme URI</code>    (任意)  子テーマのウェブページ
+
*  <code>Description</code>  (任意)  テーマの説明。例: わたしの最初の子テーマ。ワーイ!
+
*  <code>Author URI</code>  (任意)  作者のウェブページ
+
*  <code>Author</code>      (任意)  作者の名前
+
*  <code>Template</code>    (必須)  親テーマの'''ディレクトリ'''名, 大文字小文字を区別します
+
*  <code>Version</code>      (任意)  子テーマのバージョン。例: 0.1, 1.0, etc
+
 
+
== 基本的な子テーマの例 ==
+
 
+
例としてTwenty Ten(WordPress 3.0 のデフォルトテーマ)を利用します。タイトルの色を黒から緑に変更する以外はすべてそのまま利用します。子テーマを利用すると、次の三つのステップでできます:
+
 
+
wp-content/themes に新しいディレクトリを作成します
+
#  次のコードを style.css ファイルに保存し、作成した新しいディレクトリに入れます
+
#  ダッシュボード › テーマ で新しいテーマを有効化します
+
 
+
<pre>
+
/*
+
Theme Name:    Kid
+
Author:        Demetris
+
Template:      twentyten
+
*/
+
 
+
@import url('../twentyten/style.css');
+
 
+
#site-title a {
+
    color: #009900;
+
}
+
</pre>
+
 
+
上記コードを詳細に説明すると:
+
 
+
#  <code>/*</code> 子テーマの情報ヘッダーの始まり
+
#  <code>Theme Name:</code> 子テーマ名を指定
+
#  <code>Author:</code> 作者名 (任意、省略可)
+
#  <code>Template:</code> 子テーマが継承する親テーマを指定。例えば子テーマが利用するテンプレートの入っているディレクトリ名
+
#  <code>*/</code> 子テーマ情報ヘッダーの終わり
+
#  <code>@import</code> ルールで親テーマのスタイルシートをインポート
+
#  <code>#site-title a</code> ルールで親テーマの対応するルールをオーバーライドしてサイト名の色(緑)を設定
+
 
+
=== <code>@import</code> ルールの注意 ===
+
 
+
このシナリオでは親テーマのスタイルをほんの少しだけ変更したいのであって、すべてを放棄するわけではありません。子テーマは親テーマの ''style.css'' をオーバーライドするので親テーマのスタイルシートに子テーマのスタイルシートを追加するため、<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]]):
+
次のステップは子テーマのスタイルシート (style.css) の作成です。スタイルシートは次の [[テーマの作成#テーマスタイルシート|スタイルシートヘッダ]] で始める必要があります。
  
 
<pre>
 
<pre>
131行目: 50行目:
 
</pre>
 
</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] :
+
* <tt>Template</tt>行は、親テーマのディレクトリ名を指します。この例では親テーマが Twenty Fifteen テーマですので、<tt>Template</tt> は <tt>twentyfifteen</tt> です。別のテーマが親テーマの場合、該当のディレクトリ名を指定してください。
 +
 
 +
* 必須の子テーマファイルは style.css のみですが、スタイルを正しくキューに入れるには functions.php が必要です (以下、参照)。
 +
 
 +
 
 +
最後のステップでは、親テーマと子テーマのスタイルシートをキューに入れます。以前は @import: を使用して親テーマのスタイルシートをインポートしていましたが、これはもはや良い方法ではありませんので注意してください。親テーマのスタイルシートをキューに入れる正しい方法は、子テーマの functions.php で <tt>[[関数リファレンス/wp_enqueue_script|wp_enqueue_script()]]</tt>を使用する方法です。したがって子テーマには functions.php を作成する必要があります。子テーマの functions.php の最初の行は、PHP の開始タグ (<tt><?php</tt>) で始め、続けて親テーマと子テーマのスタイルシートをキューに入れます。以下の例は、親テーマが 1つの style.css ファイルを使用してすべての CSS を保持している場合にのみ動作します。テーマが複数の .css ファイルを持つ場合(たとえば、ie.css、style.css、main.css) すべての親テーマの依存関係を管理する必要があります。依存関係に 'parent-style' を設定すると子テーマのスタイルシートは親テーマのあとで読み込まれます。[http://wordpress.stackexchange.com/questions/163301/versioning-import-of-parent-themes-style-css 詳細な議論はこちらを参照] :
  
 
<pre>
 
<pre>
149行目: 71行目:
 
</pre>
 
</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.)
+
依存関係として「parent-style」を設定し、その後に子テーマのスタイルシートをロードしましょう。[http://wordpress.stackexchange.com/questions/163301/versioning-import-of-parent-themes-style-css 詳細についてはこちら] :
  
'''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.
+
<!-- Your child theme's stylesheet will usually be loaded automatically. If it is not, you will need to enqueue it as well. Setting 'parent-style' as a dependency will ensure that the child theme stylesheet loads after it. -->
  
== テンプレートファイル ==
+
<pre>
 +
add_action( 'wp_enqueue_scripts', 'theme_enqueue_styles' );
 +
function theme_enqueue_styles() {
 +
    wp_enqueue_style( 'parent-style', get_template_directory_uri() . '/style.css' );
 +
    wp_enqueue_style( 'child-style',
 +
        get_stylesheet_directory_uri() . '/style.css',
 +
        array('parent-style')
 +
    );
 +
}
 +
</pre>
  
 +
これで子テーマを有効化する準備ができました。サイトの管理画面にログインし、[[管理画面]] > [[管理画面#外観|外観]] > [[管理画面#テーマの管理|テーマ]]に移動してください。子テーマが表示され、有効化できる状態になっています。
 +
(WordPress をマルチサイトとしてインストールしている場合、ネットワーク管理画面に切り換え、[[Network Admin Themes Screen]] タブでテーマを有効化する必要があります。次にサイトごとの WordPress 管理画面に戻り、子テーマを有効化します。)
  
子テーマの[[テンプレート]] は ''style.css'' と同じように親テーマの '''同名ファイルをオーバーライドします '''。単純に同名のファイル名を使用すれば親テーマのテンプレートをオーバーライドできます。(注意: index.phpをオーバーライドできるのはWordPress 3.0以上です)
 
  
繰り返しますが、この機能は親テーマのファイルをまったく修正せずにテーマの調整が可能なので、親テーマがアップデートされても変更した分は失われません。
+
'''注意:''' 子テーマを有効化したあとは、メニュー (外観 > メニュー または 外観 > カスタマイズ > メニュー) およびテーマのオプション (背景やヘッダイメージ) を保存し直す必要があります。
  
子テーマでテンプレートファイルを使用した例をいくつか紹介します:
+
== テンプレートファイル<!--Template Files--> ==
  
*  親テーマが持っていないテンプレートファイルの追加。例えば、固定ページ編集画面で選択できるサイトマップ、シングルコラムのページなど
+
スタイルシート以外を変更したい場合も、子テーマは親テーマのすべてのファイルを上書きできます。単純に同じ名前のファイルを子テーマディレクトリに置くことで、サイトがロードされると親テーマディレクトリ内の同名のファイルは上書きされます。たとえば、サイトヘッダーの PHP コードを変更するには、子テーマディレクトリに header.php を置けば、親テーマの header.php の代わりにそのファイルが使用されます。
*  親テーマが持っているテーマよりも使用用途を限ったテンプレートの追加。例えば、親ページの通常の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.
+
親テーマに存在しないファイルでも、子テーマに含められます。たとえば、特定のページ用のテンプレートやカテゴリーアーカイブ用のテンプレートなど、親テーマに存在するものよりも特殊なテンプレートの場合です。WordPress がどのように使用するテンプレートを決定するかについては [[テンプレート階層]] を参照してください。
  
 +
=== functions.phpの使用<!--Using functions.php--> ===
  
== functions.php の使用方法 ==
+
''style.css''と異なり、子テーマの ''functions.php'' は、親テーマの機能を上書きしません。代わりに '''親の functions.php に追加して読み込まれます'''。(正確には、親テーマのファイルの ''直前'' に読み込まれます。)
  
''style.css'' と違い、''functions.php'' は同名ファイルでオーバーライドできません。その代わり、'''親の functions.php に追加して読み込まれます'''。正確にいうと、親テーマの functions.php の直前に読み込まれます。したがって、もし親テーマの functions.php で favicon_link() という関数があるとき、子テーマのfunctions.php で同名の関数があれば、子テーマの関数が使用されます。<br>
 
  
再び、WordPressのこの処理方法のおかげで、親テーマの機能を変更するための賢くてトラブルの無い手段をこのファイルは提供します。親テーマのfunctions.phpを編集して次のアップデートでその変更分を失ってしまう代わりに、子テーマを作成し、そこにfunctions.phpを追加し、それを使って自分の変更を追加するようにします。
+
この動きにより、子テーマの ''functions.php'' は親テーマの機能を変更する、賢くトラブルの無い手段を提供します。たとえば、ここでテーマにPHP関数を追加したいとします。もっとも簡単な方法はテーマの ''functions.php'' を開き、そこに関数を追加する方法でしょうが、これは賢くありません。次回テーマがアップデートされると、追加した関数は失われるためです。代替の賢い方法として、子テーマを作成し、''functions.php'' ファイルを追加し、関数を追加します。関数はそこからでもまったく同様の働きをするだけでなく、親テーマの将来のアップデートに影響されない利点もあります。ただし親テーマの''functions.php''のすべての内容を子テーマの''functions.php''にコピーしないでください。
  
functions.phpの構造は単純です。最初にphpの開始タグがあり、最後にphpの閉じタグがあります。そしてその間にphpのコードが入ります。そこには必要な関数をいくつでも入れることができます。
 
 
次のサンプルは、HTMLページのhead要素に faviconを追加するためだけの簡単なfunctions.php ファイルです:
 
  
 +
''functions.php'' の構造は単純です。最初に PHP の開始タグがあり、その下に PHP のコードが来ます。中には必要な関数をいくつでも含められます。以下は、1つの単純な機能を含む簡単な ''functions.php'' ファイルの例です。HTMLページの <code>head</code>要素にfavicon リンクを追加します。
  
 
<pre>
 
<pre>
&lt;?php
+
<?php // PHP 開始タグ - この前には、空白も含め何も書かないでください。
  
 +
// 挿入するカスタム関数
 
function favicon_link() {
 
function favicon_link() {
 
     echo '<link rel="shortcut icon" type="image/x-icon" href="/favicon.ico" />' . "\n";
 
     echo '<link rel="shortcut icon" type="image/x-icon" href="/favicon.ico" />' . "\n";
 
}
 
}
add_action('wp_head', 'favicon_link');
+
add_action( 'wp_head', 'favicon_link' );
 
+
?&gt;
+
 
</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.
 
 
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.:
+
テーマ開発者へのヒント。子テーマの ''functions.php'' が最初に読み込まれるということは、テーマのユーザー関数を脱着可能にできることを意味します。つまり、条件付きで定義することにより、子テーマから置換可能にできます。以下に例を示します。
  
 
<pre>
 
<pre>
 
if ( ! function_exists( 'theme_special_nav' ) ) {
 
if ( ! function_exists( 'theme_special_nav' ) ) {
 
     function theme_special_nav() {
 
     function theme_special_nav() {
         //  Do something.
+
         //  何かする。
 
     }
 
     }
 
}
 
}
 
</pre>
 
</pre>
  
In that way, a child theme can replace a PHP function of the parent by simply declaring it beforehand.
+
この方法により、子テーマは単純に事前に定義することで親の PHP 関数を置換できます。
  
  
 +
=== 子テーマへの参照 / インクルード <!--Referencing / Including Files in Your Child Theme--> ===
  
 +
子テーマのディレクトリ構造内に存在するファイルをインクルードする場合、[[関数リファレンス/get_stylesheet_directory|get_stylesheet_directory()]] を使用します。親テーマの style.css は子テーマの style.css で置換され、style.css は子テーマサブディレクトリのルートディレクトリに存在するため、get_stylesheet_directory()は、親テーマのディレクトリでなく、子テーマのディレクトリを指します。
  
== 子テーマの他のファイル ==
 
  
''style.css''、''functions.php''、 そしてテンプレートファイルはWordPressが自動的に認識できるファイル形式です。これらに加え、通常のテーマで使用されるすべての形式のファイルを子テーマでも持つことができます。例えば、スタイルシートからリンクされるアイコンや画像、ページの一番上や一番下からリンクされるJavaScript ファイル、functions.phpや他のテンプレートファイルから呼び出されるphpファイルなどです。
+
<code>require_once</code>を使用した以下の例では、子テーマのディレクトリ構造内に保存されたファイルを参照する get_stylesheet_directory の使用方法を示します。
  
 +
<pre>
 +
require_once( get_stylesheet_directory() . '/my_included_file.php' );
 +
</pre>
  
=== 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).
+
== 他の有用な情報<!--Other Useful Information--> ==
  
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>
+
=== 投稿フォーマットの使用<!--Using Post Formats--> ===
require_once( get_stylesheet_directory() . '/my_included_file.php' );
+
</pre>
+
  
== Other Useful Information ==
+
子テーマは、親テーマで定義された [[Post Formats|投稿フォーマット]]を継承します。
 +
子テーマを作成する際には、''add_theme_support('post-formats')'' が、親テーマで定義されたフォーマットへの '''追加ではなく、上書き''' になることに注意してください。
  
=== Using Post Formats ===
 
  
A child theme inherits [[Post Formats|post formats]] as defined by the parent theme.
+
=== RTLサポート<!--RTL support--> ===
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 ===
+
RTL言語(右から左へ書く言語)をサポートするには、子テーマに以下を含む '''rtl.css''' を追加してください。
 
+
To support RTL languages, add '''rtl.css''' file to your child theme, containing:
+
  
 
<pre>
 
<pre>
260行目: 167行目:
 
</pre>
 
</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.
+
'''rtl.css''' は、[[関数リファレンス/is rtl|is_rtl()]] が true を返す場合のみ、読み込まれます。
 +
 
 +
 
 +
親テーマに rtl.css ファイルが含まれていない場合でも、子テーマに rtl.css を追加することが推奨されます。
 +
 
  
=== Internationalization ===
+
=== 国際化<!--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]].
+
子テーマも、他の大部分の拡張と同様に、gettext関数を使用して他の言語に翻訳できます。国際化の概要については、[[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 ====
+
* 言語ディレクトリを追加する。
 +
** <code>my-theme/languages/</code>など。
 +
 
 +
* 言語ファイルを追加する。
 +
** ファイル名は <code>ja.po</code> および <code>ja.mo</code> (言語により変わります)。これはプラグインファイルの <code>domain-ja.xx</code> とは異なります。
 +
 
 +
* テキストドメインをロードする。
 +
** functions.php の after_setup_themeアクション内で、load_child_theme_textdomain() を使用します。
 +
** 子テーマのすべての文字列の翻訳に、load_child_theme_textdomain() 内で定義されたテキストドメインが使用されます。
 +
 
 +
* GetText 関数を使用して、文字列に国際化サポートを追加する。
 +
 
 +
 
 +
==== 例: テキストドメイン <!--Example: textdomain--> ====
  
 
<pre>
 
<pre>
 
<?php
 
<?php
 
/**
 
/**
  * Setup My Child Theme's textdomain.
+
  * 子テーマのテキストドメインのセットアップ
 
  *
 
  *
  * Declare textdomain for this child theme.
+
  * 子テーマのテキストドメインの宣言
  * Translations can be filed in the /languages/ directory.
+
  * 翻訳は /languages/ ディレクトリに置く
 
  */
 
  */
 
function my_child_theme_setup() {
 
function my_child_theme_setup() {
296行目: 211行目:
 
</pre>
 
</pre>
  
==== Example: gettext functions ====
+
==== 例: gettext 関数<!--Example: gettext functions--> ====
  
 
<pre>
 
<pre>
304行目: 219行目:
 
</pre>
 
</pre>
  
 +
「my-child-theme」テキストドメインを使用するすべての文字列が翻訳の対象となります。翻訳ファイルは "/languages/" ディレクトリに置く必要があります。
  
To sum up, all strings that use "my-child-theme" textdomain will be translatable. The translation files must reside in "/languages/" directory.
 
  
 +
== リソース<!--Resources--> ==
  
 +
以下のリソースの中には、子テーマのスタイルシートから親テーマのスタイルシートをインポートする方法として <tt>@import</tt> の使用を推奨しているものがあります。上で述べたように<tt>[[関数リファレンス/wp_enqueue_script|wp_enqueue_script()]]</tt>を使用してください。
  
== 資料とリファレンス ==
+
* [[テーマの作成]]
 
+
*   [[テーマの作成]]
+
*  [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.
+
 
+
 
+
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://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://wpsites.net/wordpress-themes/how-to-make-your-own-child-theme-for-wordpress-beginners-guide/ How To Make Your Own Child Theme - Includes Screencast]
328行目: 236行目:
 
* [https://wordpress.org/plugins/search.php?q=child+theme Child Theme Plugins]
 
* [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]
 
* [http://techblog.kjodle.net/2014/04/12/wordpress-child-themes-the-whys-and-hows/ WordPress Child Theme The Why and How]
 
  
  

2021年8月3日 (火) 13:33時点における最新版

このページは最新情報に追随して更新されていません。 最新の子テーマ開発手法についてはテーマハンドブック (英語版) をご確認ください。翻訳にご協力くださる方はぜひご相談ください


子テーマは、親テーマと呼ばれる別のテーマの機能とスタイルを継承したテーマです。既存のテーマを変更する方法として、子テーマが推奨されています。


なぜ子テーマを使うのか?

子テーマの使用にはいくつかの利点があります。


  • テーマを直接変更した場合、そのテーマがアップデートされると変更が失われるかもしれません。子テーマを使用すればテーマの変更は確実に保持されます。
  • 子テーマを使用することで開発時間を短縮できます。
  • 子テーマの使用することでWordPressのテーマの開発を良い形で学べます。


子テーマの作り方

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

子テーマは、少なくとも 1つのディレクトリ(子テーマディレクトリ)と、2つのファイル(style.css と functions.php) から構成されます。以下を作成する必要があります。


  • 子テーマディレクトリ
  • style.css
  • functions.php


子テーマを作成する最初のステップは、子テーマディレクトリの作成です。wp-content/themes ディレクトリ下に作成します。子テーマディレクトリの名前には最後に '-child' を付けることが推奨されます(ただし必須ではありません。特に一般に公開する予定のテーマを作成する場合はこの限りではありません)。また、子テーマディレクトリの名前には空白を含めないでください。エラーが発生します。上の画面コピーでは子テーマ「twentyfifteen-child」を作成しています。これは親テーマが「Twenty Fifteen」テーマであることを意味します。


次のステップは子テーマのスタイルシート (style.css) の作成です。スタイルシートは次の スタイルシートヘッダ で始める必要があります。

/*
 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
*/


いくつかの注意点があります。


  • コード例の中の文字列は、テンプレートに関する詳細な情報で置き換えてください。
  • Template行は、親テーマのディレクトリ名を指します。この例では親テーマが Twenty Fifteen テーマですので、Templatetwentyfifteen です。別のテーマが親テーマの場合、該当のディレクトリ名を指定してください。
  • 必須の子テーマファイルは style.css のみですが、スタイルを正しくキューに入れるには functions.php が必要です (以下、参照)。


最後のステップでは、親テーマと子テーマのスタイルシートをキューに入れます。以前は @import: を使用して親テーマのスタイルシートをインポートしていましたが、これはもはや良い方法ではありませんので注意してください。親テーマのスタイルシートをキューに入れる正しい方法は、子テーマの functions.php で wp_enqueue_script()を使用する方法です。したがって子テーマには functions.php を作成する必要があります。子テーマの functions.php の最初の行は、PHP の開始タグ (<?php) で始め、続けて親テーマと子テーマのスタイルシートをキューに入れます。以下の例は、親テーマが 1つの style.css ファイルを使用してすべての CSS を保持している場合にのみ動作します。テーマが複数の .css ファイルを持つ場合(たとえば、ie.css、style.css、main.css) すべての親テーマの依存関係を管理する必要があります。依存関係に 'parent-style' を設定すると子テーマのスタイルシートは親テーマのあとで読み込まれます。詳細な議論はこちらを参照 :

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

}

子テーマのスタイルシートは、通常は自動的に読み込まれます。そうでない場合は、同様にエンキューする必要があります。 依存関係として「parent-style」を設定し、その後に子テーマのスタイルシートをロードしましょう。詳細についてはこちら :


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

これで子テーマを有効化する準備ができました。サイトの管理画面にログインし、管理画面 > 外観 > テーマに移動してください。子テーマが表示され、有効化できる状態になっています。 (WordPress をマルチサイトとしてインストールしている場合、ネットワーク管理画面に切り換え、Network Admin Themes Screen タブでテーマを有効化する必要があります。次にサイトごとの WordPress 管理画面に戻り、子テーマを有効化します。)


注意: 子テーマを有効化したあとは、メニュー (外観 > メニュー または 外観 > カスタマイズ > メニュー) およびテーマのオプション (背景やヘッダイメージ) を保存し直す必要があります。

テンプレートファイル

スタイルシート以外を変更したい場合も、子テーマは親テーマのすべてのファイルを上書きできます。単純に同じ名前のファイルを子テーマディレクトリに置くことで、サイトがロードされると親テーマディレクトリ内の同名のファイルは上書きされます。たとえば、サイトヘッダーの PHP コードを変更するには、子テーマディレクトリに header.php を置けば、親テーマの header.php の代わりにそのファイルが使用されます。


親テーマに存在しないファイルでも、子テーマに含められます。たとえば、特定のページ用のテンプレートやカテゴリーアーカイブ用のテンプレートなど、親テーマに存在するものよりも特殊なテンプレートの場合です。WordPress がどのように使用するテンプレートを決定するかについては テンプレート階層 を参照してください。

functions.phpの使用

style.cssと異なり、子テーマの functions.php は、親テーマの機能を上書きしません。代わりに 親の functions.php に追加して読み込まれます。(正確には、親テーマのファイルの 直前 に読み込まれます。)


この動きにより、子テーマの functions.php は親テーマの機能を変更する、賢くトラブルの無い手段を提供します。たとえば、ここでテーマにPHP関数を追加したいとします。もっとも簡単な方法はテーマの functions.php を開き、そこに関数を追加する方法でしょうが、これは賢くありません。次回テーマがアップデートされると、追加した関数は失われるためです。代替の賢い方法として、子テーマを作成し、functions.php ファイルを追加し、関数を追加します。関数はそこからでもまったく同様の働きをするだけでなく、親テーマの将来のアップデートに影響されない利点もあります。ただし親テーマのfunctions.phpのすべての内容を子テーマのfunctions.phpにコピーしないでください。


functions.php の構造は単純です。最初に PHP の開始タグがあり、その下に PHP のコードが来ます。中には必要な関数をいくつでも含められます。以下は、1つの単純な機能を含む簡単な functions.php ファイルの例です。HTMLページの head要素にfavicon リンクを追加します。

<?php // PHP 開始タグ - この前には、空白も含め何も書かないでください。

// 挿入するカスタム関数
function favicon_link() {
    echo '<link rel="shortcut icon" type="image/x-icon" href="/favicon.ico" />' . "\n";
}
add_action( 'wp_head', 'favicon_link' );


テーマ開発者へのヒント。子テーマの functions.php が最初に読み込まれるということは、テーマのユーザー関数を脱着可能にできることを意味します。つまり、条件付きで定義することにより、子テーマから置換可能にできます。以下に例を示します。

if ( ! function_exists( 'theme_special_nav' ) ) {
    function theme_special_nav() {
        //  何かする。
    }
}

この方法により、子テーマは単純に事前に定義することで親の PHP 関数を置換できます。


子テーマへの参照 / インクルード

子テーマのディレクトリ構造内に存在するファイルをインクルードする場合、get_stylesheet_directory() を使用します。親テーマの style.css は子テーマの style.css で置換され、style.css は子テーマサブディレクトリのルートディレクトリに存在するため、get_stylesheet_directory()は、親テーマのディレクトリでなく、子テーマのディレクトリを指します。


require_onceを使用した以下の例では、子テーマのディレクトリ構造内に保存されたファイルを参照する get_stylesheet_directory の使用方法を示します。

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


他の有用な情報

投稿フォーマットの使用

子テーマは、親テーマで定義された 投稿フォーマットを継承します。 子テーマを作成する際には、add_theme_support('post-formats') が、親テーマで定義されたフォーマットへの 追加ではなく、上書き になることに注意してください。


RTLサポート

RTL言語(右から左へ書く言語)をサポートするには、子テーマに以下を含む rtl.css を追加してください。

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


rtl.css は、is_rtl() が true を返す場合のみ、読み込まれます。


親テーマに rtl.css ファイルが含まれていない場合でも、子テーマに rtl.css を追加することが推奨されます。


国際化

子テーマも、他の大部分の拡張と同様に、gettext関数を使用して他の言語に翻訳できます。国際化の概要については、WordPress_の翻訳 および I18n for WordPress Developers を参照してください。


子テーマを国際化するには、以下の手順にしたがってください:

  • 言語ディレクトリを追加する。
    • my-theme/languages/など。
  • 言語ファイルを追加する。
    • ファイル名は ja.po および ja.mo (言語により変わります)。これはプラグインファイルの domain-ja.xx とは異なります。
  • テキストドメインをロードする。
    • functions.php の after_setup_themeアクション内で、load_child_theme_textdomain() を使用します。
    • 子テーマのすべての文字列の翻訳に、load_child_theme_textdomain() 内で定義されたテキストドメインが使用されます。
  • GetText 関数を使用して、文字列に国際化サポートを追加する。


例: テキストドメイン

<?php
/**
 * 子テーマのテキストドメインのセットアップ
 *
 * 子テーマのテキストドメインの宣言
 * 翻訳は /languages/ ディレクトリに置く
 */
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' );
?>

例: gettext 関数

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

「my-child-theme」テキストドメインを使用するすべての文字列が翻訳の対象となります。翻訳ファイルは "/languages/" ディレクトリに置く必要があります。


リソース

以下のリソースの中には、子テーマのスタイルシートから親テーマのスタイルシートをインポートする方法として @import の使用を推奨しているものがあります。上で述べたようにwp_enqueue_script()を使用してください。


変更履歴

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