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

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

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

提供: WordPress Codex 日本語版
移動先: 案内検索
(要更新。ソートキー挿入。)
(最新情報へのリンクを追加。)
 
(5人の利用者による、間の6版が非表示)
1行目: 1行目:
{{Old|原文が頻繁に更新されており、}}
+
<div class="important">
 +
'''このページは最新情報に追随して更新されていません'''。
 +
最新の子テーマ開発手法については[https://developer.wordpress.org/themes/advanced-topics/child-themes/ テーマハンドブック] (英語版) をご確認ください。
 +
</div>
  
WordPressの子テーマとは、別のテーマ(親テーマ)の機能を継承し、その機能にさらに機能を追加したりその機能を調整したりすることのできるテーマです。
 
  
もっとも単純な形式では ''style.css'' ファイルを一つだけ備えたディレクトリとなり、制作がとても簡単です。HTML と CSS に精通していればプログラミングの知識は必要ありません。また、基本的には親テーマ自身にはまったく手を加えないで親テーマのスタイルやレイアウトを''好きなだけ変更することができます''。そのため、親テーマがアップデートされても子テーマの変更は保持されます。
+
子テーマは、親テーマと呼ばれる別のテーマの機能とスタイルを継承したテーマです。既存のテーマを変更する方法として、子テーマが推奨されています。
  
さらに、PHP や WordPress Plugin API を基本的に理解していれば、自分の子テーマの中で PHP を使い、親テーマにまったくさわることなくどのような改変でも可能になります。
 
  
このような理由で、'''使用しているテーマをカスタマイズする方法として子テーマをおすすめします'''。
+
== なぜ子テーマを使うのか?<!--Why use a Child Theme?--> ==
  
== 子テーマのディレクトリ構造 ==
+
子テーマの使用にはいくつかの利点があります。
  
子テーマは ''wp-content/themes'' 内に自身のディレクトリを持ちます。次に典型的な WordPress ディレクトリ構造での子テーマの場所を示します:
 
  
*   '''public_html'''
+
* テーマを直接変更した場合、そのテーマがアップデートされると変更が失われるかもしれません。子テーマを使用すればテーマの変更は確実に保持されます。
**      '''wp-content'''
+
* 子テーマを使用することで開発時間を短縮できます。
***        '''themes''' (すべてのテーマが入るディレクトリ)
+
* 子テーマの使用することでWordPressのテーマの開発を良い形で学べます。
****            '''kid''' (子テーマ自身のディレクトリ; 名称は自由)
+
*****              '''style.css''' (子テーマに必須; 名称は ''style.css'')
+
  
最小構成は ''style.css'' ファイルのみでも可能です。最大では通常のテーマと同じファイルを持つこともできます:
 
  
#  style.css (必須)
+
== 子テーマの作り方<!--How to Create a Child Theme--> ==
#  functions.php (任意)
+
[[Image:child-theme-items.jpeg|right|子テーマのディレクトリ構造]]
#  テンプレートファイル (任意、複数フィアル可)
+
#  他のファイル (任意)
+
  
== 子テーマの style.css ==
+
子テーマは、少なくとも 1つのディレクトリ(子テーマディレクトリ)と、2つのファイル(style.css と functions.php) から構成されます。以下を作成する必要があります。
  
子テーマで必須なのは ''style.css'' ファイルだけです。'''このファイルで親テーマの style.css をオーバーライド'''し、WordPress が子テーマを認識するためのヘッダー情報を含めます。
 
  
ヘッダー情報はファイルの先頭に必要で、通常のテーマとの違いは <code>Template:</code> 行が必須になります。これによりWordPressがどの親テーマを継承するのか知ることができます。
+
* 子テーマディレクトリ
 +
* style.css
 +
* functions.php
  
以下は子テーマ用ヘッダーの例と説明です:
+
 
 +
子テーマを作成する最初のステップは、子テーマディレクトリの作成です。<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>  (必須)  子テーマ'''名'''
 
*  <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 ファイルに保存し、作成した新しいディレクトリに入れます
+
 
#  ダッシュボード › テーマ で新しいテーマを有効化します
+
* <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>
/*
+
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>
  
上記コードを詳細に説明すると:
+
これで子テーマを有効化する準備ができました。サイトの管理画面にログインし、[[管理画面]] > [[管理画面#外観|外観]] > [[管理画面#テーマの管理|テーマ]]に移動してください。子テーマが表示され、有効化できる状態になっています。
 +
(WordPress をマルチサイトとしてインストールしている場合、ネットワーク管理画面に切り換え、[[Network Admin Themes Screen]] タブでテーマを有効化する必要があります。次にサイトごとの WordPress 管理画面に戻り、子テーマを有効化します。)
  
#  <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> ルールを明示します。このルールがないと子テーマは指定したサイトタイトルの色以外のスタイルがまったく適用されません。
+
== テンプレートファイル<!--Template Files--> ==
  
== functions.php の使用方法 ==
+
スタイルシート以外を変更したい場合も、子テーマは親テーマのすべてのファイルを上書きできます。単純に同じ名前のファイルを子テーマディレクトリに置くことで、サイトがロードされると親テーマディレクトリ内の同名のファイルは上書きされます。たとえば、サイトヘッダーの PHP コードを変更するには、子テーマディレクトリに header.php を置けば、親テーマの header.php の代わりにそのファイルが使用されます。
  
''style.css'' と違い、''functions.php'' は同名ファイルでオーバーライドできません。その代わり、'''親の functions.php に追加して読み込まれます'''。正確にいうと、親テーマの functions.php の直前に読み込まれます。したがって、もし親テーマの functions.php で favicon_link() という関数があるとき、子テーマのfunctions.php で同名の関数があれば、子テーマの関数が使用されます。<br>
 
  
再び、WordPressのこの処理方法のおかげで、親テーマの機能を変更するための賢くてトラブルの無い手段をこのファイルは提供します。親テーマのfunctions.phpを編集して次のアップデートでその変更分を失ってしまう代わりに、子テーマを作成し、そこにfunctions.phpを追加し、それを使って自分の変更を追加するようにします。
+
親テーマに存在しないファイルでも、子テーマに含められます。たとえば、特定のページ用のテンプレートやカテゴリーアーカイブ用のテンプレートなど、親テーマに存在するものよりも特殊なテンプレートの場合です。WordPress がどのように使用するテンプレートを決定するかについては [[テンプレート階層]] を参照してください。
  
functions.phpの構造は単純です。最初にphpの開始タグがあり、最後にphpの閉じタグがあります。そしてその間にphpのコードが入ります。そこには必要な関数をいくつでも入れることができます。
+
=== functions.phpの使用<!--Using functions.php--> ===
  
次のサンプルは、HTMLページのhead要素に faviconを追加するためだけの簡単な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>
  
== テンプレートファイル ==
+
この方法により、子テーマは単純に事前に定義することで親の PHP 関数を置換できます。
  
  
子テーマの[[テンプレート]] は ''style.css'' と同じように親テーマの '''同名ファイルをオーバーライドします '''。単純に同名のファイル名を使用すれば親テーマのテンプレートをオーバーライドできます。(注意: index.phpをオーバーライドできるのはWordPress 3.0以上です)
+
=== 子テーマへの参照 / インクルード <!--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 の使用方法を示します。
*   親テーマが持っているテーマよりも使用用途を限ったテンプレートの追加。例えば、親ページの通常のarchive.phpの代わりにタグアーカイブで使用するためのtag.php
+
 
*   親テーマテンプレートの入れ替え。例えば、親テーマのhome.phpをオーバーライドする子テーマのhome.php
+
<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>
 +
 
 +
「my-child-theme」テキストドメインを使用するすべての文字列が翻訳の対象となります。翻訳ファイルは "/languages/" ディレクトリに置く必要があります。
  
  
== 子テーマの他のファイル ==
+
== リソース<!--Resources--> ==
  
''style.css''、''functions.php''、 そしてテンプレートファイルはWordPressが自動的に認識できるファイル形式です。これらに加え、通常のテーマで使用されるすべての形式のファイルを子テーマでも持つことができます。例えば、スタイルシートからリンクされるアイコンや画像、ページの一番上や一番下からリンクされるJavaScript ファイル、functions.phpや他のテンプレートファイルから呼び出されるphpファイルなどです。
+
以下のリソースの中には、子テーマのスタイルシートから親テーマのスタイルシートをインポートする方法として <tt>@import</tt> の使用を推奨しているものがあります。上で述べたように<tt>[[関数リファレンス/wp_enqueue_script|wp_enqueue_script()]]</tt>を使用してください。
  
== 資料とリファレンス ==
+
* [[テーマの作成]]
 +
* [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]
  
*  [[テーマの作成]]
 
*  [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 版 -->
  
 
{{DEFAULTSORT:こてえま}}
 
{{DEFAULTSORT:こてえま}}
148行目: 250行目:
  
 
[[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最新版との差分