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

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 テーマですので、Template は twentyfifteen です。別のテーマが親テーマの場合、該当のディレクトリ名を指定してください。

• 必須の子テーマファイルは 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()を使用してください。

• テーマの作成
• How to Modify WordPress Themes the Smart Way (four part series)
• How To Make Your Own Child Theme - Includes Screencast
• Guide to WordPress Child Theme Development
• How to: Create a Child Theme based on Twenty Eleven
• Customizing your WordPress theme using Firebug
• Tutorial: Child Themes basics and creating Child Themes in WordPress
• How to modify the Parent Theme behavior within the Child Theme
• Child Theme Plugins
• WordPress Child Theme The Why and How

変更履歴

• 3.0 :

最新英語版： WordPress Codex » Child Themes （最新版との差分）