子テーマの作り方 CSSとfunctions.phpの扱いに注意

WordPress子テーマの作り方と使い方のポイント。CSSの読み込み順と functions.php の動作については注意が必要です。

こんな方は子テーマを作って編集しよう

既存のテーマを利用してサイトを構築した場合、テーマのアップデートで変更箇所が元に戻ってしまう場合があります。そんな時に備えて通常は子テーマを作り編集することで、アップデートがあっても変更箇所はそのまま保持されます。

完全にオリジナルで作る場合は、あまり必要ないですが、元の制作者が退社してしまった場合などは、念のため子テーマを作って編集した方が安全です。

基本的な設定

子テーマフォルダの作成

親テーマ名-child 等の親子関係のわかりやすい名前にします。
例）親テーマフォルダが、abc の場合、abc-child

style.cssの作成

xxx-child フォルダ内に style.css を作成します。
最低限、下記の2項目の記述があれば動作します。
Theme Name ・・・ 子テーマの名前（親テーマ名の後ろに child 等つけます）
Template ・・・ 親テーマのフォルダ名

/*
Theme Name: themename child
Template: themename
Template Version: 1.0
*/

Theme Checkプラグインで検証を行うと、エラーではないですがTemplate Versionに関する説明が出ます。
1行追加し、Template Versionに子テーマ作成時の親テーマのVersionを書いておきます。
親テーマが更新された場合、検証を行い問題なければ、その都度書き換えていきます。

functions.phpの作成

基本の型は、このように親テーマのCSSを読み込んでから、子テーマの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' );

その他のファイル

その他のファイルは、上書きしたいファイルだけを xxx-child にコピーして編集します。
例）親テーマの header.php だけ書き換えたいあ場合は、header.php だけ xxx-child にコピーして編集します。

動作ルールについて

親テーマにしかファイルが存在していない場合、
親テーマのファイルが読み込まれる

子テーマにしかファイルが存在していない場合、
子テーマのファイルが読み込まれる

親テーマ / 子テーマどちらにもファイルが存在している場合、
子テーマのファイルが読み込まれる

functions.phpに関しては、子テーマ→親テーマの順で読み込まれます

CSSの同名のクラス名での上書きとは違い、PHPは関数の重複ができません。
そのため、少しでも挙動を変えたい場合は新規に関数を作り利用しているテンプレートファイルを書き換えたものを子テーマに作る必要があります。

親テーマ側で !function_exists が使われている場合は、子テーマの同名関数名で上書き出来ます。

// 子テーマ
function foo() {	//処理
}
// 親テーマ
if ( ! function_exists( 'foo' ) ) {	function foo() {	//処理	}
}

テーマ製作者や将来性を見据えて親テーマを作る際は一手間加えて !function_exists を使っておくと◎