子テーマの導入と親テーマへの継承について
2020/04/25
子テーマの 導入方法
親テーマ のテンプレートファイルやスタイルシート（CSS）を編集してもアップデートすると、初期化され再設定 という状態になり、バックアップしていないと泣きを見ることになります。
それを回避するために 子テーマ(チャイルドテーマ)を 導入 します。
子テーマ(チャイルドテーマ)は、子テーマ内にあるスタイルシートの記述から参照している親テーマの全てをオーバーライド（上書き）します。
WordPressを使うなら、この機能は重要です。しっかり理解しておくとカスタマイズがスムーズにできると思います。
子テーマに必ず必要なファイル
- style.css
style.css（スタイルシート）のみです。これ以外は、すべて親テーマから引き継ぎます。
style.css の中に必要な記述です。
- 「Template」 ： 親テーマのフォルダ名 ※必須
- 「Theme Name」 ： 子テーマの名前 ※必須
- 「Theme URI」 ： 子テーマのURI
- 「Description:」 ： 子テーマの説明
- 「Author」 ： 子テーマの作者
- 「Version」 ： 子テーマのバージョン
実際の style.css のソースコードです。
/* Theme Name: X – Child Theme Theme URI: http://theme.co/x/ Author: Themeco Author URI: http://theme.co/ Description: Make all of your modifications to X in this child theme. Version: 1.0.0 Template: x */ @import url(”../親テーマ/style.css”);
必ず記述する必要があるのは、親テーマのフォルダ名と子テーマ名(任意)です。
テンプレートファイルは、親テーマ の フォルダ名 で 参照 しています。スタイルシートは @import url(“../親テーマ/style.css”) で参照しています。
しかし、実は @import url(“../親テーマ/style.css”) は、レスポンスが悪くパフォーマンスを悪化させます。
子テーマのスタイルシートから親テーマを参照する 最適 な方法
ここで、次に必要な ファイル がfunction.phpです。
functions.phpとは、WordPressに備わっている機能を呼び出したり（アクションフック）、自作の関数を記述したり出来ます。
子テーマの中にfanctions.phpのファイルを作成して、以下のコードを記述します。
実際のfanctions.phpのソースコードです。
子テーマ内のstyle.cssの冒頭で親テーマを参照する記述です。例：twentyseventeenと子テーマ
/* Theme Name: twentyseventeen-child Description: Child theme for the Twenty Seventeen Author: Your name here Template: twentyseventeen */ここが重要！
Template: twentyseventeen試しに、「Template: twentysevente」と
最後のenを削除し外観のテーマを見てみると、親テーマを参照できず、子テーマは「壊れているテーマ」と表示されました。
有料テーマ制作者が親切に子テーマも配布してくれます。その子テーマでも functions.php によるスタイルシートの参照を行っているので間違いないと思います。
パフォーマンスの向上、表示速度の高速化はSEO対策にもなります。
子テーマ内のファイルによって違う 継承方法 (オーバーライド)について
WordPressテーマ内には3種類のファイルが存在します。
- スタイルシート :style.css
- テンプレートファイル :index.php,page.php,single.phpなど
- 関数 :fanctions.php
スタイルシートのルールは、後から読み込んだ方が優先されます。子テーマのstyle.cssは、親テーマのスタイルシートの後に追記していくので、優先されます。
テンプレートファイルは、まず 子テーマの中にファイルがあるかチェックされて、なければ親テーマのテンプレートファイルが使用されます。
例えば、index.phpが子テーマ内にある場合、子テーマのindex.phpが適用され、親テーマのindex.phpは無視されます。
functions.php は特殊でテンプレートファイルやスタイルシートとは違った継承の仕方をします。
最初に子テーマのfunctions.phpが読み込まれて、その後に 親テーマ の functions.php が読み込まれます。
なので、同じ名前の関数を使用した場合、上書きされて効きません。同じ関数名がないコードは上書き可能です。
親テーマのfunctions.phpの関数が
if( ! function_exists ( xxxxxxxx ) ) {
}
で囲まれていた場合は、ラッキーです。上書き可能なので、子テーマへ普通に記述できます。
囲まれない場合のコードは
if ( ! function_exists( 'child_theme_setup' ) {
function child_theme_setup() {
add_filter('xxxxx', 'xxxxx');
remove_filter('xxxxx', 'xxxxx');
}
}
// 上記の関数を、親テーマの読み込みより後に読み込んでもらう
add_action( 'after_setup_theme', 'child_theme_setup' );
function child_theme_setup() {}の中に記述すればOKです。