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

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

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

提供: WordPress Codex 日本語版
移動先: 案内検索
(要翻訳、変更履歴セクション追加(テンプレートのオーバーライド))
(最新情報へのリンクを追加。)
 
(7人の利用者による、間の12版が非表示)
1行目: 1行目:
{{Draft}}
+
<div class="important">
{{NeedTrans}}
+
'''このページは最新情報に追随して更新されていません'''。
 +
最新の子テーマ開発手法については[https://developer.wordpress.org/themes/advanced-topics/child-themes/ テーマハンドブック] (英語版) をご確認ください。
 +
</div>
  
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'''.
+
== なぜ子テーマを使うのか?<!--Why use a Child Theme?--> ==
  
== 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)
+
* 子テーマの使用することでWordPressのテーマの開発を良い形で学べます。
****            '''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:
 
  
#  style.css (required)
+
== 子テーマの作り方<!--How to Create a Child Theme--> ==
#  functions.php (optional)
+
[[Image:child-theme-items.jpeg|right|子テーマのディレクトリ構造]]
#  Template files (optional)
+
#  Other files (optional)
+
  
'''TRANSITION'''
+
子テーマは、少なくとも 1つのディレクトリ(子テーマディレクトリ)と、2つのファイル(style.css と functions.php) から構成されます。以下を作成する必要があります。
  
== 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.
+
* 子テーマディレクトリ
 +
* style.css
 +
* functions.php
  
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 <code>Template:</code> 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:
+
子テーマを作成する最初のステップは、子テーマディレクトリの作成です。<tt>wp-content/themes</tt> ディレクトリ下に作成します。子テーマディレクトリの名前には最後に '-child' を付けることが推奨されます(ただし必須ではありません。特に一般に公開する予定のテーマを作成する場合はこの限りではありません)。また、子テーマディレクトリの名前には空白を含めないでください。エラーが発生します。上の画面コピーでは子テーマ「twentyfifteen-child」を作成しています。これは親テーマが「Twenty Fifteen」テーマであることを意味します。
 +
 
 +
 
 +
次のステップは子テーマのスタイルシート (style.css) の作成です。スタイルシートは次の [[テーマの作成#テーマスタイルシート|スタイルシートヘッダ]] で始める必要があります。
  
 
<pre>
 
<pre>
 
/*
 
/*
Theme Name:     Kid
+
Theme Name:   Twenty Fifteen Child
Theme URI:     http: //example.com/
+
Theme URI:   http://example.com/twenty-fifteen-child/
Description:   Child theme for the Twenty Ten theme for WordPress
+
Description: Twenty Fifteen Child Theme
Author:         Demetris
+
Author:       John Doe
Author URI:     http: //example.com/about/
+
Author URI:   http://example.com
Template:       twentyten
+
Template:     twentyfifteen
Version:       0.1.0
+
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>
 
</pre>
  
*  <code>Theme Name</code>.  (required)  Child theme '''name'''.
 
*  <code>Theme URI</code>.    (optional)  Child theme webpage.
 
*  <code>Description</code>.  (optional)  What this theme is.  E.g.:  My first child theme.  Hurrah!
 
*  <code>Author URI</code>.  (optional)  Author webpage.
 
*  <code>Author</code>.      (optional)  Author name.
 
*  <code>Template</code>.    (required)  '''directory''' name of parent theme, case-sensitively.
 
*  <code>Version</code>.      (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:
+
* コード例の中の文字列は、テンプレートに関する詳細な情報で置き換えてください。
  
#  We make a new directory in ''wp-content/themes''.
+
* <tt>Template</tt>行は、親テーマのディレクトリ名を指します。この例では親テーマが Twenty Fifteen テーマですので、<tt>Template</tt> は <tt>twentyfifteen</tt> です。別のテーマが親テーマの場合、該当のディレクトリ名を指定してください。
#  We save the code below in a file named ''style.css'', and we drop this file in our new directory.
+
 
#  We go to Dashboard › Themes to activate our new theme.  
+
* 必須の子テーマファイルは 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>
/*
+
add_action( 'wp_enqueue_scripts', 'theme_enqueue_styles' );
Theme Name:     Kid
+
function theme_enqueue_styles() {
Author:        Demetris
+
     wp_enqueue_style( 'parent-style', get_template_directory_uri() . '/style.css' );
Template:      twentyten
+
*/
+
  
@import url('../twentyten/style.css');
+
}
 +
</pre>
  
#site-title a {
+
子テーマのスタイルシートは、通常は自動的に読み込まれます。そうでない場合は、同様にエンキューする必要があります。
     color: #009900;
+
依存関係として「parent-style」を設定し、その後に子テーマのスタイルシートをロードしましょう。[http://wordpress.stackexchange.com/questions/163301/versioning-import-of-parent-themes-style-css 詳細についてはこちら] :
 +
 
 +
<!-- 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>
 
</pre>
  
Here is what the above code does, step by step:
+
これで子テーマを有効化する準備ができました。サイトの管理画面にログインし、[[管理画面]] > [[管理画面#外観|外観]] > [[管理画面#テーマの管理|テーマ]]に移動してください。子テーマが表示され、有効化できる状態になっています。
 +
(WordPress をマルチサイトとしてインストールしている場合、ネットワーク管理画面に切り換え、[[Network Admin Themes Screen]] タブでテーマを有効化する必要があります。次にサイトごとの WordPress 管理画面に戻り、子テーマを有効化します。)
  
#  <code>/*</code> opens the child theme’s information header.
 
#  <code>Theme Name:</code> specifies the child theme’s name.
 
#  <code>Author:</code> gives the author’s name.  (This is optional and can be left out.)
 
#  <code>Template:</code> declares the child theme’s parent;  i.e., the directory of the theme whose templates the child uses.
 
#  <code>*/</code> closes the child’s information header.
 
#  The <code>@import</code> rule brings in the parent’s stylesheet.
 
#  The <code>#site-title a</code> rule defines a colour (green) for the site’s name, overriding the corresponding rule of the parent.
 
  
=== Note on the <code>@import</code> 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 <code>@import</code> 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.
+
== テンプレートファイル<!--Template Files--> ==
  
== functions.php in a Child Theme ==
+
スタイルシート以外を変更したい場合も、子テーマは親テーマのすべてのファイルを上書きできます。単純に同じ名前のファイルを子テーマディレクトリに置くことで、サイトがロードされると親テーマディレクトリ内の同名のファイルは上書きされます。たとえば、サイトヘッダーの PHP コードを変更するには、子テーマディレクトリに header.php を置けば、親テーマの header.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).
 
  
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 がどのように使用するテンプレートを決定するかについては [[テンプレート階層]] を参照してください。
  
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.
+
=== functions.phpの使用<!--Using 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ページの <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' );
 +
</pre>
  
?&gt;
+
 
 +
テーマ開発者へのヒント。子テーマの ''functions.php'' が最初に読み込まれるということは、テーマのユーザー関数を脱着可能にできることを意味します。つまり、条件付きで定義することにより、子テーマから置換可能にできます。以下に例を示します。
 +
 
 +
<pre>
 +
if ( ! function_exists( 'theme_special_nav' ) ) {
 +
    function theme_special_nav() {
 +
        //  何かする。
 +
    }
 +
}
 
</pre>
 
</pre>
  
== Template files in a Child Theme ==
+
この方法により、子テーマは単純に事前に定義することで親の PHP 関数を置換できます。
  
[[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.
+
=== 子テーマへの参照 / インクルード <!--Referencing / Including Files in Your Child Theme--> ===
 +
 
 +
子テーマのディレクトリ構造内に存在するファイルをインクルードする場合、[[関数リファレンス/get_stylesheet_directory|get_stylesheet_directory()]] を使用します。親テーマの style.css は子テーマの style.css で置換され、style.css は子テーマサブディレクトリのルートディレクトリに存在するため、get_stylesheet_directory()は、親テーマのディレクトリでなく、子テーマのディレクトリを指します。
 +
 
 +
 
 +
<code>require_once</code>を使用した以下の例では、子テーマのディレクトリ構造内に保存されたファイルを参照する get_stylesheet_directory の使用方法を示します。
 +
 
 +
<pre>
 +
require_once( get_stylesheet_directory() . '/my_included_file.php' );
 +
</pre>
 +
 
 +
 
 +
== 他の有用な情報<!--Other Useful Information--> ==
 +
 
 +
 
 +
=== 投稿フォーマットの使用<!--Using Post Formats--> ===
 +
 
 +
子テーマは、親テーマで定義された [[Post Formats|投稿フォーマット]]を継承します。
 +
子テーマを作成する際には、''add_theme_support('post-formats')'' が、親テーマで定義されたフォーマットへの '''追加ではなく、上書き''' になることに注意してください。
 +
 
 +
 
 +
=== RTLサポート<!--RTL support--> ===
 +
 
 +
RTL言語(右から左へ書く言語)をサポートするには、子テーマに以下を含む '''rtl.css''' を追加してください。
 +
 
 +
<pre>
 +
/*
 +
Theme Name: Twenty Fourteen Child
 +
Template: twentyfourteen
 +
*/
 +
 
 +
</pre>
 +
 
 +
 
 +
'''rtl.css''' は、[[関数リファレンス/is rtl|is_rtl()]] が true を返す場合のみ、読み込まれます。
 +
 
 +
 
 +
親テーマに rtl.css ファイルが含まれていない場合でも、子テーマに rtl.css を追加することが推奨されます。
 +
 
 +
 
 +
=== 国際化<!--Internationalization--> ===
 +
 
 +
子テーマも、他の大部分の拡張と同様に、gettext関数を使用して他の言語に翻訳できます。国際化の概要については、[[WordPress_の翻訳]] および [[I18n for WordPress Developers]] を参照してください。
 +
 
 +
 
 +
子テーマを国際化するには、以下の手順にしたがってください:
 +
 
 +
* 言語ディレクトリを追加する。
 +
** <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>
 +
<?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' );
 +
?>
 +
</pre>
 +
 
 +
==== 例: gettext 関数<!--Example: gettext functions--> ====
 +
 
 +
<pre>
 +
<?php
 +
_e( 'Code is Poetry', 'my-child-theme' );
 +
?>
 +
</pre>
  
Here are a few example cases for using template files in a child theme:
+
「my-child-theme」テキストドメインを使用するすべての文字列が翻訳の対象となります。翻訳ファイルは "/languages/" ディレクトリに置く必要があります。
  
*  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 ==
+
== リソース<!--Resources--> ==
  
''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''.
+
以下のリソースの中には、子テーマのスタイルシートから親テーマのスタイルシートをインポートする方法として <tt>@import</tt> の使用を推奨しているものがあります。上で述べたように<tt>[[関数リファレンス/wp_enqueue_script|wp_enqueue_script()]]</tt>を使用してください。
  
== References and Resources ==
+
* [[テーマの作成]]
 +
* [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]
  
*  [[Theme Development]]
 
*  [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.
 
  
 
== 変更履歴 ==
 
== 変更履歴 ==
140行目: 242行目:
 
* [[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 版 -->
  
[[Category:New page created]]
+
{{DEFAULTSORT:こてえま}}
[[Category:Design and Layout]]
+
[[Category:デザインとレイアウト]]
 
[[Category:UI Link]]<!-- link from wp-admin/update-core.php -->
 
[[Category:UI Link]]<!-- link from wp-admin/update-core.php -->
 
[[Category:wp3.0]]<!-- 仕様変更 -->
 
[[Category:wp3.0]]<!-- 仕様変更 -->
  
 
[[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:Дете теми]]

2020年9月26日 (土) 23:54時点における最新版

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


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


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

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


  • テーマを直接変更した場合、そのテーマがアップデートされると変更が失われるかもしれません。子テーマを使用すればテーマの変更は確実に保持されます。
  • 子テーマを使用することで開発時間を短縮できます。
  • 子テーマの使用することで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最新版との差分