WordPressの子テーマ作成【注意点も解説】

こんにちは、Web制作をやっているゆーたです。

私がWordPressを触りたての頃の話なのですが、既存テーマのカスタマイズをし、良いのできたなーと余韻に浸り1週間後。カスタマイズしていたテーマに更新依頼が来ていたので、躊躇わず更新すると、カスタマイズしていた内容が初期化され、悲惨な状況になりました。

しかし、バックアップを取っていたのでなんとかなったものの、あのような心臓に負担をかける体験は二度としたくありませんし、皆さんにもしてほしくありません。

そのためには、テーマが更新されてもカスタマイズした内容が消えないように「子テーマ」を作成する必要があります。

もちろん既存テーマではない、1から作成する独自テーマであれば、子テーマを作成する必要はありません。

そのような状況下ではない限り、子テーマを作成しましょう。子テーマを作成する際に、テーマが認識されないというループに陥らないように注意点も載せています。

では早速、子テーマの作成の手順を見ていきましょう。

子テーマ作成

子テーマの作成は名前だけ難しそうなだけで、実際のところそんなに難しい論点ではありません。

まず、子テーマ用のフォルダをデスクトップに準備します。

子テーマのフォルダ作成

今回は親テーマ(継承するテーマ)がtwentytwentyoneなので、子テーマのフォルダ名をtwentytwentyone-childにします。(名前は任意だがわかりやすく)

次にこのtwentytwentyone-childフォルダの中にstyle.cssファイルを作成し、以下のコードを入れていきます。コピペOK!

/*
Template: twentytwentyone
*/

上記のファイルとそのコードが子テーマでの必須の項目となります。コメントアウトは必ずしましょう。

ここで注意しなければならないのが

style.cssの Template: には、親のテーマ名ではなく、親のフォルダ名を入力する

という点である。

下図は親のテーマ名です。

親のテーマ名

下図は親のフォルダ名です。

親のフォルダ名

たったこれだけで子テーマが認識されます。

子テーマ

上記の必須ファイル以外にも、書いておきたいコードやファイルがあります。それが下記コードです。

/*
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: には、親のテーマ名ではなく、親のフォルダ名を入力するところでした。

ここはよく間違っちゃい、詰まる部分ですので注意が必要です。

では、良き子テーマライフを願っております!