【WordPress】３分でできる！子テーマの作り方と使い方

こんにちは。ひでほいです。

今回はWordPressでの「子テーマ」の作り方と使い方をご紹介します。

テーマの提供元から子テーマも提供されていれば問題ないのですが、テーマによっては提供されておらず、その場合は自分で作成する必要があります。

方法さえ知っていれば、誰でも簡単に作れちゃいます。

面倒くさがって後回しにしておくと、あとあと面倒な事になりかねないので早めに導入しておきましょう！

スポンサードリンク

そもそも、親テーマと子テーマの関係性は？

ここで改めて親テーマと子テーマの関係性についておさらいです。

親テーマ・子テーマとは

WordPressの構造として、それぞれに同一のファイルが存在した場合は、先に「親テーマ」が読み込まれ、そのあとに「子テーマ」を上書きするかたちで読み込まれます。

子テーマ導入のメリット

テーマを最新版などにアップデートすると、テーマを自分で直接カスタマイズしていた場合、その内容も上書きされて消えてしまいます。
しかし、子テーマへカスタマイズを行うことで、この問題を回避することができる。
カスタマイズを失敗してしまった場合でも、影響を最小限に抑えることができる。

それでは実際に子テーマを作成していきます。

こちらが作業の流れになります。

まずは、子テーマのフォルダを作成します。

親テーマと同じ階層である /wp-content/themesに新規でフォルダを作成します。
フォルダの名前はなんでも良いのですが「親テーマ名-child」など分かりやすい名前にしておきましょう。

今回は、このサイト「らいふーる」でも使用しているWordPressテーマ「ストーク」を例に解説していきます。

作成した子テーマのフォルダ内に新規で「style.css」という名前でCSSファイルを作成します。
作成した style.css に以下のコードを記述します。

「Theme Name」は自由に付けても良いですが、「Template」は必ず親テーマのフォルダ名を入力します。
スペルミスがあると認識されないので、正確に入力しましょう。

続いて子テーマのフォルダ内に新規で「functions.php」という名前でファイルを作成します。
作成したfunctions.phpに以下のコードを記述して子テーマを認識させます。

WordPressの管理画面の「外観＞テーマ」をクリックします。

先ほど作成した子テーマが表示されているはずですので「有効化」します。

これで子テーマが使えるようになりました。

続いて子テーマの使い方です。

使い方はいたって簡単。
カスタマイズするコードを子テーマのファイルに追加していくだけです！

試しに、先ほど有効化した子テーマの「style.css」に以下のコードを追加してみましょう。

画面をリロードすると、フォントが変わりましたでしょうか？

フォントが変わっていれば、子テーマが正常に認識されている証拠です。

子テーマを導入しておけば、万が一、カスタマイズに失敗してサイトが正常に動かなくなってしまっても、対象のファイルを削除するか、親テーマに切り替えることで、すぐに正常に動作する状態に戻すことができます。

失敗を怖がらず、どんどんカスタマイズしちゃいましょう！

以上となります。お疲れ様でした！

最後まで読んでいただきありがとうございました。
この記事が少しでもお役に立ちましたらシェアしてもらえると嬉しいです。