有料・無料のテーマファイルを編集すると、テーマがアップデートした際に変更箇所が元に戻ってしまう場合があります。そんな時に備えて通常は子テーマを作り編集することで、アップデートがあっても変更箇所はそのまま保持されます。
こんな方へ
予算がなく、有料無料テーマを使い社内でサイト構築する必要がある場合や、制作会社で社内に基本テーマをいくつか用意しておき、それをベースに構築する場合の時間短縮などに使えます。
完全にオリジナルで作る場合は、あまり必要ないですが、元の制作者が退社してしまった場合などは、念のため子テーマを作って編集した方が安全です。
初期設定
子テーマ用のフォルダ作成
親テーマ名-child等の親子関係のわかりやすい名前にします。
style.cssの作成
最低限、下記の2項目があれば動作します。
Theme Name ・・・ 子テーマの名前（親テーマ名の後ろに child 等つけます）
Template ・・・ 親テーマのフォルダ名
/*
Theme Name: themename child
Template: themename
*/Theme Checkプラグインで検証を行うと、エラーではないですがTemplate Versionに関する説明が出ます。
1行追加し、Template Versionに子テーマ作成時の親テーマのVersionを書いておきます。
親テーマが更新された場合、検証を行い問題なければ、その都度書き換えていきます。
/*
Theme Name: wpqwPack child
Template: wpqwpack
Template Version: 1.0
*/functions.phpの作成
基本の型は、このように親テーマのCSSを読み込んでから、子テーマのCSSを読み込みます。
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' ) );
}
add_action( 'wp_enqueue_scripts', 'theme_enqueue_styles' );親テーマにある複数のCSSを先に読み込む場合
親テーマに複数のCSSがある場合、このように依存関係を明示することで意図した順に読み込みます。
function theme_enqueue_styles() {
wp_enqueue_style( 'reset', get_template_directory_uri() . '/css/reset.min.css' );
wp_enqueue_style( 'style', get_template_directory_uri() . '/style.css', array( 'reset' ) );
wp_enqueue_style( 'style2', get_template_directory_uri() . '/css/style2.css', array( 'style' ) );
wp_enqueue_style( 'child-style', get_stylesheet_directory_uri() . '/style.css', array( 'style2' ) );
}
add_action( 'wp_enqueue_scripts', 'theme_enqueue_styles' );
WP5.3現在、親テーマ内で依存関係を指定し、子テーマからハンドルのみで呼び出した場合、意図した順になりませんでした。
関数の違い
get_stylesheet_uri()
現状のテーマで使われているスタイルシートのURIをstyle.css付きで返します。
子テーマにいるときは子テーマのURIになります。
get_template_directory_uri()
親テーマのディレクトリURIになります。
get_stylesheet_directory_uri
現在いるテーマのディレクトリURIになります。
子テーマで使った場合、子テーマ内を参照します。
動作について
親テーマの変更を加えたいファイルのみを、子テーマディレクトリ内に作ることで上書きできるようになります。
基本的なルール
親テーマにしかファイルが存在していない場合
親テーマのファイルが読み込まれる
子テーマにしかファイルが存在していない場合
子テーマのファイルが読み込まれる
親テーマ / 子テーマどちらにもファイルが存在している場合
子テーマのファイルが読み込まれる
注意が必要なルール （style.css / functions.php）
style.cssとfunctions.phpは、親テーマ / 子テーマの両方を読み込みます。
記述を間違えずに、子テーマのstyle.cssを最後に読み込むことで、親テーマの内容を上書きできます。
functions.phpに関しては、子テーマ→親テーマの順で読み込まれます。
CSSの同名のクラス名で上書きとは違い、PHPは関数の重複ができません。
そのため、少し挙動を変えたい場合は新規に関数を作り利用しているテンプレートファイルを書き換えたものを子テーマに作る必要があります。
例外として、親テーマ側で!function_existsが使われている場合は、子テーマの同名関数名で上書き出来ます。
// 通常
function foo() {
//処理
}
// function_existsを使った場合
if ( ! function_exists( 'foo' ) ) {
function foo() {
//処理
}
}テーマ製作者や将来性を見据えて親テーマを作る際は一手間加えて!function_existsを使っておきましょう。