こんにちは、Web制作をやっているゆーたです。
私がWordPressを触りたての頃の話なのですが、既存テーマのカスタマイズをし、良いのできたなーと余韻に浸り1週間後。カスタマイズしていたテーマに更新依頼が来ていたので、躊躇わず更新すると、カスタマイズしていた内容が初期化され、悲惨な状況になりました。
しかし、バックアップを取っていたのでなんとかなったものの、あのような心臓に負担をかける体験は二度としたくありませんし、皆さんにもしてほしくありません。
そのためには、テーマが更新されてもカスタマイズした内容が消えないように「子テーマ」を作成する必要があります。
もちろん既存テーマではない、1から作成する独自テーマであれば、子テーマを作成する必要はありません。
そのような状況下ではない限り、子テーマを作成しましょう。子テーマを作成する際に、テーマが認識されないというループに陥らないように注意点も載せています。
では早速、子テーマの作成の手順を見ていきましょう。
子テーマ作成
子テーマの作成は名前だけ難しそうなだけで、実際のところそんなに難しい論点ではありません。
まず、子テーマ用のフォルダをデスクトップに準備します。
今回は親テーマ(継承するテーマ)がtwentytwentyoneなので、子テーマのフォルダ名をtwentytwentyone-childにします。(名前は任意だがわかりやすく)
次にこのtwentytwentyone-childフォルダの中にstyle.cssファイルを作成し、以下のコードを入れていきます。コピペOK!
/*
Template: twentytwentyone
*/
上記のファイルとそのコードが子テーマでの必須の項目となります。コメントアウトは必ずしましょう。
ここで注意しなければならないのが
という点である。
下図は親のテーマ名です。
下図は親のフォルダ名です。
たったこれだけで子テーマが認識されます。
上記の必須ファイル以外にも、書いておきたいコードやファイルがあります。それが下記コードです。
/*
Template: twentytwentyone
Theme Name: twentytwentyone-child
*/
「Theme Name:」 はその名の通りテーマ名を決めるもので、親のテーマ名-childとするとわかりやすいでしょう。
子テーマのfunctions.phpにも付加したいコードがあります。それが下記コードです。
<?php add_action('wp_enqueue_scripts', 'theme_enqueue_styles');
function theme_enqueue_styles()
{
wp_enqueue_style('parent-style', get_template_directory_uri() . '/style.css');
}
このコードの意味は、子→親の順番で読み込まれるスタイルシートを親→子の順番で読み込まれるようにし、親のスタイルシートを継承するという内容です。
これによって親のスタイルシートを子のスタイルシート上で上書きすることが可能になります。
親と子のテンプレートファイルの読み込み順序
子テーマを作成し、カスタマイズに入る場合に重要になってくるのが、親のテンプレートファイルと子のテンプレートファイルの読み込まれる順序です。
そもそもテンプレートファイルって何?という方は以下のリンクへ。非常にわかりやすくまとめられています。→「テンプレートファイルのわかりやすい説明」
以下のファイルを子テーマで作成した場合、子のファイルが親のファイルを上書きするのではなく、親のファイルが無効化され、子のファイルのみが読み込まれるようになります。
header.php
footer.php
single.php
archive.php
など
よって、style.cssとfunctions.php以外のファイルをカスタマイズしたい場合は、親の各ファイルをコピペしてからカスタマイズしていきましょう。
style.cssは「子テーマの作成」で紹介したfunctions.phpのコードを書いていれば
親のstyle.css→子のstyle.css
の順番に読み込まれます。
functions.phpは特殊で
子のfunctions.php→親のfunctions.php
の順番に読み込まれます。
そのため、基本的には関数名を被らせてはいけません。
まとめ
ここまで読んでいただきありがとうございます。
今回の記事で特に学んでいただきたかったのは、アラートボックスの style.cssの Template: には、親のテーマ名ではなく、親のフォルダ名を入力するところでした。
ここはよく間違っちゃい、詰まる部分ですので注意が必要です。
では、良き子テーマライフを願っております!