WPの

~ワードプレス関連~

子テーマの導入と親テーマへの継承について

      2015/12/25

子テーマの 導入方法

親テーマ 子テーマ

親テーマ のテンプレートファイルやスタイルシート(CSS)を編集してもアップデートすると、初期化され再設定 という状態になり、バックアップしていないと泣きを見ることになります。

それを回避するために 子テーマ(チャイルドテーマ)を 導入 します。

子テーマ(チャイルドテーマ)は、子テーマ内にあるスタイルシートの記述から参照している親テーマの全てをオーバーライド(上書き)します。

WordPressを使うなら、この機能は重要です。しっかり理解しておくとカスタマイズがスムーズにできると思います。

子テーマに必ず必要なファイル

子テーマ

  • style.css

style.css(スタイルシート)のみです。これ以外は、すべて親テーマから引き継ぎます。

style.css の中に必要な記述です。

  • 「Template」 : 親テーマのフォルダ名 ※必須
  • 「Theme Name」 : 子テーマの名前 ※必須
  • 「Theme URI」 : 子テーマのURI
  • 「Description:」 : 子テーマの説明
  • 「Author」 : 子テーマの作者
  • 「Version」 : 子テーマのバージョン

実際の style.css のソースコードです。

必ず記述する必要があるのは、親テーマのフォルダ名と子テーマ名(任意)です。

テンプレートファイルは、親テーマ の フォルダ名 で 参照 しています。スタイルシートは @import url(“../親テーマ/style.css”) で参照しています。

しかし、実は @import url(“../親テーマ/style.css”) は、レスポンスが悪くパフォーマンスを悪化させます。

子テーマのスタイルシートから親テーマを参照する 最適 な方法

ここで、次に必要な ファイル がfunction.phpです。

functions.phpとは、WordPressに備わっている機能を呼び出したり(アクションフック)、自作の関数を記述したり出来ます。

子テーマの中にfanctions.phpのファイルを作成して、以下のコードを記述します。

実際のfanctions.phpのソースコードです。

パフォーマンスの検証は出来ませんが、名だたる有料テーマ制作者さんは、親切に子テーマも配布してくれます。その子テーマでも 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の関数が

で囲まれていた場合は、ラッキーです。上書き可能なので、子テーマへ普通に記述できます。

囲まれない場合のコードは

function child_theme_setup() {}の中に記述すればOKです。

テンプレートファイル の一覧は、コチラ。

 - テーマ , , , ,